Как установить на сайт стандартный виджет группы ВКонтакте

Главные вкладки

Аватар пользователя antares1232 antares1232 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>

На обычном сайте все прекрасно работает.
Как лучше сделать то же самое на друпал 7?
Можно создать нужный блок - вставить в него код - выставить full html - куда тогда вставлять <script src="http://vk.com/js/api/openapi.js" type="text/javascript"></script>? Где у друпала head?
Как лучше подключить - чтобы не затормозить сайт?
Или нужно создавать файл js и подключать его через файл .info?

Лучший ответ

Аватар пользователя tlito tlito 27 марта 2016 в 18:21
2

там нет файла - скопируйте в свою тему (к остальным) из ядра:
/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 вы видите слева вашу группу.

код вставил в блок такой:

<script type="text/javascript">
    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>

Комментарии

Аватар пользователя tlito tlito 27 марта 2016 в 16:01
1

опенапи не будет работать, если вы его будете грузить не с сайта вк.
ваш тег Openapi надо вставить в page.tpl.php в область заголовка.
чтобы не тормозить сайт, модифицируйте теги скриптов, сделав их асинхронными.

Аватар пользователя antares1232 antares1232 27 марта 2016 в 16:04

tlito wrote:

можно.

или можно ваш тег 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 -->?>

Не весь, конечно.

Аватар пользователя antares1232 antares1232 27 марта 2016 в 17:14

tlito wrote:

ну да, надо html.tpl.php использовать. там есть тег хеад


У меня тема - из переделанного бартика - там нет файла html.tpl.php

tlito wrote:

чтобы не тормозить сайт, модифицируйте теги скриптов, сделав их асинхронными.

Если можно - где можно узнать, как сделать теги скриптов асинхронными?

Аватар пользователя tlito tlito 27 марта 2016 в 18:21
2

там нет файла - скопируйте в свою тему (к остальным) из ядра:
/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 вы видите слева вашу группу.

код вставил в блок такой:

<script type="text/javascript">
    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>
Аватар пользователя antares1232 antares1232 27 марта 2016 в 18:55

Блин, спасибо! Все работает. Намучался, а проблема была в текстовом редакторе для вставки содержимого. Как только переключил на простой текстовый редактор - все заработало вот на этом самом первоначальном простом коде:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></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>

Последний вопрос - вот этот большой ваш код чем-нибудь лучше или нет?

Аватар пользователя tlito tlito 27 марта 2016 в 19:45
1

с моим асинхронным кодом - pagespeed insights (google) показывает для главной страницы тлито - 89 для компьютеров
с вашим простым кодом - показывает 86 https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=http%3... щас стоит ваш простой код на моем сайте