Установка виджета группы вконтакте. Цветастый.

Хотя статьи с каким-либо кодом никому не интересны, я все же напишу. Просто потому, что сам часто ищу этот материал, и пусть уж лучше он будет у меня на сайте, чем где-то в другом месте. К тому же у меня инфа лучше. ))

Итак как установить виджет группы контакта

1) Во первых предполагается, что группа или паблик уже есть. Если нету, то заходите в контакт, выбирайте «мои группы» и там справа под шапкой будет ссылка «создать сообщество«, разбираетесь с созданием, настройкой, закидываете хотя бы пару постов и в общем вы молодец.

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

2) Ок группа есть, мы задали ей более менее благозвучное имя и теперь идем по ссылке

http://vk.com/developers.php?oid=-1&p=Groups

3) На открывшей странице главное указать ссылку на группу. Если вы еще не меняли адрес группы, или просто не испытываете сложности с тем, чтобы определить ID группы (а он не меняется при смене адреса), то можно вообще сразу перейти к коду, минуя лишнее.

Так вот в форме по ссылке выше будет такой код для виджета

<script type="text/javascript" src="//vk.com/js/api/openapi.js?87"></script>
 
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "200", height: "290"}, ID);
</script>

Где параметр ID это соответственно айди нашей группы.
И кавычки перепишите заново.

4) В общем этот код уже можно засунуть в желаемое место, но мы перейдем к настройкам.

Настройки виджета группы от вконтакта.

Все, что я могу предложить пишется вот тут, через запятую:

VK.Widgets.Group(«vk_groups», { ТУТ }, ID);

Очевидные параметры:
1) mode : что наш виджет будет показывать. Значение 0 = список участников. Значение 1 = только название. Значение 2 = новости группы.
2) width: ширина виджета. Подгоняйте под свой дизайн.
3) height: высота виджета. То же самое.

И не очевидные.
1) color1: цвет фона. Пример использования color1: «dddddd»
2) color2: цвет текста. Имена участников, количество подписчиков.
3) color3: цвет плашки с названием группы.

Приятно знаете ли подогнать виджет группы контакта в цветовую гамму сайта. )

—
Так же по теме статья про установку социальных кнопок.