Сообщества

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

В виджете могут отображаться фотографии друзей пользователя и других участников сообщества. По ссылке «Подписаны» доступна демографическая статистика по участникам.

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

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

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

Шаг 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_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400"}, 1); </script>

Этот код добавляет блок сообщества стандартного вида: изначально отображаются 12 пользователей. Количество пользователей будет выбрано автоматически исходя из параметров width и height.

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

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

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

  • •
    element_id (string), обязательный параметр — id элемента, который будет являться контейнером для блока сообщества. В нашем конструкторе по умолчанию используется значение vk_groups.
  • •
    options (object) — опции блока с виджетом. Объект, который может содержать поля:
    • •
      width — ширина блока в пикселах. Минимальное значение: 120. При значении auto подстраивается под ширину родительского блока.
    • •
      height — высота блока в пикселах. Минимальное значение: 200. Максимальное значение: 1200. Обратите внимание, для mode = 1 или 3 параметр недоступен, высота определяется автоматически в зависимости от размера родительского блока.
    • •
      mode — режим отображения. Возможные значения: 1 — отображать только название сообщества; 3 — отображать участников сообщества; 4 — отображать стену сообщества.
    • •
      no_cover — отображение обложки сообщества. 1 — не отображать, 0 — отображать (по умолчанию).
    • •
      wide — расширенный режим. Возможные значения: 0 — отключён, 1 — включен. Если mode = 2, в этом режиме добавляется кнопка «Мне нравится» и фотография сообщества.
    • •
      color1 — цвет фона виджета в формате RRGGBB.
    • •
      color2 — цвет текста в формате RRGGBB.
    • •
      color3 — цвет кнопок в формате RRGGBB.
  • •
    group_id — идентификатор сообщества. Указывается без знака - (минус).

События

При клике на кнопку Подписаться виджет передаёт событие widgets.groups.joined. Если участник покидает сообщество с помощью виджета, передаётся событие widgets.groups.leaved. Вы можете обрабатывать эти события, используя Open API.

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

HTML
<div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 0, width: "400", height: "400"}, 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 div tag to the place, where the Group block will be --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 4, wide: 1, height: 400, color1: "FFFFFF", color2: "000000", color3: "5181B8"}, 166562603); </script>