Донецкий техникум промышленной автоматики

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

  1. Висновок групи ВК з передплатниками на сайт
  2. Вставка на сайт групи ВК з постами
  3. Вставка на сайт окремого запису зі стіни групи ВК або учасника
  4. Налаштування цілей в Яндекс.Метрика

У розділі "розробникам" соціальної мережі 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>

Приклад (скріншот)

Ну ось, поки все, корисні штуки! Користуйтеся!

Читайте також в моєму блозі:

Налаштування цілей в Яндекс.Метрика

Пост на тему того, як бути, якщо потрібно налаштувати цілі конверсії в Яндекс.Метрика типу Javascript-подія для сайту. Мета подібного роду в метриці означає,

Php?
Php?
Php?
Php?
Php?
Php?
Php?