Размещаем виджет ВК на сайте

Обновлено: 23 декабря, 2021

Чтобы добавить на свой сайт виджет сообщества ВКонтакте, необходимо:

Вставить строку в блок head

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

и прописать в нужном месте на странице непосредственно вывод виджета:

<div id="vk_groups"></div> 
<script type="text/javascript"> 
   VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400"}, 1); 
</script>

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

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

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