Кнопки “Поделиться в социальных сетях” без сторонних плагинов (Share Social Links)

07.09.2017

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка для шеринга. В данном примере взят рабочий код с сайта на CMS WordPress, для статического сайта измените:
<?php the_permalink(); ?> – на адрес страницы, которую нужно зашерить,
<?php the_title(); ?> – замените на заголовок страницы, которой вы делитесь в соцсети,
<?php bloginfo('name'); ?> – замените на название сайта.

Так же в моем примере используются иконки FontAwesome, если у вас не подключена эта библиотека иконок, то вы можете смело все теги <i> заменить на текст или свои изображения с логотипами социальных сетей.

<ul class="list-share">
  <li class="share-item">
    <a href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" class="share-link share-link--facebook" rel="nofollow" target="_blank">
      <i class="fa fa-facebook" aria-hidden="true"></i>
    </a>
  </li>
  <li class="share-item">
    <a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&hashtags=my_hashtag" class="social-tw" rel="nofollow" target="_blank">
      <i class="fa fa-twitter" aria-hidden="true"></i>
    </a>
  </li>
  <li class="share-item">
    <script type="text/javascript" async defer src="https://assets.pinterest.com/js/pinit.js"></script>
    <a href="https://www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-custom="true" class="share-link share-link--pintrest" rel="nofollow" target="_blank">
      <i class="fa fa-pinterest" aria-hidden="true"></i>
    </a>
  </li>
  <li class="share-item">
    <a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink() ?>&title=<?php the_title(); ?>&summary=&source=<?php bloginfo('name'); ?>" rel="nofollow" target="_blank">
      <i class="fa fa-linkedin" aria-hidden="true"></i>
    </a>
  </li>
  <li class="share-item">
    <a href="http://www.reddit.com/submit" onclick="window.location = 'http://www.reddit.com/submit?url=' + encodeURIComponent(window.location); return false" class="share-link share-link--reddit" rel="nofollow" target="_blank">
      <i class="fa fa-reddit" aria-hidden="true"></i>
    </a>
  </li>
  <li class="share-item">
    <a href="https://vk.com/share.php?url=<?php the_permalink(); ?>" class="social-vk" rel="nofollow" target="_blank">
      <i class="fa fa-vkontakte" aria-hidden="true"></i>
    </a>
  </li>
  <li class="share-item">
    <a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&st.comments=<?php the_title(); ?>" class="social-ok" rel="nofollow" target="_blank">
      <i class="fa fa-odnoklassniki" aria-hidden="true"></i>
    </a>
  </li>
</ul>

Для того, чтобы при шеринге записей со своего сайта в соцсетях использовались необходимые данные, а не случайная картинка и тексты, необходимо правильно заполнить метатеги Open Graph для своего сайта для каждой страницы.

Полезная инфа:

Комментарии (9) к “Кнопки “Поделиться в социальных сетях” без сторонних плагинов (Share Social Links)”

  • Сергей

    Большое спасибо за статью, собрал замечательный блок! Только использовал таблицу вместо списка и svg-иконки.

    Ответить
  • Гарисон

    Простой и замечательный функционал!
    Благодарен.

    Ответить
  • Александр

    А если это будет в архивах выводится то будет шариться вся страница или анонс?

    Ответить
  • Артур

    Спасибо, долго искал везде не актуальная инфа, тут все работет!!!

    Ответить
  • Игорь

    Очень крутой код! Подскажите пожалуйста какие функции нужно прописать для Joomla? не могу нигде найти уже второй день…
    Имею в виду ?php the_permalink(); ? – это для WP

    Ответить
  • Vlad

    Отличная статья! Спасибо! Помогло

    Ответить
  • Фотки

    добавьте шаринг с фотками

    Ответить

Оставить комментарий