Кастомные социальные кнопки, или как сделать «свои» кнопки share, like, twitt

В интернете найдется множество уроков о том, как сделать свои социальные кнопки «share», «like», «twitt» и подобные, и цель данного поста лишь выбрать один из хороших способов и оставить себе его на будущее (конечно, пока не найдется более лучшего способа).

Ценность данного варианта в небольшом объеме кода и простых манипуляциях с исходным кодом, что немаловажно для не углубленных опытом программирования вебмастеров.

Итак, что необходимо:

  • подключенная библиотека Jquery (уверен, вы ее уже используете в вашем проекте);
  • создание ссылок с необходимыми переменными (если вы хотите иметь для каждой страницы «свой» текст поста в соцсеть);
  • добавление скрипта, открывающего окно с формой отправки в соцсеть в виде модального окна — т.е. не на всю страницу в новой вкладке, а отдельное окно небольшого размера, после манипуляций в котором его легко и удобно закрыть и остаться на прежней странице не теряя ее из виду. Это наиболее удобный и юзабильный вариант данного действия.

Что делаем:

подключаем jquery, желательно в хедере перед остальными скриптами, таким способом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Далее — создайте кнопки с необхдимым внешним видом (иконки, картинки на свой вкус), разместите в них ссылки по такому шаблону (класс «bt» в ссылках обязателен):

<a rel="nofollow" class="bt" title="поделиться Вконтакте" href="http://vk.com/share.php?url={адрес текущей страницы}"></a>
<a rel="nofollow" class="bt" title="поделиться в Фейсбуке" href="http://www.facebook.com/sharer.php?u={адрес текущей страницы}"></a>
<a rel="nofollow" class="bt" title="поделиться в Твиттере" href="https://twitter.com/intent/tweet?url={адрес текущей страницы}&amp;text={желаемый текст в посте}&amp;hashtags={хештеги, только буквы, разделены запятыми}"></a>

Фигурные скобки не вставляем. В них можно использовать переменные, созданные движком. Как, к примеру, в Опенкарте тег Title.:

<?php echo $heading_title; ?>

или такой код, если вы используете WordPress:

<?php the_title_attribute(); ?>

И последнее, после указанных ссылок подключите скрипт, который и будет создавать новое окно для формы поста в социальной сети:

<script type="text/javascript">
function socialopen(url){
  var winpar='width=500,height=400,left=' + ((window.innerWidth - 500)/2) + ',top=' + ((window.innerHeight - 400)/2) ;
  window.open(url,'tvkw',winpar);
}

$(document).ready(function(e) {
  $('a.bt').click(function(){
    var url = $(this).attr('href');
    socialopen(url);
    return false;
  })
});

</script>

На этом все, у вас получится всплывающее окно размером в 500 пикселей в ширину, после манипуляций в котором вы легко сможете его закрыть и окажетесь на текущей странице, которую и не покидали. Просто и удобно! И нет необходимости подключать различные библиотеки каждой социальной сети, серьезно замедляя скорость сайта.

В качестве примечания для шаринга в Facebook.

Думаю, все уже знают про то, что такое open graph теги для Фейсбука — это те данные, которые Фейсбук будет использовать по умолчанию для шаринга. Управляя контентом данных тегов, вы будете управлять тем, что отправляется в Facebook при процессе шаринга. Так что делайте выводы, действуйте и получайте профит от постов в социальных сетях.

А еще — используйте «Отладчик перепостов» от Фейсбука, если у вас что-то некорректно отображается там. Информация, собранная Фейсбуком, кешируется, так что отправив туда что-то и изменив в странице контент после, вы можете обнаружить, что в ФБ будут отправляться старые данные.