Как установить на сайт виджет для комментариев Вконтакте

13.08.2014

Для добавления на сайт возможности комментирования с помощью аккаунта Вконтакте, нужно создать виджет на этой странице, обязательно нужно быть залогиненым под аккаунтом того человека, который в дальнейшем будет вести модерацию этих комментариев. То есть, если разработчик делает сайт для третьего лица, то при регистрации виджета нужно использовать аккаунт заказчика.

Итак мы на странице http://vk.com/dev/Comments. Настроек очень мало, что сильно облегчает работу. Нам нужно ввести Название сайта, Адрес сайта, Основной домен сайта (сформируется из Адреса сайта), выбрать Тематику сайта, отметить необходимое Количество комментариев для вывода на странице (5 или 10 вполне достаточно), выбрать необходимые Медиа-возможности и указать ширину виджета, которая зависит от макета, в который виджет будет устанавливаться.

Настройка виджета для комментариев Вконтакте
По умолчанию отмечен чекбокс Медиа — Включить расширенные комментарии, это позволяет комментаторам использовать Граффити, Фотографии, Видео, Аудио и Ссылки в комментариях. Если же нужно отключить какие-то параметры медиа, то при нажатии на Подробнее, Вы получите полный список используемых медиа настроек. В дальнейшем, при настройке виджета на сайте можно подключать и отключать нужные функции медиа в коде, используя вместо attach: "*", например, код в котором перечислены необходимые параметры для медиа attach: "graffiti,photo,audio,link" (отключено Видео).

Настройка медиа для виджета комментариев Вконтакте

Но это я забежал чуть вперед.

После настройки всех необходимых параметров жмем «Сохранить«. После сохранения виджета ниже в окне вы получаете готовый код, который выглядит примерно так:

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

Здесь все просто, код который отмечен комментарием Put this script tag to theof your page добавляем в код своего сайта перед закрывающимся тегом </head>, для сайтов на CMS WordPress этот код нужно добавить в файл header.php.

А код, который отмечен комментарием Put this div tag to the place, where the Comments block will be нужно добавить в то место своего сайта, в котором виджет с комментариями должен выводиться, для сайтов на CMS WordPress этот код чаще всего добавляется в файл single.php.

Подводим итог

Код

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>

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

добавлен перед </head>.

А код

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 5, width: "550", attach: "graffiti,photo,audio,link"});
</script>

добавлен в место для вывода виджета комментариев.

После всех манипуляций получаем на сайте красиво оформленный виджет комментариев для ВКонтакте:
Пример работы виджета для комментариев ВКонтакте на рабочем сайте

Важным моментом является наличие кнопки «администрирование», которая доступна только администратору и позволяет модерировать комментарии.

Рабочий пример доступен на сайте http://mariakuhtina.com/

Полезная инфа:

Оставить комментарий