Добавляем кнопки «Мне нравится» от Facebook, ВКонтакте, Twitter

Сегодня я расскажу, как добавить кнопки социальных сетей в свой WordPress блог так, чтобы они не тормозили загрузку и отрисовку страницы. Заранее хочу предупредить, что не являюсь специалистом ни в HTML, ни в JavaScript, ни в Php. Все решения собраны по крупицам на просторах интернета.

Чтобы оказывать меньше влияния на скорость загрузки блога, все скрипты социальных сетей и служебные HTML-элементы вынесены в конец страницы сразу после вызова wp_footer().

Для того, чтобы скрипты не влияли на отображение страницы, вся работа с ними происходит только после полной загрузки блога, для этого используется библиотека jQuery, которая присутствует в каждой поставке WordPress, и событие document.onload.

Таким образом, все скрипты живут в footer.php после вызова wp_footer() в таком обрамлении:

<script type="text/javascript">
jQuery(window).load(function() {
  /*
   * Сюда мы будем добавлять скрипты социальных сетей
   */
}
</script>

Все социальные кнопки у меня используются только в постах, поэтому их HTML-элементы добавлены в single.php сразу после вызова функции the_content().

ВКонтакте

Идем на страницу виджета, где выбираем внешний вид кнопки. У меня получился вот такой код:

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>

<script type="text/javascript">
  VK.init({apiId: 3904727, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like_example"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like_example", {type: "button", height: 20});
</script>

Забираем отсюда div, который выглядит так:

<div id="vk_like_example"></div>

И добавляем в single.php.

Для корректной работы кнопки «Мне нравится», необходимо добавить div элемент в footer.php (перед вызовом jQuery(document).load):

<div id="vk_api_transport"></div>

Код загрузки кнопки в footer.php:

 jQuery.getScript(
      '//vk.com/js/api/openapi.js?115',
      function() {
        VK.init({apiId: 3904727, onlyWidgets: true});
        VK.Widgets.Like("vk_like_example", {type: "button", height: 20});
    });

Как вы могли заметить — все данные я взял из предоставленного кода практически без изменений. Все, теперь можно настроить размер кнопки и его отступы в вашем стиле.

Facebook

Получаем код виджета тут:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=545514278883012&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

И вот такой div:

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

Добавляем div в single.php:

<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

Затем специальный div в footer.php (перед вызовом jQuery(document).load) для правильной работы кнопки от Facebook:

<div id="fb-root"></div>

После этого смотрим свой appId и добавляем следующий код в footer.php:

    jQuery.ajaxSetup({ cache: true });

    window.fbAsyncInit = function() {
      FB.init({
        appId      : '545514278883012',
        status     : true,
        cookie     : true,
        oauth      : true,
        xfbml      : true,
      });      
    };

    jQuery.getScript('//connect.facebook.net/ru_RU/all.js');

С этим кодом я промучился больше всего.

Twitter

За кнопкой идем сюда:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Забираем отсюда к себе в single.php:

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

И в footer.php:

jQuery.getScript('//platform.twitter.com/widgets.js');

Самый элементарный код. Один минус — если сайт твиттера недоступен, отображает уродскую ссылку.

Заключение

Все вышеописанные кнопки в single.php:

<div id="like_buttons">
  <div id="vk_like_example"></div>
  <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
  <div id="tweet">
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
  </div>
</div>

Загрузка всех плагинов в footer.php:

<?php if(is_single()) { ?>
<div id="fb-root"></div>
<div id="vk_api_transport"></div>
<script type="text/javascript">
jQuery(window).load(function() {
    jQuery.ajaxSetup({ cache: true });

    window.fbAsyncInit = function() {
      FB.init({
        appId      : '545514278883012',
        status     : true,
        cookie     : true,
        oauth      : true,
        xfbml      : true,
      });      
    };

    jQuery.getScript('//connect.facebook.net/ru_RU/all.js');
    jQuery.getScript('//platform.twitter.com/widgets.js');
    
    jQuery.getScript(
      '//vk.com/js/api/openapi.js',
      function() {
        VK.init({apiId: 3904727, onlyWidgets: true});
        VK.Widgets.Like("vk_like_example", {type: "button", verb: 1, height: 20, width: 165});
    });

    window.___gcfg = {lang: 'ru'};
});
</script><?php } ?>

Весь код, приведенный выше добавляет кнопки только в блого-записи. Возможно, вам понадобятся кнопки на всех страницах, для этого нужно исключить проверку is_single() и добавлять HTML-элементы социальных кнопок не только лишь в single.php.

И еще один момент: если вы скопируете код отсюда один в один (без замены appId в Facebook и ВКонтакте), то все лайки будут сыпаться в мою копилку. Мне-то не жалко, но вам от этого никакого толку. (:

P.S. Если вам пригодилась информация из данного поста — пожалуйста, нажмите одну из социальных кнопок ниже.

UPD: Пришел к выводу, что загрузка кода с сайтов социальных сетей неоптимальна. На эту тему мой новый пост: «Добавляем Social Likes на сайт с WordPress».