Просмотров: 8 115

Как на одной странице разместить несколько виджетов вконтакте.

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

Например, виджет нужно отобразить в боковой колонке и сразу под текстом заметки.

Если использовать один и тот же код два раза, например этот:

1 код для вставки:

<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"}, 66170145);
</script>

2 код для вставки в другом месте (такой же):

<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"}, 66170145);
</script>

Виджет отобразиться с большими искажениями.

30-03-2014 17-54-40

Как решить эту проблему?

Решение довольно простое, нужно всего-лишь изменить параметр id у второго кода для вставки.

Выглядеть это будет следующим образом:

1 код для вставки:

<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"}, 66170145);
</script>

2 код для вставки в другом месте (такой же):

<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"}, 66170145);
</script>

После этого проверяем, все отображается как нужно.

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

Подробнее здесь.

Научитесь делать это самостоятельно и НЕ платите сторонним разработчикам.