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

  Автор:
  179
виджеты групп на сайте

Доброго времени суток, друзья!) Сегодня хотела законспектировать свои заметки по теме «Как установить виджет вк на сайте», а также поговорим о добавлении виджета группы Одноклассников на сайте. Узнаете откуда брать эти виджеты и как их установить на своем сайте.

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

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

Конечно, создать саму группу, затем скопируйте ссылку на группу/паблик.
Зайдите на https://vk.com/dev/Community

dev-виджет

Выберите «Виджеты для сайтов», далее «Сообщества»
ВК Сообщество
Далее можно поиграть с настройками виджета для Вк, в зависимости от ваших настроек будет меняться код

настройки виджета для вк
Ниже видно наглядные изменения ваших настроек
наглядные изменения виджета вк
Код после всех ваших экспериментов вы должны скопировать и вставить в нужное место на своем сайте
Теперь заходите в консоль своего сайта, или административную панель(=админка сайта), далее в раздел «Виджеты» как на рисунке

виджет в консоли
Вставляем скопированный код в новый пустой виджет, для этого перетаскиваем его в нужное вам место. У себя я вставила его в «Липкий сайд бар справа», при нажатии на треугольник справа свернутый виджет раскрывается так, как на картинке ниже, далее вставляете код в поле»Содержимое»изменить ширину виджета

Меня не устроила ширина виджета – а именно как он выглядит не по ширине моего бокового сайдбара на сайте, а меньше. Я дописала в коде ширину – поставила автоматическую – по ширине бокового блока, если конкретно то дописала это:

width: “auto”

и все стало нормально! Всегда помните про «Сохранить изменения»!!!

Теперь можете посмотреть на свой сайт и вы увидите добавленный виджет Вк)

Получилось так, как я и хотела!)

Для одноклассников чтобы добавить виджет группы на сайт

Необходимо заранее создать группу в Ок, нам пондаобиться id группы, и сразу идем в спец сервис от одноклассников сайт https://apiok.ru/

ок для сайтов
Выбираете «Ок для сайтов», затем «Виджет группы».

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

Также выставите свои настройки, то есть вставить идентификационный номер вашей группы в поле ID группы, выставить ширину и высоту, и всё. Результат смотрите прямо под настройками ниже (видны изменения при изменении настроек), и можете еще подрегулировать. Затем также копируете получившийся код, пример

код виджета группы Ок

и вставляете на сайт, точно также как мы поступили с виджетом Вк – см.выше.
Например, я вставила оба кода (от двух виджетов) в один блок HTML, который подписала «Следуй за нами!»

Называйте, чтоб был призыв к действию, название блока всегда можно изменить.

Удачи вам!

Интересная статья? Поделитесь ею пожалуйста с другими:
Оставьте свой комментарий:
3 комментария
  1. Оказывается, что всё устанавливается довольно просто. Надо будет и себе на сайт такие виджеты добавить. =)

  2. Я в принципе знала как это сделать. Статью прочитала, думала что появилась волшебная кнопка на которую можно нажать и все сделается само, так многие думают… :-D :-D :-D :-D

на Блоге
в Вконтакте
в Фейсбук