Речь в статье пойдет о сайтах на Друпал 7. Но будет полезна и для тех, кто использует стандартные скрипты от социальных сетей на своих проектах.
Я встречал много вариантов подключения виджетов. И самые популярные из них - не лучшие по производительности:
- в html.tpl.php
- в page.tpl.php
- в node.tpl.php
- создается отдельный блок в который помещается код от социальной сети (этот метод чаще всего идет в паре с применением текстового формата php!)
На просторах интернета проблема асинхронной загрузки таких скриптов обсуждалась не раз. Дело в том, что сами по себе практически все предоставляемые социальными сетями скрипты виджетов уже являются асинхронными и якобы не должны негативно влиять на скорость отдачи контента посетителям сайта, но это не совсем так. Некоторые из скриптов подгружаются одновременно с загрузкой страницы, тем самым напрямую влияя на доступность содержимого страницы.
В качестве примера для статьи, попробуем подключить лайки от социальных сетей на наш сайт (Вконтакте, Facebook, Twitter и Google). Причем, решим две возможные проблемы:
- Будем загружать скрипты уже после того, как основная DOM-модель сформирована и текстовая часть сайта отобразилась у пользователя
- Будем контролировать, на каких страницах необходима загрузка этих скриптов (не на всех разделах сайта кнопки актуальны, так зачем тогда загружать лишние скрипты?)
Файл social-button-async.js
(function ($) {
// Инициализация ВКонтакте после асинхронной загрузки
window.vkAsyncInit = function () {
VK.init({apiId: 'APP_ID', onlyWidgets: true});
// Теперь перечисляем нужные виджеты ВКонтакте
// VK.Widgets.Group('vk_groups', {mode: 0, wide: 1, width: '310', height: '320'}, DIGITS);
VK.Widgets.Like("vk_like", {redesign: 1, type: "mini", height: 20});
};
//Инициализация Facebook после асинхронной загрузки
window.fbAsyncInit = function () {
//FB.init({ appId : 'YOUR_ID', status : true, cookie : true, xfbml : true, oauth: true });
};
// Сама функция асинхронной загрузки
(function (a, c, f) {
function g() {
var d, a = c.getElementsByTagName(f)[0], b = function (b, e) {
c.getElementById(e) || (d = c.createElement(f), d.src = b, d.async = !0, e && (d.id = e), a.parentNode.insertBefore(d, a))
};
b("//vk.com/js/api/openapi.js?127");
b("//vk.com/js/api/share.js?127");
b("https://platform.twitter.com/widgets.js");
b("//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.7");
b("https://apis.google.com/js/platform.js")
}
a.addEventListener ? a.addEventListener("load", g, !1) : a.attachEvent && a.attachEvent("onload", g)
})(window, document, "script");
})(jQuery);
Помещаем данный файл в папку js в вашей теме. Теперь подключим скрипт только на страницах материала 'blog'. Для этого в файле template.php используем hook_preprocess_page:
function THEMENAME_preprocess_page(&$vars) {
if (isset($vars['node'])) {
$node = $vars['node'];
if (in_array($node->type, array('blog'))) {
//Поключаем кнопки социальных сетей
drupal_add_js(path_to_theme() . '/js/social-button-async.js', 'file', 'footer');
}
}
}
Все приготовления закончены. Теперь осталось вывести в нужном месте страницы html для будущих кнопок. Из доступных способов можно использовать файл node--blog.tpl.php. В нужном месте в файле добавим:
Результат:
