Сегодня я расскажу, как добавить кнопки социальных сетей в свой WordPress блог так, чтобы они не тормозили загрузку и отрисовку страницы. Заранее хочу предупредить, что не являюсь специалистом ни в HTML, ни в JavaScript, ни в Php. Все решения собраны по крупицам на просторах интернета.
Чтобы оказывать меньше влияния на скорость загрузки блога, все скрипты социальных сетей и служебные HTML-элементы вынесены в конец страницы сразу после вызова wp_footer().
Для того, чтобы скрипты не влияли на отображение страницы, вся работа с ними происходит только после полной загрузки блога, для этого используется библиотека jQuery, которая присутствует в каждой поставке WordPress, и событие document.onload.
Таким образом, все скрипты живут в footer.php после вызова wp_footer() в таком обрамлении:
<script type="text/javascript"> jQuery(window).load(function() { /* * Сюда мы будем добавлять скрипты социальных сетей */ } </script> |
Все социальные кнопки у меня используются только в постах, поэтому их HTML-элементы добавлены в single.php сразу после вызова функции the_content().
ВКонтакте
Идем на страницу виджета, где выбираем внешний вид кнопки. У меня получился вот такой код:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script> <script type="text/javascript"> VK.init({apiId: 3904727, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Like block will be --> <div id="vk_like_example"></div> <script type="text/javascript"> VK.Widgets.Like("vk_like_example", {type: "button", height: 20}); </script> |
Забираем отсюда div, который выглядит так:
<div id="vk_like_example"></div> |
И добавляем в single.php.
Для корректной работы кнопки «Мне нравится», необходимо добавить div элемент в footer.php (перед вызовом jQuery(document).load):
<div id="vk_api_transport"></div> |
Код загрузки кнопки в footer.php:
jQuery.getScript( '//vk.com/js/api/openapi.js?115', function() { VK.init({apiId: 3904727, onlyWidgets: true}); VK.Widgets.Like("vk_like_example", {type: "button", height: 20}); }); |
Как вы могли заметить — все данные я взял из предоставленного кода практически без изменений. Все, теперь можно настроить размер кнопки и его отступы в вашем стиле.
Получаем код виджета тут:
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=545514278883012&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> |
И вот такой div:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> |
Добавляем div в single.php:
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> |
Затем специальный div в footer.php (перед вызовом jQuery(document).load) для правильной работы кнопки от Facebook:
<div id="fb-root"></div> |
После этого смотрим свой appId и добавляем следующий код в footer.php:
jQuery.ajaxSetup({ cache: true }); window.fbAsyncInit = function() { FB.init({ appId : '545514278883012', status : true, cookie : true, oauth : true, xfbml : true, }); }; jQuery.getScript('//connect.facebook.net/ru_RU/all.js'); |
С этим кодом я промучился больше всего.
За кнопкой идем сюда:
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> |
Забираем отсюда к себе в single.php:
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> |
И в footer.php:
jQuery.getScript('//platform.twitter.com/widgets.js'); |
Самый элементарный код. Один минус — если сайт твиттера недоступен, отображает уродскую ссылку.
Заключение
Все вышеописанные кнопки в single.php:
<div id="like_buttons"> <div id="vk_like_example"></div> <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div> <div id="tweet"> <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> </div> </div> |
Загрузка всех плагинов в footer.php:
<?php if(is_single()) { ?>
<div id="fb-root"></div>
<div id="vk_api_transport"></div>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery.ajaxSetup({ cache: true });
window.fbAsyncInit = function() {
FB.init({
appId : '545514278883012',
status : true,
cookie : true,
oauth : true,
xfbml : true,
});
};
jQuery.getScript('//connect.facebook.net/ru_RU/all.js');
jQuery.getScript('//platform.twitter.com/widgets.js');
jQuery.getScript(
'//vk.com/js/api/openapi.js',
function() {
VK.init({apiId: 3904727, onlyWidgets: true});
VK.Widgets.Like("vk_like_example", {type: "button", verb: 1, height: 20, width: 165});
});
window.___gcfg = {lang: 'ru'};
});
</script><?php } ?> |
Весь код, приведенный выше добавляет кнопки только в блого-записи. Возможно, вам понадобятся кнопки на всех страницах, для этого нужно исключить проверку is_single() и добавлять HTML-элементы социальных кнопок не только лишь в single.php.
И еще один момент: если вы скопируете код отсюда один в один (без замены appId в Facebook и ВКонтакте), то все лайки будут сыпаться в мою копилку. Мне-то не жалко, но вам от этого никакого толку. (:
P.S. Если вам пригодилась информация из данного поста — пожалуйста, нажмите одну из социальных кнопок ниже.
UPD: Пришел к выводу, что загрузка кода с сайтов социальных сетей неоптимальна. На эту тему мой новый пост: «Добавляем Social Likes на сайт с WordPress».