В прошлой заметке я рассказывал как добавить 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 }); }); }); |
Если вам интересна данная заметка, жмите любую кнопку снизу страницы, ставьте лайк, меня зовут Евгений, пока!