کد شبکه های اجتماعی برای سایت

نویسنده : رضا قربانی | زمان انتشار : 08 فروردین 1401 ساعت 10:05

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

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

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

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

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

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

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

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

<ahref="https://www.facebook.com/sharer/sharer.php?u=<?phpthe_permalink();?>"target="_blank"title="اشتراک در فیسبوک"rel="nofollow"style="background:#4267b2; ">

اشتراکگذاریدرفیسبوک

</a>

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

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

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

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

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

<ahref="https://twitter.com/share?text=text goes here&url=<?phpthe_permalink();?>"target="_blank"title="اشتراک در توییتر"rel="nofollow"style="background:#20a2f2; ">

اشتراکگذاریدرتوییتر

</a>

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

<ahref="https://www.linkedin.com/shareArticle?mini=true&url=<?phpthe_permalink();?>/watch?v=SBi92AOSW2E"target="_blank"title="اشتراک در لینکدین"rel="nofollow"style="background:#0083be; ">

اشتراکگذاریدرلینکدین

</a>

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

<ahref="//www.pinterest.com/pin/create/button/?url=<?phpthe_permalink();?>&media=<?phpif(function_exists('the_post_thumbnail'))echowp_get_attachment_url(get_post_thumbnail_id());?>&description=<?phpechoget_the_title();?>"data-pin-do="buttonPin"data-pin-config="beside"data-pin-color="red"data-pin-height="28"><img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png'alt='Pin it'/></a>

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

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

<ahref="mailto:?subject=اشتراک صفحه‌ای از دایان&body=<?phpthe_permalink();?>"title="اشتراک با ایمیل"rel="nofollow"style="background:#0078d7; ">

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

</a>

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

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

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

.share-btnsa{

font-size:18px;

display:inline-block;

color:white;

text-align:center;

padding:5px12px;

width:36px;

height:36px;

}