Список постов с меткой "JavaScript"

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

Если вам понравилась данная заметка, теперь вы можете поделиться ею в социальных сетях.