در این آموزش کد اشتراک گذاری مطالب در شبکه‌های اجتماعی از جمله فیسبوک، توییتر، لینکدین و… را بررسی می‌کنیم. به کمک این کد می‌توانید کلید‌های اشتراک گذاری مطالب را در وبسایت خود فعال کنید. به این ترتیب کاربران وبسایت شما قادر خواهند بود هر صفحه از سایت را با سایرین share کنند.
این روش تاثیر خوبی در افزایش ترافیک وبسایت شما خواهد داشت. چرا که مطالب جذاب وبسایت شما در شبکه‌های مختلف به اشتراک گذاشته می‌شوند و در مرض دید کاربران مختلف قرار می‌گیرند.
در آموزش‌های قبل روش افزودن دکمه‌ی اشتراک‌گذاری مطالب در پیام‌رسان‌های تلگرام و واتساپ را بررسی کردیم. می‌توانید به کمک لینک زیر به این آموزش دسترسی داشته باشید.
افزودن دکمه‌ی اشتراک‌گذاری مطالب وبسایت در تلگرام و واتساپ
کد اشتراک گذاری مطالب در شبکه‌های اجتماعی
توجه کنید که این کدها را باید در صفحهای قرار دهید که میخواهید اشتراک گذاری در آن فعال باشد. برای مثال در وب‌سایت‌های وردپرسی برای صفحات نوشته‌های سایت، کافیست به صفحه‌ی single.php قالب مراجعه کنید. سپس کد ()the_content را پیدا کنید و کدهای اشتراک گذاری را بعد از آن وارد کنید. به این ترتیب دکمه‌ی اشتراک گذاری بعد از محتوای سایت نمایش داده می‌شوند.
ساخت دکمه اشتراک گذاری مطالب در فیسبوک
برای اینکار از کد زیر استفاده نمایید.
|
|
<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 پاک شود.
|
|
<a href="https://twitter.com/share?text=text goes here&url=<?php the_permalink(); ?>" target="_blank" title="اشتراک در توییتر" rel="nofollow" style="background:#20a2f2; "> اشتراک گذاری در توییتر </a> |
ساخت دکمه اشتراک گذاری مطالب در لینکدین
|
|
<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> |
ساخت دکمه اشتراک گذاری در پینترست
|
|
<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> |
اشتراک گذاری مطالب به کمک ایمیل
به کمک کد زیر می‌توانید قابلیت اشتراک گذاری مطالب را با ایمیل هم فراهم کنید. اگر کاربر در تلفن همراه یا کامپیوتر خود یک نرم‌افزار ارسال ایمیل داشته باشد، با کلیک روی این دکمه وارد این نرم افزار می‌شود. همچنین آدرس صفحه‌ی کنونی سایت در بخش محتوای ایمیل قرار می‌گیرد.
|
|
<a href="mailto:?subject=اشتراک صفحهای از دایان&body=<?php the_permalink(); ?>" title="اشتراک با ایمیل" rel="nofollow" style="background:#0078d7; "> اشتراک گذاری با ایمیل </a> |
استایل دهی به دکمه‌ها
برای نمایش بهتر و زیباتر دکمه‌ها، می‌توانید قبل از همهی این دکمه‌ها یک تگ کلی اضافه کنید که همهی آنها را در یک بخش نگه دارد. پس کد < “div class=”share-btns> را قبل از همهی این کدها اضافه کنید و در انتهای کار بعد از قرار دادن تمامی کدها تگ </div> را قرار دهید.
سپس وارد فایل استایل دهی قالب خود شوید. احتمالاً نام این فایل main.css است. در این فایل کدهای زیر را وارد کنید.
|
|
.share-btns a { font-size: 18px; display: inline-block; color: white; text-align: center; padding: 5px 12px; width: 36px; height:36px; } |
سلام عالی بود
لطفا کد اشتراک گذاری با gmail رو هم قرار بدید
سلام. خسته نباشید. من از قالب جنه استفاده میکنم و دکمه های اشتراک گذاری داره اما دکمه های اشتراک گذاری تلگرام رو فقط در حالت موبایل نشون میده؛ راهی ندارید بتونم توی حالت دسکتاپ هم نشونش بدم؟ کدی چیزی نداره؟
سلام ، ممنون مطلب خوبی بود ، اما سوالم اینه برای قرار دادن این ها توی یک ردیف بصورت ساید در سایت چکار باید کنیم ؟
سلام دقیقا متوجه منظورتون نشدم ولی برای تغییرات در نمایش باید از css استفاده کنید و استایل بدید. برای مثال برای نمایش در یک ستون عمودی که امیدورام منظورتون همین بوده باشه:
همه تگ ها درون یک div کلی قرار بگیرن و اون تگ کلی:
display: flex;
flex-flow: column;