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

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка для шеринга. В данном примере взят рабочий код с сайта на 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 для своего сайта для каждой страницы.

Простой таймер обратного отсчета на Javascript

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…

Форма обратной связи с прикреплением файла (Send attachments with PHP Mail())

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

Как настроить VPN в браузере Opera

В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…

Простой jQuery-скрипт для табов (вкладок)

Самый простой пример реализации табов на сайте. Код максимально простой и легкий, не нужно никаких…

13 комментариев

Сергей

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

Лучше использовать display: flex; или display: table; вместо таблиц.

Гарисон

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

Александр

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

По идее ссылка на архив, но вы попробуйте и расскажите потом нам.

Артур

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

Игорь

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

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

Фотки

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

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

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

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

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

Ответить