Как добавить виджет на страницу в контакте. Зачем создавать виджет группы ВКонтакте? Для каких целей? Как же это сделать

23.04.2019

«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Социальная сеть ВКонтакте запустила новый виджет - Сообщения сообщества. Теперь вместо обычного чата пользователи смогут задать вопросы представителю компании через знакомый виджет»

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

Что делает новый виджет?

Виджет упрощает коммуникацию пользователей и компании. Любой зарегистрированный ВКонтакте пользователь сможет задать вопросы представителям компании в новом виджете непосредственно на сайте без необходимости переходить в социальную сеть. Ждать ответа на сайте как в случае с онлайн-чатом не обязательно. Ответить на сообщение можно будет как в веб-версии, так и в мобильном приложении. Новый виджет автоматически просчитывает среднее время ответа, анализируя историю переписки с другими клиентами за последние 72 часа.

Сообщения администраторам сообществ будут приходить в привычном режиме. Настройки виджета позволяют добавить брендовый приветственный месседж. Это продемонстрирует заботу о клиентах, повысит лояльность и вызовет доверие.

На что делают ставку разработчики?

У большинства активных пользователей есть аккаунты в ВКонтакте. Это избавляет пользователей от необходимости авторизоваться, дополнительно регистрироваться, предоставлять на сайте контакты. Виджет сообщений сохраняет весь функционал, доступный в десктопной версии социальной сети: в диалоге можно отправить фотографию, изображение, документ для более детального обсуждения.

Это снижает конверсионные трения, делает компанию ближе к пользователю, снижает риски для пользователя (теперь не надо оставлять на незнакомом сайте реальные контакты).

Что необходимо для установки виджета Сообщения сообщества?

Чтобы установить виджет на сайт, компании необходимо:

  • вести сообщество в социальной сети ВКонтакте
  • в разделе «Управление сообществом» активировать виджет

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

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

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

Итак, приступим к установке. Прежде всего, для того, чтобы виджет этот нам раздобыть, нужно перейти по такому адресу: http://vk.com/dev

Также на нужную нам страничку можно попасть, со своей страницы в ВКонтакте. Для этого нужно в самом низу страницы перейти по ссылке «разработчикам» :

Кстати, как известно, добраться до самого низа страницы очень сложно, особенно если у вас на странице большое количество новостей. Поэтому советую перейти в раздел «настройки» , откуда добраться до низа страницы будет очень просто.

Также на нужную страницу можно попасть минуя все предыдущие пункты, просто перейдя по адресу: http://vk.com/dev/Community Попадете в то же место.

Настройки буду разбирать по пунктам, которые я пронумеровала на рисунке:

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

2. Определитесь как будет виджет отображаться: в виде аватарок участников (как в моем примере), новостей, или просто в виде названия. Протестируйте все пункты по очереди и посмотрите как больше нравится.

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

3. Настройте ширину и высоту, в зависимости от места, на сайте, где будет находится виджет.
Кстати, в дальнейшем, если нужно будет изменить размер, совсем не обязательно снова заходить на эту страничку и выставлять другие цифры. Достаточно просто в коде, который мы будем вставлять на блог, изменить параметры «width» (ширина) и «height» (высота)

4. В четвертом пункте выбираем цвет фона, текста и кнопки по своему вкусу.

5. И последнее, что нужно сделать, скопировать в буфер обмена код, который находится дальше.

6. Шестой пункт — это просто наглядный пример, как будет смотреться созданный виджет.

Теперь давайте разберем как виджет Вконтакте вставить на сайт.

Есть два варианта вставки кода. Я использовала оба и оба у меня работали без проблем. Поэтому смотрите какой из вариантов Вам больше подойдет

Первый вариант , считается более правильным. Первую часть кода, возле которой я на рисунке поставила букву «А» , нужно скопировать и вставить в файл шаблона с названием «header.php» перед закрывающим тегом «» .
Некоторые блоггеры советуют все подобные коды вставлять в файл «footer.php» , чтобы они не мешали загрузке основного контента сайта. Но, с этим виджетом это не проходит, он просто не будет работать

Вторую часть кода (помечена буквой В ) нужно прописать в то место, где будет находится виджет. Чаще всего это файл «sidebar.php» . Или его просто можно вставить через админку сайта. Для этого нужно перейти в раздел «Виджеты» , выбрать виджет «текст» , перетянуть его на сайдбар и прописать туда вторую часть кода.

Второй вариант . Если Вы еще новичок в сайтостроении и не испытываете особого удовольствия от ковыряния в файлах шаблона Вашего блога, этот вариант для Вас.

В этом варианте не нужно открывать никакие файлы, просто переходите сразу в админку сайта в раздел «Виджеты» и, как и в предыдущем варианте, в виджете «текст» прописывайте обе части кода, то есть и А и В . Не забываем сохранить изменения.

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

Здравствуйте, уважаемые читатели. В нашем курсе “Как создать сайт на WordPress” мы уже изучили огромное количество материалов, посвященных сайтостроению. Фактически дело осталось за малым. И сегодня мы разберем, как добавить виджет группы ВКонтакте на Ваш сайт.

Получаем код виджета группы ВКонтакте

Итак, для того чтобы разместить виджет группы на сайте, для начала Вам необходимо создать эту группу. Как это сделать, я описал в своей статье «Как правильно создать группу ВКонтакте».
Допустим, группа у Вас уже есть. На следующем этапе нам необходимо перейти по этой ссылке, и перед нами откроется интерфейс, в котором необходимо выбрать «Авторизация и виджеты для сайтов» .
На следующем этапе выбираем раздел сообщества:

Далее нам необходимо заполнить следующие параметры:
— IDгруппы, виджет для которой мы хотим создать.
— Размеры виджета. По умолчанию стоит 240х400px
— Цвет виджета. Большая часть вебмастеров используют стандартные цвета ВКонтакте. В моем случае, т.к. сайт BIZ-NOVOSTROYвыполнен в темной цветовой гамме, эти цвета не подходят. Я заменил стандартный цвет на черный. В нижней части экрана мы получили код нашего виджета:

Размещаем на сайте код виджета ВКонтакте

В размещении виджета группы на сайте нет ничего сложного. Для того чтобы это осуществить, нам необходимо произвести следующие действия. Зайти в административную панель вашего сайта, перейти во «Внешний вид» >>> «Виджеты» . Далее перетаскиваем виджет «Текст» (html-код в свободной форме) в необходимую нам зону (в моем случае это главная страница) и нажимаем «Сохранить» .

Запасной способ размещения виджета группы ВКонтакте

В случае если в Вашей теме WordPress не предусмотрен вариант размещения в виджетах свободного html-кода, рекомендую разместить виджет через файлы самой темы. Делается это следующим образом: заходим в «Внешний вид» >>> «Редактировать» , находим там файл sidebar.php (у Вас файл может называться right_sidebar.phpи т.д.).

Теперь в конце данного файла сохраняем код нашего виджета. Виджет должен появиться в правом сайдбаре.

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

Успехов Вам в бизнесе!

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

Виджет сообщества или группы Вконтакте, размещённый на сайте, позволит увеличить приток участников в группу и получить дополнительный трафик с vk.com.

Чтобы создать виджет сообщества, нужно авторизоваться в социальной сети Вконтакте и перейти в раздел для разработчиков по ссылке http://vk.com/dev/Community . Первый пункт формы для настройки виджета сообщества для сайта — это ссылка на страницу. Для получения ссылки, необходимо открыть группу, для которой вы создаёте виджет и скопировать из адресной строки браузера адрес группы. Копируем адрес и вставляем в форму «Ссылка на страницу «:

  • участников
  • последние новости
  • только название группы и количество участников

Выберем отображение «Участники».

В следующем пункте настроек нужно указать ширину и высоту виджета. Высоту можно оставить по-умолчанию, то есть 400 пикселей, а вод с шириной нужно подумать. Если у вас статический сайт, дизайн которого одинаково выглядит на любом экране, то необходимо лишь измерить ширину того места, куда будет помещён виджет. Зачастую виджеты помещаются в сайдбар, поэтому измеряйте ширину сайдбара.

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

Пусть ширина у нас также будет равна значению по-умолчанию 220 пикселей:

Затем, также можно изменить цвет фона, цвет кнопок и текста. Здесь всё зависит от ваших предпочтений и вкусов. Желательно подбирать цвета, которые будут сочетаться с цветами, использованными на сайте.

Размещение виджета группы Вконтакте на сайте

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

Покажите, что у вас есть группа Vk.com

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

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

Виджет сообщений вконтакте на свой сайт. Необходимо зайти в своё сообщество/группу вконтакте. P.S: У вас должны быть права администратора для управления сообществом. Заходим в «Управление сообществом «

Настраиваем форму сообщений. Заполняем выделенные поля (В пункте «Разрешённые домены» указываем доменное имя своего сайта, у меня сайта 2, поэтому и 2 домена) :

Далее ставим галочку «Раскрывать сразу» , если требуется. На моём сайте для примера раскрывается данный виджет сразу, на сайте http://айти-казань.рф просто отображается справа внизу и открывается при нажатии на него. Копируем код для вставки на сайт.

Идём в админку своего сайта. Внешний вид — виджеты.

Добавляем текстовое поле и вставляем туда скопированный код. Можно так же данный код вставить не в виджеты, а в «Footer» (подвал) вашего сайта (на скриншоте выделено жёлтым, зависит от темы WordPress). В подвал сайта это более правильно, но я не стал заморачиваться. Смотрите как удобнее. Мне удобнее было в виджеты. Результат одинаковый был. Тестировал на 2-х своих сайтах. Сохраняем.

Вот что в итоге получилось:

Смотрим, радуемся, отмечаем успех!!!

Виджет группы/сообщества на сайт c CMS WordPress. Как добавить виджет группы/сообщества вк на сайт.

Виджет для сообществ

Виджет для сообществ тесно свяжет ваш сайт с соответствующей группой или официальной страницей ВКонтакте . Виджет позволяет подписаться на новости сообщества, не покидая страницы.

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

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

Подключение виджета к Вашему сайту

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

Здесь всё очень просто.

Похожие статьи