В этой заметке я расскажу — как поставить себе на сайт скрипт 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'); |
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> |
<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> |
<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 смотрим «Источники траффика->Соцфункции->Плагины».
Если вам понравилась данная заметка, теперь вы можете поделиться ею в социальных сетях.