У вас есть группа ВКонтакте и вы хотите разместить на сайте или блоге участников вашей группы?! Все это можно сделать с легкостью и без особой сложности. Социальная сеть ВКонтакте предоставляет такую возможность. Всего в пару кликов вы сможете установить виджет группы ВКонтакте на WordPress сайт. С чего начать? Для начала нужно получить код виджета группы ВКонтакте, а потом разместить код на сайте. Приступим к пошаговой установке. 
Как получить код виджета группы ВКонтакте?
1). Чтобы получить код виджета группы, вам нужно скопировать из адресной строки url-адрес вашей группы:
2). Зайти в свой аккаунт ВКонтакте, а потом перейти по ссылке:
3). В открывшейся форме нужно сделать такие настройки:
--> «Ссылка на страницу» - здесь вставьте скопированный url-адрес вашей группы;
--> «Вид» - здесь выберите, что должно выводиться в блоке: «Участники», «Новости» или только «Название»;
--> «Ширина» и «Высота» блока, «Цвет фона», «Цвет текста» и «Цвет кнопок» - здесь объяснять, думаю, не нужно;
--> «Код для вставки» - это код, который нужно скопировать и разместить на сайте/блоге в том месте, где вы хотите видеть блок группы:
Как установить код виджета группы ВКонтакте на сайт?
Способ №1
1). Чтобы установить код виджета группы на WordPress сайт, вам нужно зайти в админ-панель во вкладку «Виджеты» («Внешний вид» => «Виджеты»):
2). Перетащите виджет «Текст (Произвольный текст или HTML-код)» на рабочую зону, то есть в колонку справа:
3). Заполните виджет:
--> «Заголовок» - назовите группу, например, «Наша группа ВКонтакте»;
--> В следующем поле вставьте код, который вы скопировали на сайте ВКонтакте из поля «Код для вставки».
4). Жмите кнопку «Сохранить»:
Способ №2
Чтобы установить код виджета группы на WordPress сайт, вам нужно зайти в админ-панель WordPressи перейти к редактированию файла «sidebar.php» («админ панель» => «Внешний вид» => «Редактор» => «Боковая колонка (sidebar.php)») и поместите код в то место, где вы хотите видеть блок группы ВКонтакте.
Ну, у меня все!
Если была полезная статья, жмите на кнопку социальных сетей и не забывайте подписываться на обновления блога BlogGood.ru.
Удачи!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как установить минимальную сумму для заказа – WooCommerce?
URL ссылка миниатюры для картинки – WordPress
Как добавить визуальный редактор для «Цитат (Отрывок)» – WordPress ?
Как добавить «Цитату (Отрывок)» для страниц?Похожие статьи
Как закруглить углы в CSS
Как изменить цвет в админ-панели WordPress
Уязвимость WordPress через файл xmlrpc.php. Решение есть!
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330379 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274712 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222616 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187978 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186569
54 Ответов на комментарий - Как установить виджет группы ВКонтакте для WordPress сайта
Добавить комментарий
Метки: wordpress, без плагинов, для сайта
Здравствуйте! Пробую сделать всё, как у вас описано, но после вставки кода в виджет “Текст” WordPress не сохраняет виджет. После нажатия на кнопку “Сохранить” из исходного кода исчезают строки до абзаца, начинающегося с VK.Widgets и потом этот код отображается, как текст на странице WordPress
Здравствуйте, Игорь! Проверил еще раз свои примеры, у меня все работает!
, а другую часть кода добавьте в виджет. Ниже в коде я указал подсказки, посмотрите и сделайте все так же:Попробуйте верхний код (тот, что исчезает) установить в файле “header.php” между тегами
<!-- это в файл "header.php" --> <script ENGINE="text/javascript" src="//vk.com/js/api/openapi.js?115"></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'}, 75949932); </script>Спасибо! Попробую. У вас наверное уже изменён файл header.php, поэтому всё и получается через виджет wordpress
Привет! Делаю всё как написано в способе #1, но в итоге на сайте отображается код, а не виджет. Подскажи плиз почему так? Не могу понять ((((
Сорри, прочитала коммент выше) всё понятно
Здравствуйте! Я рад, что проблема решилась! Будут вопросы, пишите, с большим удовольствием помогу!
Здравствуйте! Спасибо, все очень понятно, все получилось. Но есть вопрос. У меня в виджете отображается только 2 человека, точнее только 2 фото и большого размера. Увеличение виджета в размерах не помогает, остается так же только 2 фото, остальное белый фон. Как можно уменьшить размер фото и выставить так, что бы хотя бы штук 9 высвечивалось фотографий?
Вроде разобралась… Правда хотелось бы размер фото поменьше…
Здравствуйте! Странно, что у вас выводиться так мало фотографий? По умолчанию, виджет выводить по 12 фотографий. Может проблема с шаблоном сайта? Если хотите, попробуйте для эксперимента установить другую тему для WordPress. Если проблема исчезнет, значит проблема была в CSS файле.
…и что было?
Размер шаблона увеличила – это первое. И второе, появляются участники в виджете не сразу, а спустя какое-то время. И что интересно, в разных браузерах промежуток времени разный. В Яндекс-браузере через минут 20, в Мазиле часа через 1,5
Спасибо, Татьяна, за ответ! У Вас красивый и полезный блог.
Спасибо большое за оценку! Омне очень и очень приятно!
Заходите в гости!
Татьяна, спасибо за приглашение, буду частым гостем
Добрый вечер! Вопрос немного не по теме. Добавил на свой сайт основной виджет вконтакте (с фото участников группы) и виджет комментариев вконтакте. Всё работает.
Когда добавляем основной виджет, то есть возможность выбрать цвет фона, цвет текста.
Когда добавляем виджет комментариев, то такого нет. Есть ли способ изменить цвета?
Здравствуйте, Дмитрий! Попробуйте в коде поменять цвет!
Вместо FFFFFF – на свой
Вместо 2B587A – на свой
Вместо 5B7FA6 – на свой
Код цвета можете посмотреть здесь
Спасибо))))
А как вставить виджет ВК во всплывающее окно с приглашением вступить в группу? У многих видела на сайтах такое – окно всплывает где-то секунд через 5-10 после открытия страницы?
Спасибо.
<html> <head> <title>заказ</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> #parent_popup{ background-color: rgba(0, 0, 0, 0.8); display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } #popup{ background: #fff; width: 520px; margin: 10% auto; padding: 5px 20px 13px 20px; border: 10px solid #ddd; position: relative; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .close{ background-color: rgba(0, 0, 0, 0.8); border: 2px solid #ccc; height: 24px; line-height: 24px; position: absolute; right: -24px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); top: -24px; width: 24px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover{ background-color: rgba(0, 122, 200, 0.8); } </style> </head> <body> <div id="parent_popup"> <div id="popup"> Тут вставляем необходимый html-код <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a> </div> </div> <script ENGINE="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script> </body> </html>5000 миллисекунд = 5 секунд
Пробуйте!
Ого… Спасибо! Э… а куда его вставить?
Тут вставляем необходимый html-код – вроде код ВК – это джава-скрипт – подходит? Его вставлять?
Я на Вы с вордпрессом. Понимаю, что кусок … надо вставить в файл стилей, а вот начало кода и конец… можно еще подсказочку? Спасибо.
В заголовок (header.php) сразу после
:<div id="parent_popup"> <div id="popup"> Тут вставляем необходимый html-код <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a> </div> </div> <script ENGINE="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>А вот это в Таблицу стилей (style.css):
#parent_popup{ background-color: rgba(0, 0, 0, 0.8); display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } #popup{ background: #fff; width: 520px; margin: 10% auto; padding: 5px 20px 13px 20px; border: 10px solid #ddd; position: relative; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } .close{ background-color: rgba(0, 0, 0, 0.8); border: 2px solid #ccc; height: 24px; line-height: 24px; position: absolute; right: -24px; cursor: pointer; font-weight: bold; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); top: -24px; width: 24px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover{ background-color: rgba(0, 122, 200, 0.8); }Степан, вроде понятно, а первые 4 строки из первого кода – тоже в хедер вставлять? Наверное, ДО div ID? Боюсь запутаться…
Татьяна, это моя ошибка, не дописал предложение.
:В заголовок (header.php) вставляете сразу после
<div id="parent_popup"> <div id="popup"> Тут вставляем необходимый html-код <a class="close"title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a> </div> </div> <script ENGINE="text/javascript">var delay_popup = 5000;setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);</script>Спасибо. Всё доступно и просто.
Спасибо!!
Всё получилось быстро и просто!! Очень доходчиво написано!! 
Пожалуйста, Марина!
Спасибо, совершенно ничего сложного как оказалось нет, установила виджет группы к себе за пару минут, всё работает прекрасно!
Пожалуйста, Елена!
Здравствуйте! Как можно сделать этот виджет резиновым? Дизайн адаптативный, при изменении размера экрана виджет остаётся большим и вылазит за края сайтбара.
Здравствуйте, Егор! В коде от группы ВКонтактов, находите “width”. Меняете значение под 100%. Например, было так:
сделайте вот так:
Спасибо за статью. Находил похожие, но все не то было
А тут именно то, что надо и доступно очень 
Пожалуйста, Алексей!
Полезная и доходчивая статья.Спасибо.
Добрый день, Степан!
А есть нормальные решения, чтобы код грузился асинхронно?
Пожалуйста, Михаил
Здравствуйте, Олег!
Думаю, что нету.
Я за это время нашел решение, спасибо Степан.
Есть вполне нормальный асинхронный вариант, который не останавливает загрузку страницы. Я его реализовал в виде плагина у себя на сайте, если кому нужно могу залить на GitHub.
Спасибо, просто, как все гениальное) вставилось, работает, что и требовалось)
Спасибо за инфу!
Пожалуйста, Михаил.
Спасибо. Все получилось и работает. А такое же для Фейсбука есть?
Пожалуйста! Еще нет, но я так понял, что уже пора начинать писать )))
Олег,не подскажите название плагина, пожалуйста. Сайт грузит медленнее при вставке виджета VK сообщества на сайт
Все получилось! Спасибо
Пожалуйста, Иван
Здравствуйте! Прошу совета. Пытаюсь воспользоваться вашим способом №1. При заполнении виджета кодом из ВКонтакте, WordPress ругается на строчки <script ENGINE="text/javascript" и пишет, что Tag is not allowed. Соответственно, сохранить не даёт.
Моих знаний не хватает, чтобы разобраться, в чём проблема, и как решить её решить.
Tag script is not allowed. Вот что пишет.
Привет! Делаю всё как написано в способе #1, но в итоге на сайте отображается код, а не виджет.
Здравствуйте, Святослав!
А в коде прописаны теги
Спасибо за полезную статью!!!
Спасибо, все получилось!
Спасибо за доступную и полезную статью.
Пожалуйста!!!
Спасибо, установила такой себе на сайт. Сейчас в WP есть виджет Html-код. Лучше пользоваться им.