X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-10-30
  • 4755 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

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

Виджет для сайта Вконтакте

Виджет вконтакте

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

Далее нужно перейти на страницу настройки виджета, которая находится по адресу - Виджет для сообществ.

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

Настройки виджета вконтакте

Разберем все пункты по-порядку.

  1. Ссылка на страницу - в это поле вставьте ту ссылку, что скопировали в начале, то есть ссылку на свою группу.
  2. Вид - тут можно выбрать внешний вид виджета.
    1. Участники - в виджете аватары с именами участников, как на картинке в начале.
    2. Новости - в виджете отображаются последние новости, опубликованные в группе.
    3. Только название - вы получите аватар с названием своей группы.
  3. Ширина/Высота - настройка размеров вашего виджета.
  4. Цвета - настройка цветовой гаммы. можете подогнать под стиль сайта.
  5. Код для вставки - конечный код, который сформируется, после того, как Вы настроите все параметры.

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

Универсальный способ

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

<script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>

Вторая часть скрипта, это уже сам виджет, так что его вставляем в нужном месте, там где хотим его вывести на сайте.

<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 20003922);
</script>

Установка виджет группы ВКонтакте на WordPress

Можете воспользоваться первым способом, но если не хотите или еще не можете править файлы темы, то можно это сделать вставкой в место под виджеты WordPress.

Для этого в админпанеле зайдите в Внешний вид - Виджеты.

меню виджеты

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

Вставка скрипта

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

У Вас на сайте установлен виджет ВКонтакте?

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 6, в среднем: 4.2 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078