В прошлой заметке я рассказывал как добавить 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');
Если вы хотите добавить кнопки социальных сетей на сайт — выбор огромен! Это может быть кнопка «Поделиться» от компании Яндекс, блок кнопок ShareThis — тысячи их.
Во всех этих решениях есть один фатальный недостаток — они зависят от сторонних сайтов. Если сайт, который предоставляет кнопку, ляжет, то вместе с ним накроется и ваш блог (как минимум — будут тормоза при открытии страниц).
Таким образом, для автономного блога остается два варианта: написать код загрузки кнопок самому или воспользоваться готовым рабочим решением, который делает всю работу за вас и при этом не зависит от сторонних сайтов. Именно такой функционал предоставляет скрипт 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 вашей темы добавляем вот такой блок:
<divclass="social-likes"><divclass="facebook"title="Поделиться ссылкой на Фейсбуке">Facebook</div><divclass="twitter" data-via="koryakokot"title="Поделиться ссылкой в Твиттере">Twitter</div><divclass="vkontakte"title="Поделиться ссылкой во Вконтакте">Вконтакте</div><divclass="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()):