در این مطلب کد یک ماژول یا کامپوننت اشتراک گذاری مطلب بر روی شبکه های اجتماعی در اختیار شما قرار گرفته است.
- ie
- Chrome
- Firefox
- Safari
- Opera
8+
ساختار HTML بصورت زیر است:
<div class="share-modal share-modal--close" >
<div class="share-body">
<a class="share-modal__close" href="#" id="closeModalButton">
<i class="fa fa-close icon" aria-hidden="true"></i>
</a>
<p class="share-modal__title">
<span>انتشار مطلب</span>
<i class="fa fa-share icon" aria-hidden="true"></i>
</p>
<p class="share-modal__post-title">عنوان مطلب</p>
<div class="share-buttons-container">
<a class="twitter" href="#" target="_blank"><i class="fa fa-twitter icon" aria-hidden="true"></i></a>
<a class="facebook" href="#" target="_blank"><i class="fa fa-facebook icon" aria-hidden="true"></i></a>
<a class="google-plus" href="#" target="_blank"><i class="fa fa-google-plus icon" aria-hidden="true"></i></a>
<a class="linkedin" href="#" target="_blank"><i class="fa fa-linkedin icon" aria-hidden="true"></i></a>
<a class="telegram" href="#" target="_blank"><i class="fa fa-paper-plane icon" aria-hidden="true"></i></a>
</div>
<p class="share-modal__post-title share-modal__post-title--small">آدرس کوتاه شده این مطلب</p>
<input type="text" readonly="" class="share-modal__link-box" value="css-tricks.ir/kootah-shode:P" onClick="this.select();">
</div>
</div>
عنوان مطلب و لینک اشتراک گذاری باید با اطلاعات صحیح پر شوند.
همینطور لینک های مربوط به اشتراک گذاری مطلب بر روی شبکه های اجتماعی باید بصورت زیر باشند:
https://twitter.com/intent/tweet?text=PAGE_TITLE&url=PAGE_URL&via=YOUR_TWITTER_USERNAME;
https://facebook.com/sharer/sharer.php?u=PAGE_URL;
https://plus.google.com/share?url=PAGE_URL;
https://www.linkedin.com/shareArticle?mini=true&url=PAGE_URL&title=PAGE_TITLE&source=SITE_URL;
https://telegram.me/share/url?url=PAGE_URL&text=PAGE_TITLE;
واضح است که جای موارد زیر در لینک های بالا باید اطلاعات مربوط پست و سایت شما قرار بگیرند:
- PAGE_TITLE
- PAGE_URL
- SITE_URL
- YOUR_TWITTER_USERNAME
جدا از استایلی که در کد قرار دارد نیاز است اسکریپت زیر را هم داشته باشید که با jQuery نوشته شده است. هرچند که می توانید بدون jQuery نیز آن را باز نویسی کنید:
var $shareModal = $('.share-modal');
var toggleModal = function() {
$shareModal.toggleClass('share-modal--open');
$shareModal.toggleClass('share-modal--close');
}
$('.js-share-button').on('click', function(e) {
e.preventDefault();
toggleModal();
});
$(document).keyup(function(e) {
if (e.keyCode === 27 && $shareModal.hasClass('share-modal--open')) {
$shareModal.removeClass('share-modal--open');
$shareModal.addClass('share-modal--close');
}
});
$('#closeModalButton').on('click', function(e) {
e.preventDefault();
toggleModal();
});
همانطور که در کد بالا مشاهده می شود این مدال با استفاده از کلید escape نیز بسته می شود.
برای وردپرس می خوام
داخل فولدر تم سایت شما یک فولدر به نام inc
می باشد که در آن فایلی به نام template-tags.php
وجود دارد. تابع زیر را در این فایل قرار دهید:
function social_sharing_buttons() {
$siteURL = site_url();
$pageURL = wp_get_shortlink();
// Get current page title
$pageTitle = str_replace( ' ', '%20', get_the_title());
// Construct sharing URL without using any script
$twitterURL = 'https://twitter.com/intent/tweet?text='.$pageTitle.'&url='.$pageURL.'&via=CSSTricksIr';
$facebookURL = 'https://facebook.com/sharer/sharer.php?u='.$pageURL;
$googleURL = 'https://plus.google.com/share?url='.$pageURL;
$linkedinURL = 'https://www.linkedin.com/shareArticle?mini=true&url='.$pageURL.'&title='.$pageTitle.'&source='.$siteURL;
$telegramURL = 'https://telegram.me/share/url?url='.$pageURL.'&text='.$pageTitle;
// Add sharing button at the end of page/page content
$content = '<div class="share-modal share-modal--close" >
<div class="share-body">
<a class="share-modal__close" href="#" id="closeModalButton">
<i class="fa fa-close icon" aria-hidden="true"></i>
</a>
<p class="share-modal__title">
<span>انتشار مطلب</span>
<i class="fa fa-share icon" aria-hidden="true"></i>
</p>
<p class="share-modal__post-title">'.urldecode($pageTitle).'</p>
<div class="share-buttons-container">
<a class="twitter" href="'.$twitterURL .'" target="_blank"><i class="fa fa-twitter icon" aria-hidden="true"></i></a>
<a class="facebook" href="'.$facebookURL.'" target="_blank"><i class="fa fa-facebook icon" aria-hidden="true"></i></a>
<a class="google-plus" href="'.$googleURL.'" target="_blank"><i class="fa fa-google-plus icon" aria-hidden="true"></i></a>
<a class="linkedin" href="'.$linkedinURL.'" target="_blank"><i class="fa fa-linkedin icon" aria-hidden="true"></i></a>
<a class="telegram" href="'.$telegramURL.'" target="_blank"><i class="fa fa-paper-plane icon" aria-hidden="true"></i></a>
</div>
<p class="share-modal__post-title share-modal__post-title--small">آدرس کوتاه شده این مطلب</p>
<input type="text" readonly="" class="share-modal__link-box" value="'.$pageURL.'" onClick="this.select();">
</div>
</div>';
return $content;
};
و در فایل single.php
کد زیر را بعد از فراخوانی محتوای پست قرار دهید:
<?php echo social_sharing_buttons(); ?>
و در آخر دکمه مربوط به باز شدن مدال اشتراک گذاری را در یک جای مناسب در فایل content.php
قرار دهید:
<a class="share-button js-share-button" href="#"><i class="fa fa-share icon" aria-hidden="true"></i></a>
اضافه کردن استایل و اسکریپت را به تم فراموش نکنید :)
در اینجا برای آیکون ها از fontawesome استفاده شده است اما شما می توانید از هر روشی که مناسب می دانید استفاده کنید.
شما هم می توانید مشارکت کنید.
دەستتون درد نکنە واقعا عالیە
آقای سیدی عزیز سلام
من سایت را خودم رو وردرس طراحی کردم و این پوشه نیست که فرمودید «…داخل فولدر تم سایت شما یک فولدر به نام inc می باشد که در آن فایلی به نام template-tags.php وجود دارد. …» تابع را کجا قرار بدهم.ممنون از مطالب سودمندتان.
سلام hستاد
ما برای یادگیری js چی کار کنیم ؟؟؟؟
شما قصد آموزش ندارین ؟؟؟؟
سلام علی آقا
نه فعلا برنامه ای نیست.
ویدیو نگاه کنید، کدای بقیه رو نگاه کنید، تمرین کنید…. خدا بزرگه :)
سلام:دی
چه زیبا:دی
میتونین واس رزبلاگ هم بسازین؟:دی
مرسی اَه
با سلام میخواستم در مورد ایکون شماره گیر(تماس با ما) که بعضی سایت ها گوشه ی صفحه شون میذارن بپرسم خیلی در به در دنبالشم واقعا تمام تلاشم بی فایدس چون هیچ سایتی تا حالا راجع بهش حرفی نزده توروخدا اگه میشه راهنماییم کنید ممنون از سایت خوبتون
سلام، اینا نمونه هایی از چیزی هستش که شما میخواین:
https://www.tidiochat.com
https://crisp.chat/en