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

07.09.2017

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка для шеринга. В данном примере взят рабочий код с сайта на CMS WordPress, для статического сайта измените:

<?php the_permalink(); ?> – на адрес страницы, которую нужно зашерить,
<?php the_title(); ?> – замените на заголовок страницы, которой вы делитесь в соцсети,
<?php bloginfo('name'); ?> – замените на название сайта.

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

<ul class="share-list">
    <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="https://t.me/share/url?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" class="share-link share-link--telegram" rel="nofollow" target="_blank">
        <i class="fa fa-telegram" aria-hidden="true"></i>
      </a>
    </li>

    <li class="share-item">
      <a href="viber://forward?text=<?php the_permalink(); ?>" class="share-link share-link--telegram" rel="nofollow" target="_blank">
        <i class="fab fa-viber" 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 для своего сайта для каждой страницы.

Рекомендую к прочтению:

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

  • Сергей

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

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

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

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

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

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

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

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

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

    Ответить
  • Vlad

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

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

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

    Ответить
  • Rain

    еще бы инстаграм туда добавить
    благодарю за статью

    Ответить
    • Denis Creative

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

      Ответить
  • NickoF84

    На сайте *** такие кнопки, к сожалению, сделать не удалось. Но за Ваш труд спасибо большое!

    Ответить
    • Denis Creative

      У вас там сторонний скрипт ya-share.js, в каких-то случаях так сделать проще, чем добавлять свои кнопки, стили и иконки для кнопок.

      Ответить

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