Подписаться на автора

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

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

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

Шаг 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>

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

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

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

Приведенный код добавляет виджет стандартного вида. Ширина блока будет подобрана автоматически исходя из размеров и положения элемента сid="vk_subscribe".

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

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

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

  • •
    element_id (string), обязательный параметр — id элемента, который будет являться контейнером для блока с виджетом. В нашем конструкторе по умолчанию используется значение vk_subscribe.
  • •
    options (object) — опции блока с виджетом. Объект, который может содержать поля:
    • •
      mode (integer), [0, 1] — тип виджета. Возможные значения: 0 — кнопка, 1 — лёгкая кнопка, 2 — ссылка.
    • •
      soft (integer), [0, 1] — отображать ли автора. Возможные значения: 0 — отображать автора и кнопку, 1 — отображать только кнопку.
  • •
    owner_id (integer) — идентификатор пользователя или сообщества. Идентификатор сообщества необходимо указывать отрицательным, например сообщество ВКонтакте API имеет идентификатор -1.

События

При нажатию на кнопку «Подписаться» виджет передаёт событие widgets.subscribed, а когда пользователь отписывается — событие widgets.unsubscribed. Вы можете обрабатывать эти события, используя VK.Observer.

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

HTML
<div id="vk_subscribe"></div> <script type="text/javascript"> window.onload = function () { VK.init({apiId: 111, onlyWidgets: true}); VK.Widgets.Subscribe('vk_subscribe', {mode: 1}, -1); } </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> <!-- Put this script tag to the place, where the Subscribe block will be --> <div id="vk_subscribe"></div> <script type="text/javascript"> VK.Widgets.Subscribe("vk_subscribe", {}, 166562603); </script>