نحوه اشتراک گذاری مطالب وب‌سایت در شبکه‌های اجتماعی
در آموزش‌های قبل روش افزودن دکمه‌ی اشتراک‌گذاری مطالب در پیام‌رسان‌های تلگرام و واتس‌اپ را بررسی کردیم. می‌توانید به کمک لینک زیر به این آموزش دسترسی داشته باشید.
کد اشتراک گذاری مطالب در شبکه‌های اجتماعی
توجه کنید که این کدها را باید در صفحهای قرار دهید که میخواهید اشتراک گذاری در آن فعال باشد. برای مثال در وب‌سایت‌های وردپرسی برای صفحات نوشته‌های سایت، کافیست به صفحه‌ی single.php قالب مراجعه کنید. سپس کد ()the_content را پیدا کنید و کدهای اشتراک گذاری را بعد از آن وارد کنید. به این ترتیب دکمه‌ی اشتراک گذاری بعد از محتوای سایت نمایش داده می‌شوند.
ساخت دکمه اشتراک گذاری مطالب در فیسبوک
برای اینکار از کد زیر استفاده نمایید.
|
1
2
3
|
<a href=“https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>“ target=“_blank” title=“اشتراک در فیسبوک” rel=“nofollow” style=“background:#4267b2; “>
اشتراکگذاریدرفیسبوک
</a>
|
با اضافه کردن این کد دکمه‌ی اشتراک گذاری مطلب برای فیسبوک فعال می‌شود. اگر وب‌سایت شما وردپرسی نیست در بخش the_permalink باید آدرس صفحه‌ی مورد نظر خود را قرار دهید.
می‌توانید به جای عبارت “اشتراک گذاری در فیسبوک” از یک آیکون استفاده کنید. برای اینکار باید این عبارت را پاک کنید و تگ Img را جایگذاری کنید یا از فونت آیکون‌هایی مثل Font Awsome استفاده کنید.
ساخت دکمه اشتراک گذاری مطالب در توییتر
این کد هم دقیقاً مثل کد بالا عمل می‌کند. در وب‌سایت‌های غیر وردپرسی عبارت the_permalink پاک شود.
|
1
2
3
|
<a href=“https://twitter.com/share?text=text goes here&url=<?php the_permalink(); ?>“ target=“_blank” title=“اشتراک در توییتر” rel=“nofollow” style=“background:#20a2f2; “>
اشتراکگذاریدرتوییتر
</a>
|
ساخت دکمه اشتراک گذاری مطالب در لینکدین
|
1
2
3
|
<a href=“https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>/watch?v=SBi92AOSW2E” target=“_blank” title=“اشتراک در لینکدین” rel=“nofollow” style=“background:#0083be; “>
اشتراکگذاریدرلینکدین
</a>
|
ساخت دکمه اشتراک گذاری در پینترست
|
1
2
3
|
<a href=“//www.pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php if(function_exists(‘the_post_thumbnail’)) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>&description=<?php echo get_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>
<script type=“text/javascript” async defer src=“//assets.pinterest.com/js/pinit.js”></script>
|
اشتراک گذاری مطالب به کمک ایمیل
به کمک کد زیر می‌توانید قابلیت اشتراک گذاری مطالب را با ایمیل هم فراهم کنید. اگر کاربر در تلفن همراه یا کامپیوتر خود یک نرم‌افزار ارسال ایمیل داشته باشد، با کلیک روی این دکمه وارد این نرم افزار می‌شود. همچنین آدرس صفحه‌ی کنونی سایت در بخش محتوای ایمیل قرار می‌گیرد.
|
1
2
3
|
<a href=“mailto:?subject=اشتراک صفحهای از دایان&body=<?php the_permalink(); ?>“ title=“اشتراک با ایمیل” rel=“nofollow” style=“background:#0078d7; “>
اشتراکگذاریباایمیل
</a>
|
استایل دهی به دکمه‌ها
برای نمایش بهتر و زیباتر دکمه‌ها، می‌توانید قبل از همهی این دکمه‌ها یک تگ کلی اضافه کنید که همهی آنها را در یک بخش نگه دارد. پس کد < “div class=”share-btns> را قبل از همهی این کدها اضافه کنید و در انتهای کار بعد از قرار دادن تمامی کدها تگ </div> را قرار دهید.
سپس وارد فایل استایل دهی قالب خود شوید. احتمالاً نام این فایل main.css است. در این فایل کدهای زیر را وارد کنید.
|
1
2
3
4
5
6
7
8
9
|
.share–btns a {
font–size: 18px;
display: inline–block;
color: white;
text–align: center;
padding: 5px 12px;
width: 36px;
height:36px;
}
|