نحوه اشتراک گذاری مطالب وب‌سایت در شبکه‌های اجتماعی


نویسنده:
دوشنبه 1 اردیبهشت 1399
کد اشتراک گذاری مطالب در شبکه‌های اجتماعی مختلف

در این آموزش کد اشتراک گذاری مطالب در شبکه‌های اجتماعی از جمله فیسبوک، توییتر، لینکدین و… را بررسی می‌کنیم. به کمک این کد می‌توانید کلید‌های اشتراک گذاری مطالب را در وب‌سایت خود فعال کنید. به این ترتیب کاربران وب‌سایت شما قادر خواهند بود هر صفحه از سایت را با سایرین share کنند.

این روش تاثیر خوبی در افزایش ترافیک وب‌سایت شما خواهد داشت. چرا که مطالب جذاب وب‌سایت شما در شبکه‌های مختلف به اشتراک گذاشته می‌شوند و در مرض دید کاربران مختلف قرار می‌گیرند.

در آموزش‌های قبل روش افزودن دکمه‌ی اشتراک‌گذاری مطالب در پیام‌رسان‌های تلگرام و واتس‌اپ را بررسی کردیم. می‌توانید به کمک لینک زیر به این آموزش دسترسی داشته باشید.

افزودن دکمه‌ی اشتراک‌گذاری مطالب وب‌سایت در تلگرام و واتساپ


کد اشتراک گذاری مطالب در شبکه‌های اجتماعی

توجه کنید که این کدها را باید در صفحه‌‌ای قرار دهید که میخواهید اشتراک گذاری در آن فعال باشد. برای مثال در وب‌سایت‌های وردپرسی برای صفحات نوشته‌های سایت، کافیست به صفحه‌ی single.php قالب مراجعه کنید. سپس کد ()the_content را پیدا کنید و کدهای اشتراک گذاری را بعد از آن وارد کنید. به این ترتیب دکمه‌ی اشتراک گذاری بعد از محتوای سایت نمایش داده می‌شوند.

ساخت دکمه‌ اشتراک گذاری مطالب در فیسبوک

برای اینکار از کد زیر استفاده نمایید.

با اضافه کردن این کد دکمه‌ی اشتراک گذاری مطلب برای فیسبوک فعال می‌شود. اگر وب‌سایت شما وردپرسی نیست در بخش the_permalink باید آدرس صفحه‌ی مورد نظر خود را قرار دهید.

می‌توانید به جای عبارت “اشتراک گذاری در فیسبوک” از یک آیکون استفاده کنید. برای اینکار باید این عبارت را پاک کنید و تگ Img‌ را جایگذاری کنید یا از فونت آیکون‌هایی مثل Font Awsome استفاده کنید.

فونت آیکون چیست؟


ساخت دکمه‌ اشتراک گذاری مطالب در توییتر

این کد هم دقیقاً مثل کد بالا عمل می‌کند. در وب‌سایت‌های غیر وردپرسی عبارت the_permalink پاک شود.

ساخت دکمه‌ اشتراک گذاری مطالب در لینکدین

ساخت دکمه‌ اشتراک گذاری در پینترست

اشتراک گذاری مطالب به کمک ایمیل

به کمک کد زیر می‌توانید قابلیت اشتراک گذاری مطالب را با ایمیل هم فراهم کنید. اگر کاربر در تلفن همراه یا کامپیوتر خود یک نرم‌افزار ارسال ایمیل داشته باشد، با کلیک روی این دکمه وارد این نرم افزار می‌شود. همچنین آدرس صفحه‌ی کنونی سایت در بخش محتوای ایمیل قرار می‌گیرد.


استایل دهی به دکمه‌ها

برای نمایش بهتر و زیباتر دکمه‌ها، می‌توانید قبل از همه‌ی این دکمه‌ها یک تگ کلی اضافه کنید که همه‌‌ی آنها را در یک بخش نگه دارد. پس کد < “div class=”share-btns> را قبل از همه‌ی این کدها اضافه کنید و در انتهای کار بعد از قرار دادن تمامی کدها تگ </div> را قرار دهید.

سپس وارد فایل استایل دهی قالب خود شوید. احتمالاً نام این فایل main.css‌ است. در این فایل کدهای زیر را وارد کنید.

مطالب زیر را حتما بخوانید

ایجاد لیست کشویی (drop-down) وابسته به هم در HTML

گاهی اوقات نیاز داریم تا چندین لیست کشویی (drop-down) را به هم وابسته کنیم. برای مثال انتخاب استان و شهر...

بهترین‌ فریم‌ورک‌های CSS را بشناسید

زبان برنامه‌نویسی CSS در طراحی وب زبانی است که تعیین می‌کند چگونه عناصر HTML در کنار هم، درون یک صفحه...

روش افزودن دکمه پرینت وب‌سایت

افزودن دکمه پرینت به سایت در وب‌سایت‌های آموزشی یا فروشگاهی برای چاپ رسید خرید یا بلیت بسیار کاربردی است.

آموزش ساخت سایدبار ثابت (fixed sidebar)

در این مقاله آموزش می‌دهیم که چگونه با روشی آسان کاری کنیم تا هنگامی که صفحه اسکرول می‌شود، سایدبار ثابت...

آموزش تولید محتوای متنی

دوره آموزش تولید محتوای متنی در وب

آموزش تولید محتوای متنی در وب‌سایت، یک دوره‌ی آموزشی برای تولید‌کنندگان محتوا ...

دوره آموزش ووکامرس | ساخت فروشگاه اینترنتی بدون کد نویسی

دوره آموزش ووکامرس | ساخت فروشگاه اینترنتی بدون کدنویسی

دوره‌ای مختص افرادی که می‌خواهند فروشگاه اینترنتی بسازند و آن را حرفه ...

پکیج آموزش html و css

دوره آموزش HTML و CSS

دوره آموزش HTML و CSS به صورت ویدیویی و پروژه محور : ...

دیدگاهتان را بنویسید

4 پاسخ به “نحوه اشتراک گذاری مطالب وب‌سایت در شبکه‌های اجتماعی”

  1. ای فری گفت:

    سلام ، ممنون مطلب خوبی بود ، اما سوالم اینه برای قرار دادن این ها توی یک ردیف بصورت ساید در سایت چکار باید کنیم ؟

    • سلام دقیقا متوجه منظورتون نشدم ولی برای تغییرات در نمایش باید از css استفاده کنید و استایل بدید. برای مثال برای نمایش در یک ستون عمودی که امیدورام منظورتون همین بوده باشه:

      همه تگ ها درون یک div کلی قرار بگیرن و اون تگ کلی:

      display: flex;
      flex-flow: column;

  2. مهدی گفت:

    سلام. خسته نباشید. من از قالب جنه استفاده میکنم و دکمه های اشتراک گذاری داره اما دکمه های اشتراک گذاری تلگرام رو فقط در حالت موبایل نشون میده؛ راهی ندارید بتونم توی حالت دسکتاپ هم نشونش بدم؟ کدی چیزی نداره؟

  3. آرمان گفت:

    سلام عالی بود
    لطفا کد اشتراک گذاری با gmail رو هم قرار بدید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *