В этой заметке я расскажу — как поставить себе на сайт скрипт Social Likes, который отображает кнопки социальных сетей.
Поскольку мой блог работает стабильно, настало время в очередной раз оптимизировать скорость загрузки.
Основная причина тормозов во время загрузки поста была в опросе всех социальных сетей, кнопки которых у меня были добавлены на сайте. Способ добавления кнопок был описан мною ранее в статье «Добавляем кнопки «Мне нравится» от Facebook, ВКонтакте, Twitter и Google+».
Если вы хотите добавить кнопки социальных сетей на сайт — выбор огромен! Это может быть кнопка «Поделиться» от компании Яндекс, блок кнопок ShareThis — тысячи их.
Во всех этих решениях есть один фатальный недостаток — они зависят от сторонних сайтов. Если сайт, который предоставляет кнопку, ляжет, то вместе с ним накроется и ваш блог (как минимум — будут тормоза при открытии страниц).
Таким образом, для автономного блога остается два варианта: написать код загрузки кнопок самому или воспользоваться готовым рабочим решением, который делает всю работу за вас и при этом не зависит от сторонних сайтов. Именно такой функционал предоставляет скрипт Social Likes.
Поехали!
Настраиваем внешний вид кнопок в конструкторе Social Likes:
Для эстетов есть вариант конструктора на английском.
Затем скачиваем архив со скриптом и нужным вам файлом стилей. В архиве уже есть готовый index.html с примером, так что, если вам все понятно, можете дальше не читать.
Загружаем social-likes.min.js и файл стилей в папочку с темой и добавляем в functions.php вашей темы вот такой код:
function enqueue_social_likes() { $uri = get_stylesheet_directory_uri(); // Регистрируем скрипт и указываем, что он зависит от jQuery wp_register_script('social-likes', $uri . '/social-likes.min.js', array('jquery')); // Регистрируем файл стилей wp_register_style('social-likes', $uri . '/social-likes_birman.css'); // Если это страница с постом if (is_singular()) { // Вставляем скрипт в код страницы wp_enqueue_script("social-likes"); // Вставляем файл стилей в код страницы wp_enqueue_style("social-likes"); } } // Добавим вызов нашей функции во время инициализации скриптов add_action('wp_enqueue_scripts', 'enqueue_social_likes'); |
Затем в single.php вашей темы добавляем вот такой блок:
<div class="social-likes"> <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div class="twitter" data-via="koryakokot" title="Поделиться ссылкой в Твиттере">Twitter</div> <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div> |
После всех этих манипуляций вам наверняка захочется узнать — насколько часто посетители сайта кликают по этим кнопкам. К счастью Social Likes поддерживает событие popup_opened.social-likes, которое вызывается каждый раз, когда открывается окно «Поделиться». Добавляем вот такой код в footer.php вашей темы (сразу после вызова wp_footer()):
<script type="text/javascript"> jQuery('.social-likes').on('popup_opened.social-likes', function(event, service, win) { ga('send', 'social', service, 'share', location.href); }); </script> |
После этого заходим в Google Analytics смотрим «Источники траффика->Соцфункции->Плагины».
Если вам понравилась данная заметка, теперь вы можете поделиться ею в социальных сетях.