Главная
Web-дизайн Wordpress
Как установить виджет группы ВКонтакте на сайт

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

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

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

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

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

Чтобы приступить к установке виджета, сначала зайдите в свою группу и скопируйте адрес группы в адресной строке. Например - 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
(4 голоса, в среднем: 4 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий