В прошлой заметке я рассказывал как добавить Social Likes на сайт с WordPress, с тех пор прошло много времени и появилась новая версия Social Likes под названием Social Likes Next. Отличается от предыдущей тем, что иконки теперь в SVG формате и для работы не требуется загрузка jQuery.
Шаг первый (скачиваем скрипт и файл стилей)
Скачиваем social-likes.min.js, например отсюда или отсюда в папку js вашей темы.
Скачиваем social-likes_flag.css, например отсюда или отсюда в папку css вашей темы.
Шаг второй (подключаем файл стилей и скрипт)
В файле functions.php вашей темы вставляем следующие строки
function b2k_enqueue_js_and_css() {
wp_register_script(
'social-likes',
get_stylesheet_directory_uri() . 'js/social-likes.min.js',
array(),
false,
true);
wp_enqueue_script('social-likes');
wp_register_style(
'social-likes',
get_stylesheet_directory_uri() . 'css/social-likes_flat.css');
wp_enqueue_style('social-likes');
}
add_action('wp_enqueue_scripts', 'b2k_enqueue_js_and_css');
Шаг третий (добавляем кнопки в конце каждого поста)
Вставляем данный скрипт в functions.php
function b2k_social_likes($content='') {
global $post;
$buttons = array();
$buttons['vk'] = '<div data-service="vkontakte" title="Поделиться ВКонтакте"></div>';
$buttons['fb'] = '<div data-service="facebook" title="Поделиться в Facebook"></div>';
$buttons['twitter'] = '<div data-service="twitter" title="Поделиться в Twitter"></div>';
$buttons['plusone'] = '<div data-service="plusone" title="Поделиться в Google+"></div>';
$buttons['ok'] = '<div data-service="odnoklassniki" title="Поделиться в Одноклассниках"></div>';
$buttons['telegram'] = '<div data-service="telegram" title="Поделиться в Telegram"></div>';
$buttons['linkedin'] = '<div data-service="linkedin" title="Поделиться в LinkeIn"></div>';
$buttons = implode('', $buttons);
$tags = array();
$tags['class'] = 'class="social-likes"';
$tags['data-title'] = 'data-title="' . $post->post_title . '"';
$tags['data-url'] = 'data-url="' . get_permalink($post->ID) . '"';
$tags = implode(' ', $tags);
$main = '<div ' . $tags . '>';
$main .= $buttons;
$main .= '</div>';
$content .= $main;
return $content;
}
add_filter('the_content', 'b2k_social_likes');
Шаг четвертый (добавляем отслеживание Google Analytics)
jQuery(window).load(function() {
jQuery('.social-likes__icon').css('pointer-events', 'none');
jQuery('.social-likes__widget').click(function(e) {
var service = jQuery(e.target).attr('data-service');
var parent = jQuery(e.target).parent();
var url = parent.attr('data-url');
var title = parent.attr('data-title');
gtag('event', 'share', {
'service' : service,
'location' : url,
'title' : title
});
});
});
Если вам интересна данная заметка, жмите любую кнопку снизу страницы, ставьте лайк, меня зовут Евгений, пока!
