Суббота, 21 Июль 2018
 

Вставка виджета VK на свой сайт через Iframe




виджеты ВК на сайтВ разделе "разработчикам" социальной сети 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-тег.

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

Заметьте, здесь адрес ссылки содержит страницу не 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>

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

Виджет плейлиста через iframe в браузере

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

Если есть знатоки  - то делитесь в комментариях! Будет очень полезно узнать и мне, и остальным! 

 

e-max.it: your social media marketing partner

Комментарии к статьям

 

Диски и плитки для стемпинга, недорогие и качественные китайские аналоги