Два виджета ВКонтакте на одной странице

В некоторых случаях web-мастеру может понадобиться установить два виджета ВКонтакте на одной странице. Такая необходимость может возникнуть, например, в случае если вы хотите рекламировать на своем сайте сразу два (или больше) пабликов или даже разместить один и тот же виджет в нескольких местах страницы.

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

<script type="text/javascript" src="//vk.com/js/api/openapi.js?110"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, width: "300", height: "250"}, XXXXXX);
</script>

где XXXXXX это ID группы.

Если вы разместите на странице два виджета разных групп, например, так:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?110"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, width: "300", height: "250"}, XXXXXX);
</script>

<script type="text/javascript" src="//vk.com/js/api/openapi.js?110"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, width: "300", height: "250"}, YYYYYY);
</script>

то заметите, что отображаться будет только один виджет - тот, что находится ниже в HTML-коде страницы.

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

<script type="text/javascript" src="//vk.com/js/api/openapi.js?110"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 2, width: "300", height: "250"}, XXXXXX);
</script>

А второй виджет для другого паблика следует вставлять так:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?110"></script>
<!-- VK Widget -->
<div id="vk_groups2"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups2", {mode: 2, width: "300", height: "250"}, YYYYYYY);
</script>

То есть вам нужно только изменить ID блочного элемента <div> vk_groups на vk_groups2 (или любое другое имя), сделав его уникальным.

Меню сайта

Создание и продвижение сайтов
• Два виджета ВКонтакте на одной странице

Два виджета ВКонтакте на одной странице