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

ماژول اشتراک گذاری

در این مطلب کد یک ماژول یا کامپوننت اشتراک گذاری مطلب بر روی شبکه های اجتماعی در اختیار شما قرار گرفته است.

پشتیبانی مرورگر ها

  • 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.'&amp;url='.$pageURL.'&amp;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 استفاده شده است اما شما می توانید از هر روشی که مناسب می دانید استفاده کنید.

شما هم می توانید مشارکت کنید.

5 دیدگاه برای “ماژول اشتراک گذاری

  1. آقای سیدی عزیز سلام
    من سایت را خودم رو وردرس طراحی کردم و این پوشه نیست که فرمودید «…داخل فولدر تم سایت شما یک فولدر به نام inc می باشد که در آن فایلی به نام template-tags.php وجود دارد. …» تابع را کجا قرار بدهم.ممنون از مطالب سودمندتان.

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