27 марта 2016 в 15:44
Пересмотрел все записи по данной теме, все для меня недосказанные.
Есть стандартный код виджета:
В head сайта вставляем -
<script src="http://vk.com/js/api/openapi.js" type="text/javascript"></script>
В нужный блок вставляем -
<!-- VK Widget -->
<div id="vk">
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 52969228);
</script>
</div>
<div id="vk">
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 52969228);
</script>
</div>
На обычном сайте все прекрасно работает.
Как лучше сделать то же самое на друпал 7?
Можно создать нужный блок - вставить в него код - выставить full html - куда тогда вставлять <script src="http://vk.com/js/api/openapi.js" type="text/javascript"></script>? Где у друпала head?
Как лучше подключить - чтобы не затормозить сайт?
Или нужно создавать файл js и подключать его через файл .info?
Комментарии
опенапи не будет работать, если вы его будете грузить не с сайта вк.
ваш тег Openapi надо вставить в page.tpl.php в область заголовка.
чтобы не тормозить сайт, модифицируйте теги скриптов, сделав их асинхронными.
Куда именно? Вот код page.tpl.php:
<?php<div id="page-wrapper"><div id="page"><div id="header" class="<?php print $secondary_menu ? 'with-secondary-menu': 'without-secondary-menu'; ?>"><div class="section clearfix">
<?php print simple_commerce_cart(); ?> <!-- добавил вывод упрощенной корзины -->
<div id="cart-image">
<a id="ct-img" rel="cart" title="Корзина" href="/cart">
<img alt="Корзина" src="/sites/all/themes/mytheme/images/cart.png">
</a>
</div>
<?php if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
</a>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="element-invisible"'; } ?>>
<div id="site-name-image">
<a id="site-name-img" rel="home" title="Главная" href="/">
<img alt="Главная" src="/sites/default/files/site-name-img.png">
</a>
</div>
<?php if ($site_name): ?>
<?php if ($title): ?>
<div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
<strong>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
</strong>
</div>
<?php else: /* Use h1 when the content title is empty */ ?>
<h1 id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
<a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="element-invisible"'; } ?>>
<?php print $site_slogan; ?>
</div>
<?php endif; ?>
</div> <!-- /#name-and-slogan -->
<?php endif; ?>
<?php print render($page['header']); ?>
<?php if ($main_menu): ?>
<div id="main-menu" class="navigation">
<?php print theme('links__system_main_menu', array(
'links' => $main_menu,
'attributes' => array(
'id' => 'main-menu-links',
'class' => array('links', 'clearfix'),
),
'heading' => array(
'text' => t('Main menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</div> <!-- /#main-menu -->
<?php endif; ?>
<?php if ($secondary_menu): ?>
<div id="secondary-menu" class="navigation">
<?php print theme('links__system_secondary_menu', array(
'links' => $secondary_menu,
'attributes' => array(
'id' => 'secondary-menu-links',
'class' => array('links', 'inline', 'clearfix'),
),
'heading' => array(
'text' => t('Secondary menu'),
'level' => 'h2',
'class' => array('element-invisible'),
),
)); ?>
</div> <!-- /#secondary-menu -->
<?php endif; ?>
</div></div> <!-- /.section, /#header -->?>
Не весь, конечно.
ну да, надо html.tpl.php использовать. там есть тег хеад
У меня тема - из переделанного бартика - там нет файла html.tpl.php
Если можно - где можно узнать, как сделать теги скриптов асинхронными?
там нет файла - скопируйте в свою тему (к остальным) из ядра:
/modules/system/html.tpl.php
асинхронным оба скрипта станут как тут написано:
http://simonenko.su/12874310913/asynchronous-code-for-social-buttons
или тут http://new.xpro.su/php/async_widgets-1
второй сайт приводит ссылку на рабочий пример кода на сайте http://sociomodel.ru/
если вы просмотрите код страницы, то увидите, что инициализацию не обяязательно размещать в заголовок.
достаточно оба скрипта вставить в ваш блок.
я так и сделал на tlito.ru вы видите слева вашу группу.
код вставил в блок такой:
var TextCMS_Social_VK_caller = function() {
VK.init({apiId: 2466535, onlyWidgets: true});
for (var i=0; i<3; i++) { window.TextCMS_Social_VK[i](); }
}
var TextCMS_Social_VK_loader = function() {
var oHead = document.getElementsByTagName("head")[0];
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="http://userapi.com/js/api/openapi.js?20";
oHead.appendChild(oScript);
oScript.onload=TextCMS_Social_VK_caller;
};
if ( document.addEventListener ) {
document.addEventListener("DOMContentLoaded", function(){
document.removeEventListener("DOMContentLoaded", arguments.callee, false);
TextCMS_Social_VK_loader();
}, false );
} else if ( document.attachEvent ) {
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
TextCMS_Social_VK_loader();
}
});
}
</script>
<div id="vk_groups"></div>
<script type="text/javascript">
if ( typeof window.TextCMS_Social_VK=="undefined" ) window.TextCMS_Social_VK = new Array();
window.TextCMS_Social_VK.push(function() {
VK.Widgets.Group("vk_groups", {mode: 0, width: "206", height: "290"}, 52969228);
});
</script>
Блин, спасибо! Все работает. Намучался, а проблема была в текстовом редакторе для вставки содержимого. Как только переключил на простой текстовый редактор - все заработало вот на этом самом первоначальном простом коде:
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 52969228);
</script>
Последний вопрос - вот этот большой ваш код чем-нибудь лучше или нет?
Для Drupal 8 также рабочее решение. Другие способы, в том числе из документации, для меня не сработали (https://drupal.ru/node/143584)
Но в консоли выпадает ошибка "Uncaught TypeError: window.TextCMS_Social_VK[i] is not a function
at HTMLScriptElement.TextCMS_Social_VK_caller"
с моим асинхронным кодом - pagespeed insights (google) показывает для главной страницы тлито - 89 для компьютеров
с вашим простым кодом - показывает 86 https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=http%3... щас стоит ваш простой код на моем сайте
Еще раз спасибо огромное!!! Нашел для себя еще один полезный сайт - http://tlito.ru/