Виджет комментариев Вконтакте

У социальной сети Вконтакте за последние несколько месяцев появилось 5 виджетов для сайтов. Все виджеты легко и просто можно установить. Я расскажу как использовать виджеты у Вас на сайте или блоге. Для некоторых виджетов нам потребуется специальный индификатор API ID. Для сайта достаточно одного индификатора, т.е у Вас есть ID привязанный к сайту, который Вы сможете использовать для всех виджетов.

Получение Open API ID
В рамках подключения к Open API создается специальное приложение, которое позволяет использовать на Вашем сайте все текущие методы ВКонтакте API. Для подключения Вашего сайта к платформе Open API, необходимо выполнить следующие действия:

• Необходимо создать новое приложение.
• Настроить приложения заполнить необходимые поля Open API: Open API URL – адрес сайта, к которому Вы планируте подключить Open API (например http://durov.at/) и Базовый домен – базовый домен Вашего сайта (например, durov.at) Примечание: Если вы не заполните в настройках приложения пункт "Open API", то у вас может возникнуть ошибка "No application domain specified" при отображении комментариев. Будьте внимательны, при установке я не заполнил поля и пришлось долго выяснять, что к чему.

Виджет для комментариев - Каждый комментарий, оставленный на Вашем сайте, автоматически транслируется на страницу комментатора ВКонтакте со ссылкой на исходную статью Вашего сайта. Со страницы автора комментария и из раздела Новости о статье узнают все друзья автора, которые могут присоединиться к дискуссии.

Для виджета требуется специальный API ID. Начнём с его получения и регистрации вашего сайта в приложениях vkontakte.
Как получить API ID ?
1. Нужно зайти на страницу разработчика
2. Нажать на кнопку "Подключить сайт"
3. Заполнить необходимые данные и пройти короткую регистрацию


После прохождения регистрации у вас появится приложение, это ваша "админская", гед вы сможете настроить необходимые данные и получить ID приложения:*******, это ID можно использовать во всех виджетах вконтакте для вашего сайта, где в настройках потребуется его указать.


Всё, что я описал выше можно использовать для любых сайтов и блогов. Сейчас начнётся часть именно установки коментариев для Blogger.

1 Шаг

1. Заходим в панель управления сайтом.

2. Проделываем путь Дизайн » Изменить HTML

3. Ставим галочку на "Расширить шаблоны виджета"

Перед тегом </head> на странице Вашего сайта необходимо добавить следующий код: 

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

и 

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

Обратите внимание на свойство API_ID - его нужно заменить на ваш API_ID, который вы получили после регистрации приложения.


2  Шаг
Теперь необходимо найти определенный код и заменить его на код, полученный виджетом коментариев вконтакте. Есть 2 способа искать по коду, это глазами) и встроенным поиском в браузер. Я использую Google Chrome и поиск осуществляется с помощью комбинации клавиш Ctrl+F. В окно поиска я ввожу comment-form и мне высвечивается нужный мне код, а именно:

<b:includable id='comment-form' var='post'>

<div class='comment-form'>

<a name='comment-form'/>

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

<p><data:blogCommentMessage/></p>

<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

<data:post.friendConnectJs/>

<data:post.cmtfpIframe/>

<b:if cond='data:showCmtPopup'>

<div id='comment-popup' style='width:100px;height:20px;'/>

</b:if>

<script type='text/javascript'>

      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);

</script>

</div>

</b:includable>

5. Что мы делаем с этим кодом? Мы заменяем заменяем, всё что в DIV на:

<div id="vk_comments">

<script type="text/javascript">

 VK.Widgets.Comments('vk_comments');

</script>

</div>

6. В итоге мы должны придти к виду:

<div class='comment-form'>

<div id="vk_comments"></div>

<script type="text/javascript">

 VK.Widgets.Comments('vk_comments');

</script>

</div>

7. Жмём "Сохранить шаблон". Теперь коментарии "Вконтакте" используются у вас в блоге.

На что стоит обратить внимание при установке комментариев?

• Для установки обязателен Open API ID, его можно получить зарегистрировав приложение/сайт.
• Эта инструкция подходит для установки комментариев для системы www.blogger.com.
• Все пункты обязательны, перед изменением шаблона рекомендую зарезервировать шаблон(Панель управления -> Дизайн -> Изменить html -> Загрузить весь шаблон).
• При возникновении ошибки на странице "No application domain specified" нужно заполнить обязательные поля в настройках вашего зарегестрированного приложения в разделе - Open API.
• В шаге 1 код нужно установить строго перед тегом </head>
• По умолчанию в комментарии имеют ширину "width: 496px", чтобы не мучится и не подгонять комментарии под размер блога/страницы рекомендую установить значение width: "auto"

<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "auto", attach: "*"});
</script>

UPD: После проделанных операции коментарии Вконтакте появятся у вас в блоге. Мой блог посещается в основном из-за этой статьи, много просмотров страниц. Если  у читателей возникнут трудности в установке, то я обязательно помогу разобраться. Пишите в коменатриях, я обязательно отвечу :)