Сегодня я расскажу, как добавить кнопки социальных сетей в свой WordPress блог так, чтобы они не тормозили загрузку и отрисовку страницы. Заранее хочу предупредить, что не являюсь специалистом ни в HTML, ни в JavaScript, ни в Php. Все решения собраны по крупицам на просторах интернета.
Чтобы оказывать меньше влияния на скорость загрузки блога, все скрипты социальных сетей и служебные HTML-элементы вынесены в конец страницы сразу после вызова wp_footer().
Для того, чтобы скрипты не влияли на отображение страницы, вся работа с ними происходит только после полной загрузки блога, для этого используется библиотека jQuery, которая присутствует в каждой поставке WordPress, и событие document.onload.
Таким образом, все скрипты живут в footer.php после вызова wp_footer() в таком обрамлении:
<script type="text/javascript">
jQuery(window).load(function() {
/*
* Сюда мы будем добавлять скрипты социальных сетей
*/
}
</script> |
<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> |
<!-- 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> |
<div id="vk_like_example"></div>
И добавляем в single.php.
Для корректной работы кнопки «Мне нравится», необходимо добавить div элемент в footer.php (перед вызовом jQuery(document).load):
<div id="vk_api_transport"></div> |
<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});
}); |
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});
});
Как вы могли заметить — все данные я взял из предоставленного кода практически без изменений. Все, теперь можно настроить размер кнопки и его отступы в вашем стиле.
Facebook
Получаем код виджета тут:
<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 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 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 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:
После этого смотрим свой 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'); |
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');
С этим кодом я промучился больше всего.
Twitter
За кнопкой идем сюда:
<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> |
<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> |
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
И в footer.php:
jQuery.getScript('//platform.twitter.com/widgets.js'); |
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> |
<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 } ?> |
<?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».
