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

07.09.2017

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

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

<div class="social-share">
  <ul>
    <li>
      <a href="https://vk.com/share.php?url=<?php the_permalink(); ?>" class="social-vk" target="_blank">
        <i class="fa fa-vkontakte" aria-hidden="true"></i>
      </a>
    </li>
    <li>
      <a href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" class="social-fb" target="_blank">
        <i class="fa fa-facebook" aria-hidden="true"></i>
      </a>
    </li>
    <li>
      <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" target="_blank">
        <i class="fa fa-odnoklassniki" aria-hidden="true"></i>
      </a>
    </li>
    <li>
      <a href="https://twitter.com/share?url=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>&amp;hashtags=mobappsdown" class="social-tw" target="_blank">
        <i class="fa fa-twitter" aria-hidden="true"></i>
      </a>
    </li>
    <li>
      <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" class="social-gp">
        <i class="fa fa-google-plus" aria-hidden="true"></i>
      </a>
    </li>
    <li>
      <a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());" class="social-pt">
        <i class="fa fa-pinterest" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</div>

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

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

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