Комментарии

При помощи виджета ВКонтакте вы можете за 5 минут добавить на ваш сайт возможность комментирования статей и других материалов. Пользователи смогут комментировать ваши материалы без дополнительной регистрации.

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

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

Преимущества виджета ВКонтакте

  1. 1.

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

  2. 2.

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

  3. 3.

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

  4. 4.

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

  5. 5.

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

  6. 6.

    Цитируемость. Каждый комментарий может становиться статусом пользователя ВКонтакте и содержит ссылку на ваш ресурс. Комментарий появляется не только в новостях у друзей пользователя, но и в поиске по статусам ВКонтакте. Благодаря партнерству между ВКонтакте и Яндексом данные статусы в течение месяца будут индексироваться в поиске Яндекса в режиме реального времени, что станет источником дополнительной посещаемости для сайтов, разместивших виджет.

  7. 7.

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

  8. 8.

    Гибкость. Предложив ряд уникальных преимуществ, мы постарались сделать виджет комментариев максимально привлекательным для администраторов и пользователей сайтов. Однако мы понимаем, что российские новостные и развлекательные ресурсы могут нуждаться в дополнительных возможностях настройки виджета. Мы всегда готовы пойти навстречу владельцам сайтов. Для реализации конкретных интересных предложений, пожалуйста, обращайтесь в нашу пресс-службу (email: press@vk.com).

Подключение виджета

Чтобы добавить виджет комментариев ВКонтакте на свой сайт, выполните эти три шага:

Шаг 1. В тег <head> на странице вашего сайта добавьте подключение openapi.js:

HTML
<script src="https://vk.com/js/api/openapi.js?169" type="text/javascript"></script>

Шаг 2. В тело страницы сайта добавьте код для инициализации Open API:

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

Читайте подробнее про инициализацию транспорта.

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

HTML
<div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments('vk_comments'); </script>

Приведённый код добавляет блок комментариев стандартного вида: изначально отображаются 10 последних комментариев. Ширина блока будет подобрана автоматически исходя из положения элемента с id="vk_comments". Идентификатор странице будет задан по её URL.

Если на вашем сайте уже используется Open API, добавить виджет ещё проще. Достаточно просто добавить инициализацию виджета.

Дополнительные настройки

Метод VK.Widgets.Comments принимает три параметра:

  • •
    element_id (string), обязательный параметр — id элемента, который будет являться контейнером для блока комментариев. В нашем конструкторе по умолчанию используется значение vk_comments.
  • •
    options (object) — опции блока с виджетом. Объект, который может содержат поля:
    • •
      width (integer) — ширина блока в пикселах. Минимальное значение: 300. Если параметр не указан, виджет займёт всю доступную ширину.
    • •
      height (integer) — максимальная высота блока в пикселах. Минимальное значение: 500. Если height = 0, то высота не ограничена. Если высота содержимого виджета больше максимально допустимой, появляется внутренняя прокрутка. Значение по умолчанию: 0.
    • •
      limit (integer) — максимальное число комментариев на странице. Минимальное значение: 5, максимальное значение: 100.
    • •
      attach (string) — возможные типы вложений. Определяет состав меню «Прикрепить». Строка, содержащая перечисленные через запятую типы допустимых прикреплений либо false в случае отключения этой функции. Возможные типы: graffiti, photo, audio, video, link. Значение "*" включает все типы. Значение по умолчанию - "*".
    • •
      autoPublish (integer, [0,1]) — автоматическая публикация комментария на странице пользователя. Возможные значения: 0 — отключена, 1 — включена. По умолчанию: 0.
    • •
      norealtime (integer, [0,1]) — обновление ленты комментариев в режиме реального времени. 0 — включено, 1 — отключено. По умолчанию: 0.
    • •
      pageUrl (string) — URL страницы, ссылка на которую будет прикреплена к комментарию при его публикации на странице ВКонтакте.
  • •
    page_id (string) — внутренний идентификатор страницы. Используйте page_id, чтобы разместить два и более независимых виджетов на одной странице. Стоит указывать сразу при установке виджета для упрощения переноса виджета в будущем, при необходимости.

События

При публикации комментария виджет передаёт событие widgets.comments.new_comment, а при удалении — widgets.comments.delete_comment. Вы можете обрабатывать эти события, используя VK.Observer. В функцию-обработчик будут переданы 4 параметра:

  • •
    num (integer) — количество комментариев;
  • •
    last_comment (string) — текст последнего комментария;
  • •
    date (string) — текущая дата в формате ISO 8601 (например, 2004-02-12T15:19:21+00:00);
  • •
    sign (string) — контрольная сумма md5 от конкатенации четырёх строк: api_secret, date, num, last_comment. В языке PHP может быть получена с помощью md5($api_secret.$date.$num.$last_comment). Защищённый секрет api_secret вы можете узнать при редактировании своего приложения в графе «Защищённый ключ».

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

Пример использования

HTML
<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>

Администрирование виджета

Для модерации комментариев в интерфейсе виджета предусмотрена панель администрирования. Доступ к ней имеют все администраторы приложения ВКонтакте, к которому подключен виджет. Перейти к интерфейсу модерации можно по ссылке «администрирование» в шапке виджета на любой странице вашего сайта.

Панель состоит из трех вкладок:

  • •

    Обзор. На этой вкладке отображаются недавние комментарии на вашем сайте, отсортированные в порядке добавления, начиная с более новых. Рядом с каждым комментарием есть ссылка на страницу, к которой он относится. Администратор может удалить любой комментарий. При этом при удалении двух и более комментариев одного автора подряд администратору будет предложено удалить все остальные комментарии этого автора в приложении и добавить его в чёрный список.

    Пример

  • •

    Комментарии. На этой вкладке отображаются комментарии второго уровня.

    Пример

  • •

    Чёрный список. На этой вкладке отображаются пользователи, добавленные в чёрный список. Пользователи, находящиеся в этом списке, не имеют возможности комментировать материалы на вашем сайте через виджет ВКонтакте.

    Пример

Обзор комментариев

Метод VK.Widgets.CommentsBrowse позволяет отображать комментарии со всех страниц вашего сайта единым потоком. У каждого комментария есть ссылка на страницу сайта, где он был опубликован.

Он принимает два параметра:

  • •
    element_id (string), обязательный параметр — id элемента, который будет являться контейнером для блока с обзором комментариев.
  • •
    options (object) — опции блока с виджетом. Объект, который может содержат поля:
    • •
      width (integer) — ширина блока в пикселах. Минимальное значение: 300.
    • •
      height (integer) — максимальная высота блока в пикселах. Минимальное значение: 500. Если height = 0, то высота не ограничена. Если высота содержимого виджета больше максимально допустимой, появляется внутренняя прокрутка. Значение по умолчанию: 0.
    • •
      limit (integer) — максимальное число комментариев на странице. Минимальное значение: 5, максимальное значение: 100.
    • •
      mini (string) — минималистичный вид блока (уменьшенный шрифт, уменьшенные миниатюры прикреплений, уменьшенные профильные изображения для комментариев второго уровня). Возможные значения: 0 — отключён, 1 — включён, "auto"— выбирать автоматически в зависимости от доступной ширины. По умолчанию:"auto".
    • •
      norealtime (integer, [0,1]) — обновление ленты комментариев в режиме реального времени. 0 — включено, 1 — отключено. По умолчанию: 0.

Пример использования

HTML
<div id="vk_comments_browse"></div> <script type="text/javascript"> window.onload = function () { VK.init({apiId: 111, onlyWidgets: true}); VK.Widgets.CommentsBrowse('vk_comments_browse', {width: 500, limit: 5, mini: 0}); } </script>

Код виджета

Чтобы добавить виджет на ваш сайт, просто скопируйте код для вставки на страницу, на которой вы хотите разместить виджет.

Сайт или приложение
Название сайта
Адрес сайта
Основной домен
Тематика сайта
Количество комментариев
Медиа
Ширина
Код виджета для вставки на сайте
HTML
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?168"></script> <script type="text/javascript"> VK.init({ apiId: NaN, onlyWidgets: true }); </script> <!-- 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: 10, attach: "*"}); </script>