Получайте секретные материалы проекта на свой E-Mail:

Виджет Вконтакте для сайта или блога: как установить?

В последнее время люди стали чаще пользоваться социальными сетями: Вконтакте, Одноклассники, Твиттер — их количество можно считать десятками. В связи с этим, блогеры стали размещать там анонсы статей, создавать различные страницы и группы. А разработчики социальных сетей решили упростить жизнь блогерам, расширив их возможности. Сегодня мы рассмотрим, как за считанные секунды создать и добавить виджет на сайт из соц. сети «Вконтакте».

Что же нам для этого понадобится? Прямые руки и ничего более. Если всё это у вас есть, то мы можем начинать.

Добавление виджета Вконтакте на сайт

1. Переходим на сайт социальной сети Вконтакте и нажимаем кнопку «Разработчикам». (Можете сразу перейти по этой ссылке). Главная страница Вконтакте 2. В открывшемся окне нажимаем на «Авторизация и виджеты для сайта». Разработка приложений 3. Далее вам будут предложены 9 вариантов виджетов: «Комментарии», «Запись на стене», «Сообщества», «Мне нравится», «Опросы», «Авторизация», «Публикация ссылок», «Подписаться на автора». Виджеты Вконтакте для сайта Далее рассмотрим добавление каждого виджета по отдельности.

P.S. В виджетах может использоваться php-код, поэтому прочитайте статью: Как добавить php-код в виджет WordPress.

Виджет «Комментарии»

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

Установка виджета.
1. Эту часть кода вставляем в тег<head>:

1
2
3
<!-- Put this script tag to the <head> of your page --><script src="//vk.com/js/api/openapi.js?116" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
VK.init ({apiId: 4710408, onlyWidgets: true});
// ]]></script>

2. Эту в то место, где вы хотите видеть виджет:

1
2
3
<!-- Put this div tag to the place, where the Comments block will be --><script type="text/javascript">// <![CDATA[
VK.Widgets.Comments («vk_comments», {limit: 10, width: «665», attach: «*»});
// ]]></script>

Повторюсь, тут ничего сложного нет. Ваша задача — заполнить поля по примеру выше и скопировать сгенерированный системой код в нужное Вам место на блоге. И если вы всё сделали правильно, должен получиться полноценный блок комментирования, в котором пишут гарантированно реальные живые люди.

Виджет «Запись на стене»

Виджет позволяет достаточно легко добавить любую запись со стены страницы или группы. Для этого достаточно просто открыть любую запись (я возьму анонс последней статьи) и скопировать ссылку. Запись на стене Вконтакте Вставляем её в поле «Ссылка на запись», подбираем нужный вам размер и копируем код для вставки. После чего вставляем его в нужное нам место, всё просто, не так ли? Код записи на стене После проделанных вами действий, на сайте или блоге будет выводиться выбранная запись. Кстати, в верхнем правом углу будет выводиться значок подписки на страницу или группу Вконтакте, что будет полезно в плане набора подписчиков.

Виджет «Сообщество»

Данный виджет просто шикарный, отдельное спасибо за это разработчикам Вконтакте. Он позволяет связать сайт с группой Вконтакте. Выглядит это так: Участники сообщества   Можно настроить и выводить по другому. Для того, чтобы выбрать, что будет выводиться ( участники, новости, или только название),  достаточно просто перемещать точку: Код для вывода виджета Вконтакте

Участники Записи Название
Участники сообщества Записи сообщества Название сообщества

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

Добавление виджета Вконтакте «Мне нравится»

Кнопка «Мне нравится» позволяет пользователям лайкать статьи после прочтения. Виджет "Мне нравится" Вконтакте Вконтакте предлагает несколько настроек:

  • По ширине (18,20, 22, 24 px)
  • По варианту (Кнопка с миниатюрным счётчиком, кнопка с текстовым счётчиком, миниатюрная кнопка, счётчик сверху)
  • По названию (Мне нравится", Это интересно)

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

Установка виджета

1. Эту часть кода необходимо вставить в тег <head>:

1
2
3
<!-- Put this script tag to the <head> of your page --><script src="//vk.com/js/api/openapi.js?116" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
VK.init ({apiId: 4710408, onlyWidgets: true});
// ]]></script>

2. Эту часть необходимо вставить в то место, где хотите видеть виджет:

1
2
3
<!-- Put this div tag to the place, where the Like block will be --><script type="text/javascript">// <![CDATA[
VK.Widgets.Like («vk_like», {type: «button»});
// ]]></script>

Виджет «Рекомендации»

Внимание! Перед установкой данного виджета на сайт необходимо установить виджет «Мне нравится».

Виджет довольно полезный, он позволяет создать блог с записями, популярность которых учитывается по количеству лайков. Выглядит сие чудо так: Рекомендации Вконтакте Виджет имеет блок настроек, сложного в нём ничего нет: Рекомендации настройки

Установка виджета
1. Эту часть кода в тег <head>:

1
2
3
<!-- Put this script tag to the <head> of your page --><script src="//vk.com/js/api/openapi.js?116" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
VK.init ({apiId: 4710408, onlyWidgets: true});
// ]]></script>

2. Эту в место, где хотите видеть виджет:

1
2
3
<!-- Put this div tag to the place, where the Like block will be --><script type="text/javascript">// <![CDATA[
VK.Widgets.Recommended («vk_recommended», {limit: 5});
// ]]></script>

Виджет «Опросы»

Очень полезный виджет, он помогает создать опросы. При добавлении необходимо заполнить поля краткой информации о сайте, тему опроса и варианты ответов. Опрос Вконтакте Далее нажимаем «Получить код» и начинаем устанавливать виджет:

Установка виджета:
1. Эту часть кода в тег <head>:

1
2
3
<!-- Put this script tag to the <head> of your page --><script src="//vk.com/js/api/openapi.js?116" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
VK.init ({apiId: 4710408, onlyWidgets: true});
// ]]></script>

2. Эту часть кода в место, где хотите видеть виджет:

1
2
3
<!-- Put this div tag to the place, where the Poll block will be --><script type="text/javascript">// <![CDATA[
VK.Widgets.Poll («vk_poll», {width: «300»}, «163679308_3927f9a088265410fa»);
// ]]></script>

Виджет «Авторизация»

Данный виджет позволяет пользователю авторизоваться на вашем сайте. На мой взгляд, это не очень нужный виджет, но тем не менее мы рассмотрим его установку. Виджет "Авторизация"

Установка виджета
1. Эту сторчку кода вставляете в тег:

1
2
3
<!-- Put this script tag to the <head> of your page --><script src="//vk.com/js/api/openapi.js?116" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
VK.init ({apiId: 4710408});
// ]]></script>

2. Эту в то место где хотите видеть виджет:

1
2
3
<!-- Put this div tag to the place, where Auth block will be --><script type="text/javascript">// <![CDATA[
VK.Widgets.Auth («vk_auth», {width: «200px», authUrl: '/dev/Auth'});
// ]]></script>

Виджет «Публикация ссылок»

Если вы не хотите добавлять кнопки социальных сетей на блог, то это отличная замена им. Выглядит виджет примерно так: Публикация ссылок Имеет несложные настройки, которые помогают подобрать вид, указать ссылку, выбрать вариант логотипа и написать нужный вам текст. Публикация ссылок Вконтакте

Установка виджета
1. Этот код устанавливайте в тег <head>:

1
<script src="http://vk.com/js/api/share.js?90" type="text/javascript" charset="windows-1251"></script>

2. Этот код в место, где хотите видеть виджет:

1
2
3
<script type="text/javascript">// <![CDATA[
document.write (VK.Share.button (false,{type: «round», text: «Сохранить»}));
// ]]></script>

Виджет «Подписаться на автора»

Виджет позволяет в один клик подписаться на вашу страницу Вконтакте. Можно настроить различное его отображение... Подписаться на автора Выглядит он вот так: Подписаться на автора - кнопка Вот и все, друзья. Сегодня мы рассмотрели с возможность добавления виджетов из социальной сети «Вконтакте» для сайта. Надеюсь, данная статья вам поможет, и вы с лёгкостью добавите различные виджеты из «Вконтакте» к себе на сайт.

[urlspan]С уважением, Виталий Пеунов.[/urlspan]

Белан Константин Сергеевич

С уважением, Константин Белан.

Рабочая 634570 Россия, Томская обл., г. Томск, +7 952 160 36 17
Сделайте мне приятно - нажмите на любую из кнопок:
Подпишитесь на рассылку блога и получайте новые статьи на свою почту
Количество комментариев к данной статье: 8
  1. Ответить

    Костя, а ты не пробовал делать вывод топ комментаторов, именно тех кто пишет комментарии через форму вконтакте у тебя на блоге. Я встречал такую функцию, которая выводит топовых комментаторов

    • Не встречал такого, поэтому даже и не знаю. Да и форму комментариев от Вконтакте я убрал, так как спама много через нее.

  2. Здравствуй, Костя.

    Спасибо за сайт. очень полезный и много нужной информации.

    занимаюсь сейчас добавлением виджета Вконтакте на свой сайт.

    Скопировал код для вставки, но не могу понять где именно его нужно вставить.

    • Здравствуйте, какой именно виджет вы хотите установить?

  3. Ответить

    да очень полезная статья, я уже на втыкал потом разберусь. спасибо

  4. А как модерировать комментарии в виджете Комментарии? И как узнать о новых комментариях?

    • 1) В apiId пишите ваш ID Вконтакте, после этого появится крестик с помощью которого можно удалять комментарии.

      2) Такой функции не предусмотрено.

  5. Ответить

    Спасибо, совершенно ничего сложного как оказалось нет, установила виджет группы к себе за пару минут, всё работает прекрасно!