Html код группы вконтакте. Виджеты в ВК для группы — как добавить и настроить

Добрый день, дорогие друзья. Социальные сети стали неотъемлемой частью жизни многих людей. Одни находят собеседников, другие друзей, а кто-то работает. Так или иначе, число пользователей соцсетей неуклонно растет с каждым годом. Поэтому, упускать возможность привлечения таких пользователей к себе на сайте, было бы большой ошибкой. Для этой цели мы , чтобы пользователи VK могли с легкостью комментировать посты.

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

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

1. Авторизуемся и переходим в раздел для разработчиков

Ищем на страничке надпись «Разработчикам» .

2. Переходим в раздел «Виджеты для сайтов»

Опускаемся в самый низ страницы и в подвале находим ссылку.

3. Выбираем раздел «Сообщества»

Он дает возможность связать группу ВК с сайтом.

4. Настраиваем виджет группы

1. Указываем адрес сообщества
2. Устанавливаем внешний вид. Можно настроить содержимое окна, а именно: Участники – будут отображаться в виджете фотографии участников группы, Новости – отображается новостная лента сообщества, Только название – показывается только название сообщества и количество подписчиков. Все изменения будут показаны внизу окна настройки, изменив один пункты, можете посмотреть, как это будет визуально выглядеть
3. Ширина. Указываем, какого размера должен быть плагин
4. Цвет фона, текста, кнопки – настраиваем палитру виджета

5. Вставляем код виджета группы ВКонтакте на сайт

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

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

Как же это сделать?

3. Переходим на страницу «Мои Настройки».

4. Прокручиваем страницу вниз и в подвале сайта находим меню с ссылкой «разработчикам». Переходим по данной ссылке.

6. Перейдём в этот раздел, где будет перечислен список виджетов для сайта.

Начнём по порядку.

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

Переходим на страницу этого виджета.

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

Напротив пункта «Медиа» убираем галочку, если вы хотите чтобы в комментариях был только текст. Если хотите дать волю пользователям, то галочку можно оставить или настроит данную функцию на ваше усмотрение.

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

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

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

Теперь вы можете получать комментарии к своим статьям, имея гарантию, что это будут реальные люди. Так же данный виджет имеет возможность модерации (удаления сообщений, добавление отдельных пользователей в чёрный список, назначение модераторов).

Виджет «Запись на стене» — для чего он нужен? Попробую объяснить на примере.

Допустим, вы на своём блоге размещаете новость об увольнении Павла Дурова из ВКонтакте, и хотели бы процитировать его мнение по этому поводу. Вам всего-навсего необходимо найти нужную запись в социальной сети. Скопировать её URL.

Перейти на страницу виджета «Запись на стене».

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

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

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

Участники : фотографии подписчиков и их количество.

Только название : в виджете будет отображаться логотип вашего сообщества и его название.

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

После всех настроек, вы так же копируете «Код для вставки» и добавляете его в отведённую область на сайте.

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

Здесь также как и для комментариев указываем название сайта, его адрес, основной домен и тематику. Далее жмём кнопку «Сохранить».

Теперь необходимо настроить внешний вид кнопки. Здесь на ваше усмотрение. Далее выбираем высоту кнопки — для всех вариантов кнопок предложенные значения одинаковые: 18, 20, 22 или 24 пикселя. Так же если вы выбрали вариант кнопки «Кнопка с миниатюрным счётчиком» или «Кнопка с текстовым счётчиком», то можно в пункте «Название кнопки» выбрать текст, который будет отображаться на кнопке. Вариантов всего два: «Мне нравится» или «Это интересно».

Всё! Копируем код и добавляем на страницы сайта.

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

С первыми пунктами настройки данного виджета думаю вам о так уже всё ясно, поэтому начну с «Количества записей». Здесь вы выбираете количество отображаемых популярных страниц. Их может быть 3, 5 или 10.

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

В пункте «Формулировка» выбираем наиболее приемлемую фразу («Понравилось» или «Интересно») и вновь копируем «Код для вставки».

Виджет «Опросы». Это, пожалуй самый интересный виджет. С его помощью вы можете на своём сайте организовать опрос по любой тематике и с любым количеством вариантов ответов.

Например, вы сменили дизайн своего блога и хотите узнать мнение своих читателей. Идём в раздел виджета «Опросы». Заполняем форму (вы конечно для своего сайта описание добавляете):

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

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

Появится всплывающее окошко, из которого вы сможете скопировать Код для вставки.

После вставки кода на сайт, ваши читатели увидят вот такую форму опроса:

Хотите чтобы ссылки на ваши статьи стали бессмертными? Тогда на помощь вам придёт виджет «Публикация ссылок», позволяющий пользователям ВК публикацию ссылок на статью прямо на стену. А как известно — вся информация опубликованная на стене обязательно транслируется в новостную ленту.

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

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

Думаю этот виджет можно ещё использовать в том случае, если, например, вам на блог пишут статьи другие люди (как у Александра Борисова), где в конце статьи вы указываете ссылку-имя автора на его сайт. А если сайта нет? Вот тогда можно воспользоваться этим виджетом и отправлять всех желающих познакомиться с автором на его страничку в соцсети.

На этом всё! Удачных вам экспериментов!

Как добавить виджет в ВК в группу, пошаговое описание с картинками.

Вероятно вы хотите узнать как стабильно зарабатывать в Интернете от 500 рублей в день? Скачайте мою бесплатную книгу =>>

Много было просьб, по улучшениям, помогающим в администрировании и ведении групп, по добавлению расширений.

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

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

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

Как добавить виджет в ВК в группу

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

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

То есть, одно, из трёх дозволенных приложений, можно разместить в виджете.

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

Проще говоря – исходить от того, для чего была создана группа. Например:

• Для продажи товаров нужен интернет-магазина;
• Собрать подписчиков – приложение для рассылки сообщений;
• Хотите брать пожертвования – установите соответствующее приложение.

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

Все приложения устанавливаются одинаково, разница заключается в их последующих настройках.

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

Пошаговая инструкция

Для того, чтобы добавить расширение в группу, следует проделать следующее:

• В правой колонке нажмите на значок шестерёнки. Там должно быть написано управление;

• Если не видно такого значка, то следует нажать три точки справа под шапкой сообщества. То есть – открыть настройки.

• А затем нажать – управлять сообществом.

• Откроются настройки, где нас интересует пункт приложений;

1. Таким образом мы добрались до виджетов, нажав на показать все, вы сможете изучить все предложения по улучшению группы. А если нажмёте на слово – добавить, то,соответственно добавите виджет в группу в ВК.

Однако, на этом процесс добавления расширения не завершен, предстоит ещё настроить приложение. Для того, чтобы программа смогла эффективно заработать.

Сейчас, на примере добавления расширения я покажу как производится настройка приложения. А также, установка виджета, в зависимости от поставленных задач.

Настройка приложения

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

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

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

Только по окончанию настройки приложения, можно перейти к настройке виджета.

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

После добавления приложений, они станут видны в правой колонке, под кнопкой подписки.

А виджет, если его добавить, находится в верхней части центральной ленты. То есть почти под шапкой, в центре.

Если нет шапки, то сразу под заголовком.

Пример установки виджета

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

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

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

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

В правой колонке появилась иконка приложения с призывом открыть. Мы так и сделаем, ведь нам нужно всё настроить.

Нажимаем на разрешение дать приложению доступ к данным.

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

• Пишем заголовок,
• подзаголовок,
• текст,
• устанавливаем ссылку на кнопку,
• меняем текст на кнопке.

Процесс замены выглядит следующим образом – нажмёте на объект, что собрались редактировать и редактор откроется в новом окне.

Например так выглядит редактирование кнопки.

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

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

Хочу сказать новичкам – не бойтесь нажимать на кнопки, смотреть на возможности.

Например, в настройках этого виджета есть возможность настроить до 4 стилей. Есть отдельные настройки для мужчин и для женщин и так далее.

Настройки видимости

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

Для этого возвращаемся в управление – приложения – установленные – изменить.

Заходим в приложение и устанавливаем следующие настройки.

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

Теперь вы можете пройти в мою

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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