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

Социальные сети – это второй по доступности источник трафика для сайта после поисковых систем, и третий по эффективности. При правильном продвижении Интернет-проекта в соц.сетях можно добиться прироста посещаемости на 30%, а количество постоянных читателей до 70%!
Вот почему вебмастеры в первую очередь обращают пристальное внимание на социальные сети, создавая официальные страницы от сайта, запуская новостей. И главной российской площадкой для раскрутки своего веб-сайта или Интернет бизнеса, является сеть , которая предоставляет достаточные мощности для свободного старта без каких-либо вложений!

Как вставить виджет группы ВК?

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

Чтобы приступить к вставке кода на страницы сайта, для начала авторизуемся на сайте ВКонтакте, и проследуем по ссылке «Разработчикам» в конце страницы:

  1. Найдите пункт «Авторизация и виджеты для сайта» ;
  2. Щёлкаем «Сообщество» — 3 пункт сверху и настраиваем отображение;
  3. Укажите ссылку на свою группу или паблик, так как она отображается в адресной строке;
  4. Выберите формат отображения: Участники, новости, только название (рекомендуем вариант «Участники», как более распространённый среди блогов и большинства крупных сайтов);
  5. Далее настройте габариты виджета (ширину и высоту в пикселях), и если требуется измените цветовое решение, чтобы вписать в шаблон сайта.

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

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

Как вставить виджет ВК через iframe

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

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

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

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

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

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

Установка виджета ВКонтакте для группы может реализовываться по 3-м схемам:

1-я схема – виджет на сайте выводит только участников сообщества ВК;
2-я схема – виджет на сайте выводит только новости сообщества ВК;
3-я схема – виджет на сайте выводит только название сообщества ВК.

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

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

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

Устанавливаем виджет ВКонтакте: пошаговая инструкция

1. Для начала входим ВКонтакт и авторизуемся по стандартной схеме (Пароль и Логин). Проходим к разделу «Разработчикам – Виджеты» по прямой ссылке:
http://vk.com/dev/Community

2. Приступаем к заполнению всех необходимых полей виджета ВКонтакте. Обязательными полями можно считать:

— ссылку на страницу (сообщество Контакта, которое пытаемся привязать к сайту);
— вид (по умолчанию – Участники);
— ширину виджета ВКонтакте (в пикселях);
— высоту виджета ВКонтакте (в пикселях);
цветовую палитру (фон, текст, кнопка).

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

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

Примечание: чтобы заданные настройки виджета не обнулились, лучше предварительно скопировать код в буфер обмена или в Блокнот!

4. Как видно, в документации нам предлагают поступить более разумно, вынеся скрипты в контейнер Title, а в нужном месте тела сайта (контейнер Body) вставить только новый блочный элемент DIV. Решать только вам. В любом случае код виджета будет работать нормально и без единого сбоя!

0 0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Топ-10 лучших и полезных виджетов в ВК для группы

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

Магазин товаров

Для кого : людям, которые занимаются продажей товаров.

Цель : продажа продукции прямо в группе без переходов на другие сайты и интернет-магазины.

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

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

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

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

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

Пожертвования

Для кого : сообществ, которые бесплатно делятся полезной информацией.

Цель : поддержать владельцев групп.

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

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

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

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

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

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

Spycat: конструктор лид-виджетов в ВК

Для кого : владельцев сообществ.

Цель : улучшения поведенческих факторов, привлечения клиентов.

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

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

Заполняете основные поля:

  • название кнопки;
  • кто может её видеть;
  • сниппет;
  • название приложения.

Выберите текстовый или персональный тип.

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

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

Рассылки сообщений

Для кого : желающих отправлять сообщения с любыми материалами, автоматизировать рассылку.

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

Если вы хотите подключить такую возможность, перейдите на страницу – https://vk.com/app5748831 . Нажмите «Подключить приложение».

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

Заявки

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

Цель : превратить пользователей в социальной сети в клиентов.

Зайдите в раздел «Приложения» на странице своей группы. Выберите соответствующее приложение и нажмите «Добавить».

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

Тесты

Для кого : всех сообществ, идеально подходит интернет-магазинам и компаниям.

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

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

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

Анкеты

Для кого : подходит владельцем любых групп.

Цель : провести полное анкетирование или опрос подписчиков и посетителей сообщества.

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

Для добавления переходим в «Управление страницей» – «Приложения». Выбираем «Анкеты» и нажимаем «Добавить».

Заполняем основные настройки и переходим к созданию анкет. Нажимаем на кнопку «Перейти в управление приложением».

Давайте рассмотрим пример создания анкеты:

  1. Вводим название.
  2. Нажимаем на первый пункт (смотрите пример на скриншоте выше).
  3. Задаем вопрос и добавляем варианты ответов.
  4. Нажимаем «Сохранить».

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

Личный кабинет для СП

Для кого : владельцам интернет-магазинов.

Цель : дает возможность легко участвовать в совместных покупках.

Сразу после установки вы получите такие возможности:

  • отображение общего счета по покупкам;
  • приходят уведомления, если происходят изменения в закупках;
  • история заказов сохраняется;

Добавление ничем не отличается от остальных. После запуска необходимо нажать на кнопку «Подписаться».

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

Расписание мероприятия

Для кого : администраторов, которые нацелены на проведение концертов, выставок или других мероприятий.

Цель : привлечение внимания к определенному событию, оповещение о нем подписчиков.

Добавление ничем не отличается от работы с предыдущими виджетами. После заполнения основных полей переходим к настройкам.

Нажимаете на кнопку «Создать мероприятие».

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

Статус заказа

Цель : покупатели могут видеть состояние заказа.

Если вы продаете товары в ВКонтакте, обязательно установите это приложение. Благодаря нему пользователи смогут видеть статус своей покупки. Всего есть 3 статуса: на утверждении, отправка и доставка. Способен интегрироваться с виртуальным магазином, который мы рассматривали перед этим. Это позволяет автоматически подгружать статусы, под которые заранее настраиваются шаблоны.

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

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

Заключение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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