Виджет vkontakte не показывает комментарии

Подробности
Категория: Информационные технологии
Просмотров: 24832

Создатели социальной сети ВКонтакте с целью популяризации своего сервиса реализовали во-первых, возможность комментирования различных материалов на сайте с использованием их сети, а во-вторых поддержку отображения упомянутых комментариев на любом сайте. И, к слову сказать, каждый современный веб-разработчик не может не осозновать важность интеграции своего сайта с социальными сетями, даже если не "сидит" в них. Хотя мне, честно говоря, непонятно, как он будет связывать сайт и социальные сети, не регистрируясь в них... но я отвлекся от темы. Итак, довольно распространённая ситуация: Вы сперва реализовали комментирование новостей сайта через VKontakte, а затем уставновили виджет комментариев ВКонтакте по инструкции, а он не работает... то есть Вы точно знаете что комментарии есть, но в виджете пусто!

Итак, о чем говорит инструкция с официального сайта:

В тег на странице Вашего добавляете следующий код:


<script src="http://userapi.com/js/api/openapi.js" type="text/javascript" charset="windows-1251"></script>


2. В тело страницы сайта встраивается следующий код:

<script type="text/javascript">
  VK.init({
    apiId: ВАШ_API_ID,
    onlyWidgets: true
  });
</script>

 

3. Также в тело страницы необходимо добавить элемент DIV, в котором будут отображаться комментарии, задать ему уникальный id и добавить в него код инициализации виджета. Например:  

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments('vk_comments');
</script>  
Далее на странице с инструкцией приводятся дополнительные настройки для инициализации виджета. И самое главное! Ниже приведен пример использования (альтернативная вставка кода):
 
<div id="vk_comments"></div>
<script type="text/javascript">
window.onload = function () {
VK.init({apiId: 111, onlyWidgets: true});
VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, 321);
}
</script>  
Вот в этом-то примере и кроется главная ошибка! Да с точки зрения написания кода, он верен. Но одного разработчики виджета не учли - огромной армии программистов, которые тоже любят вставлять всякие манипуляции с данными страницы после её загрузки браузером.
 
 

Так вот  с одной такой проблемой я уже столкнулся при использовании модуля Docman jDMTree в статье Исправляем ошибку в модуле Docman jDMTree, речь в ней шла о том, что при наличии модуля на странице он "единовластно" перехватывает  события, которые могли бы произойти после загрузки страницы, т.е. событие window.onload и заменяет их своим.

 

Здесь собственно говоря та же ситуация. Во-первых виджет VK перехватывает событие onload и если этот скрипт был загружен последним, то он "никому его не отдаст", а в некоторых случаях ему "тупо" может "не отдать это событие" другой обработчик, который загрузится после него.

 

Во втором случае мы будем наблюдать картину пустых комментариев в том месте, где они должны были быть.

 

Чтобы этого избежать, последний код предлагается заменить на другой:

<script type="text/javascript">
   function VKInit()  {
       VK.init({apiId: 111, onlyWidgets: true});
       VK.Widgets.Comments('vk_comments', {width: 500, limit: 15}, 321);
       }
    if (window.addEventListener) {
        window.addEventListener("load",VKInit,false);
     } else if (window.attachEvent) {
         window.attachEvent("onload",VKInit);
     } else { window.onload = function() {
             VKInit();
            }
     }  
</script>

На одном из своих сайтов под Jooomla 1.7 я использую модуль последних комментариев от команды JoomLine, так вот в нем тоже "спрятан" код аналогичный описанному выше. В файле mod_jlvk_lastcommnets.php мы можем наблюдать такую картину:

<script type="text/javascript">
window.onload = function () {
 VK.init({apiId: <?=$api_id ?>, onlyWidgets: true});
 VK.Widgets.CommentsBrowse('mod_jlvkcomments', {width: <?=$width?>, limit: <?=$limit?>, mini: 0, height: <?=$height?>});
}
</script>

Так вот на одном сайте этот модуль отказался что-либо показывать... в комментариях было пусто. И только когда я заменил этот код на другой:

<script type="text/javascript">
function VKInit() {
 VK.init({apiId: <?=$api_id ?>, onlyWidgets: true});
 VK.Widgets.CommentsBrowse('mod_jlvkcomments', {width: <?=$width?>, limit: <?=$limit?>, mini: 0, height: <?=$height?>});
}
if (window.addEventListener) {
window.addEventListener("load",VKInit,false);
} else if (window.attachEvent) {
window.attachEvent("onload",VKInit);
} else { window.onload = function() {
VKInit();
}
}
</script>

Всё заработало.

Удачных Вам проектов!

Comments   

0 # RE: Виджет vkontakte не показывает комментарии — Vitalik-86 2012-02-12 20:53
Интересная информация о виджет
я также использую модуль последних комментариев от команды JoomLine)

______________________________________
Время - самое драгоценное из всех сокровищ.
Reply | Reply with quote | Quote | Report to administrator
0 # RE: Виджет vkontakte не показывает комментарии — Ecolora 2012-02-13 07:00
Проверить правоту моих слов проще всего на примере. Создайте файл под называнием 1.html и вставьте туда следующий код (уберите пробелы до > и после < ):


< script >
window.onload = function() {alert(1)}
< /script >
< script >
window.onload = function() {alert(2)}
< /script >

Сохраните файл и запустите его (опыт производился в Firefox 10.0.1).

Первое событие не выполнилось. Его заменило второе.
Reply | Reply with quote | Quote | Report to administrator

Add comment

Security code
Refresh