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

Там же предлагается взять готовый скрипт виджетов для вставки на свой сайт, однако это javascript и он иногда неудобен и может конфликтовать с другими скриптами cms (системой управления сайтом). 

Так, однажды мне понадобилось переработать модуль для Joomla (который в данный момент установлен на этом сайте и отображает значки соцсетей с моими профилями - справа у края экрана).

Этот модуль предлагал решения для зарубежных соцсетей, там не было ВК, зато был Фейсбук, реализация которого как раз основывалась на применении тега Iframe с прописанными внутри параметрами отображения виджета. 

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

Нашлось несколько вариантов.

Вывод группы ВК с подписчиками на сайт

Первый вариант - выводит ваше сообщество с подписчиками. Ширину и высоту можно настроить, цвета кнопок, фона и шрифтов тоже)

 <iframe src="http://vk.com/widget_community.php?gid=12577650&width=280&height=220" width="280" height="220" scrolling="no" frameborder="0"></iframe>

Скриншот: 

 Тот же вариант, но вписанный в любой дизайн сайта с фирменными цветами) Добавлены параметры color1 - цвет фона, color2 - цвет основного текста, color3 - цвет кнопок и ссылок.

 <iframe src="http://vk.com/widget_community.php?gid=12577650&width=280&height=220&color1=fff&color2=e18&color3=e18" width="280" height="220" scrolling="no" frameborder="0"></iframe> 

Скриншот:

Вставка на сайт группы ВК с постами

Следующий вариант - вывод стены сообщества с записями. 

 Изменен параметр цвета текста - color2, добавлен параметр mode=4 (это вывод группы с записями вместо подписчиков).

 <iframe src="http://vk.com/widget_community.php?gid=12577650&width=580&height=420&color1=fff&color2=000&color3=e18&mode=4" width="580" height="420" scrolling="no" frameborder="0"></iframe>

 Скриншот:

Третий вариант - вывод личной страницы (т.к. у меня пока нет сообщества, вывела личный профиль с записями, добавляйтесь - будем друзьями)). Здесь присутствует параметр mode=4, т.е вывод стены заданного профиля с записями на стене, если его убрать - будет вывод профиля с числом подписчиков, как в сообществе.

<iframe src="http://vk.com/widget_community.php?oid=349846021&width=680&height=500&mode=4&color1=fff&color2=000&color3=c05"width="680" height="500" scrolling="no" frameborder="0"></iframe> 

Скриншот:

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

 <iframe src="http://vk.com/widget_community.php?oid=-12577650&width=280&height=220&color1=fff&color2=e18&color3=e18" width="280" height="220" scrolling="no" frameborder="0"></iframe> 

 Чтобы проверить ссылку в действии в своем браузере, скопируйте адрес с параметрами, т.е. все что начинается с http://vk.com/widget..... - если ссылка отображает вам виджет, значит она рабочая, ее можно вставлять в Iframe-тег.

Вставка на сайт отдельной записи со стены группы ВК или участника

Вывод на сайт конкретной записи сообщества или пользователя

Этот код мне долго не давался) Несмотря на то, что вариант вывода через java-script присутствует в разделе разработчиков ВК, но вот именно вывод через iframe (т.е. одной простой строчкой) я сообразила только через полгода после написания всех прочих способов).

Важные параметры - это Id группы или пользователя ( -owner_id - для групп c минусом перед номером,  owner_id - для юзера), Id поста (post_id) и Hash - его можно взять только в конструкторе виджета в разделе разработчиков VK здесь, без которого запись не отобразится.

Обратите внимание что адрес страницы тоже сменился на widget_post.php

А также стоит обратить внимание на номер поста: как правило в ВК вы увидите, что он состоит из двух частей - это id-сообщества и порядковый номер поста через нижнее подчеркивание, например: 12244555666_10). Для данного кода в iframe нужно вставлять только порядковый номер поста, т.е в нашем примере это 10, тогда все заработает.

Ниже код и скриншот:

 
<iframe src="https://vk.com/widget_post.php?owner_id=-150248425&post_id=115&hash=mbr0x2DGDIVoPQhrGXOiqr2A&width=600"
width="500" height="500" scrolling="no" frameborder="0"></iframe>

Вставка на сайт плейлиста из ВК

Вариант вывода плейлиста - просто нашла такое решение, может кому-то пригодится.

Заметьте, здесь адрес ссылки содержит страницу не widget_community.php, a widget_playlist.php

Среди важнейших параметров - параметр hash - его можно взять только в конструкторе виджетов в разделе разработчиков vk.com, и расположение его должно быть сразу после ИД группы и ИД поста.

<iframe src="https://vk.com/widget_playlist.php?app=0&oid=-12577650&pid=13635948&hash=ab9a3650c676ca3f69&startWidth=80%&width=500" width="500" height="500" scrolling="no" frameborder="0"></iframe>

Пример (скриншот)

Ну вот, пока все, полезные штуки! Пользуйтесь!

• < Назад
• Вперёд >