Для начинающих пользователей ПК

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Виджет сообщения сообщества Вконтакте

К самому полезному, по-моему мнению, следует отнести виджет «Сообщения сообщества».

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

Установка виджета «Сообщения сообщества» на сайт

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

  1. выбираем необходимую нам группу,
  2. копируем и вставляем полученный код на страницы вашего сайта (например: footer)

Из дополнительных настроек следует отметить параметр «Раскрыть сразу» (shown: 1). Не будьте назойливы, дайте возможность вашему пользователю самостоятельно принять решение о написании вам сообщения, оставляйте данный параметр скрытым.

Виджет вы можете наблюдать в правом нижней части моего блога, попробуйте написать что-то.

Виджет «Напишите нам»

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

В данном виджете можно указать не только группу и собственную страницу.

Установка виджета «Напишите нам»

Достаточно внести необходимые данные и установить код для вывода в нужном месте сайта кнопки «Напишите нам»:

  1. ссылка на группу,
  2. текст сообщения в кнопке (не более 140 символов),
  3. размер кнопки (18, 20, 22, 24, 30).

Виджет комментариев вконтакте для сайта

Виджет «Комментарии» — готовый функционал комментирования для вашего сайта.

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

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

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

Установка виджета «Комментарии»

  1. выбираем необходимое приложение,
  2. указываем необходимое количество для вывода комментариев,
  3. отключаем или включаем функционал вложений, выбираем нужные,
  4. указываем ширину виджета комментариев (минимальное значение 300px),
  5. вставляем полученный код в место вывода формы комментирования.

Администрирование виджета

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

Виджет «Запись на стене»

Один из самых простых виджетов, в котором вы можете использовать любые записи со страниц вконтакте (в том числе аудиозаписи и видеозаписи)

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

Установка виджета «Запись на стене»

  1. указываем ссылку на нужный пост или сообщение,
  2. выбираем необходимую ширину,
  3. устанавливаем полученный код в необходимое место на сайте (например: sidebar).

Виджет сообщества Вконтакте

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

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

Установка виджета «Сообщества»

  1. указываем ссылку на группу вконтакте,
  2. выбираем вид:
    участники (название, описание, количество участников с вывод нескольких и кнопка подписаться)
    новости (название, описание, участники сообщества, закрепленная запись и кнопка подписаться)
    только название (название, описание, количество участников и кнопка подписаться)
  3. указываем ширину (минимальная 120px), высоту можно указать в коде (минимальная 120px, максимальная 1200px)
  4. выбираем цвет текста, фона и кнопок,
  5. устанавливаем код в нужное место на сайте.

Два связанных друг с другом и одновременно малополезных виджета.

Виджет «Мне нравится»

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

Установка виджета «Мне нравится»

  1. указываем нужное приложение,
  2. выбираем нужный формат вывода,
  3. задаем высоту кнопки,
  4. изменяем текст кнопки (два варианта: «мне нравится», «это интересно»),

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

  1. указываем нужное приложение,
  2. выбираем количество выводимых записей,
  3. указываем период выборки (максимальный месяц),
  4. выбираем формулировку,
  5. устанавливаем код в нужное место сайта.

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

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

Установка виджета «Опросы»

  1. указываем нужное приложение,
  2. создаем тему опроса,
  3. указываем варианты ответов,
  4. указывание ширину блока (минимальная 300px),
  5. устанавливаем код в нужное место сайта.

Виджет авторизации вконтакте

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

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

Установка виджета «Публикация ссылок»

  1. выбираем стиль кнопки,
  2. указывает текст для кнопки,
  3. указываем что будет публиковаться (страница на которой расположена кнопка или же конкретный url),
  4. устанавливаем код в нужное место сайта.

Информация о расшаренной страницу лучше всего считывается через OGP.

Виджет «Подписаться на автора»

Стандартный функционал подписки на группу или определенную страницу для авторизованных пользователей Вконтакте.

Установка виджета «Подписаться на автора»

  1. указываем ссылку на страницу для подписки,
  2. выбираем вид кнопки,
  3. устанавливаем код в нужное место сайта.

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

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

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

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

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

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

Позже была описана моя методика , с помощью специальных программ (Group Builder, Inviter, Troll, Botovod), но так как они платные не каждый новичок может взять их к себе на вооружение.

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

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

Через пару минут похожая картина будет отображаться и на ваших проектах.

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

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

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

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

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

Вид — отмечаем, что будет отображаться в информационном поле:

Участники — аватарки подписчиков;
Новости — последние новости сообщества;
Только название — думаю объяснять не стоит.

Настройки стилей — здесь задаете ширину и высоту блока в пикселях, а также выбираете какой у него будет цвет: фона, текста и кнопок.

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

Первый кусок кода (красный цвет ) придется вставить в любое место файла header.php перед закрывающим тегом . Если вы уже ранее устанавливали подобные приложения, например виджет комментариев, то этот код по идее должен у вас уже быть добавлен.

Второй кусок кода (синий цвет ) придется вставить в то место на сайте, где вы планируете вывести виджет группы от Вконтакте и ниже я покажу, как это сделать.

Установка блока сообщества от Vk на блог WordPress

Так как мой блог работает на CMS (движок) вордпресс, то я покажу на собственном примере самый простой способ реализации данного информационного окна группы в сайдбаре моего блога.

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

Переходим в административную панель сайта и выбираем вкладку «Виджеты». Из доступных блоков нас интересует тот, который называется «Текст» (произвольный текст или HTML-код.), вот его мы и перетягиваем к себе в сайдбар.

Должно получится похожая картина, как у меня:

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

Кстати, настройки стилей можете редактировать непосредственно из самого кода, если внимательно присмотреться, то там видны все заданные ранее параметры (ширина, высота, цвет).

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

На этом у меня все, если остались вопросы я всегда рад помочь. Пока!

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

Как я это делаю? Конечно, благодаря виджету!

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

Вот так виджет вконтакте выглядит на сайте. Можете и «в живую» его увидеть — он как раз находится справа от вас. Прокрутите колесико мышки немного вниз и сами сможете его лицезреть 🙂

Зачем нужен виджет вконтакте

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

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

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

Запомните, что каждый лишний клик мышкой — это очередной барьер, который проходят далеко не все ваши посетители и подписчики.

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

Как создать виджет вконтакте для сайта

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

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

Перед вами откроется страница, внизу которой вы без труда найдете кнопку «Разработчикам»

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

Найдите раздел «Виджеты для сайтов» и кликните на кнопку «Сообщества».

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

Вы увидите перед собой 5 блоков:

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

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

Как установить блок сообщества вконтакте на сайт

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

Зайдите в админку сайта. В панели управления найдите «Внешний вид».

Затем там же кликните на вкладку «Виджеты». Вам нужно перетащить блок «Текст» (произвольный текст или HTML-код) в ваш сайдбар.

В блоке «Текст» можно придумать заголовок к виджету, вставить код и обязательно сохранить. Кстати сказать, заголовок — вещь не обязательная 🙂

Зацепить чем-то привередливых пользователей «ВКонтакте» всё сложнее: аудитория привыкает и к ярким картинкам, и к кричащим надписям. Но что делать, если нужно привлечь внимание подписчиков к важной информации?

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

Выглядит такое обращение вот так:

Ко мне обратились по имени и показали мою аватарку. Приятно, что на концерт зовут именно меня.

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

  • оформить заказ;
  • подписаться на рассылку;
  • почитать FAQ;
  • почитать приятный бонус (например, промокод на скидку).

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

Как установить виджет приветствия в группу «ВКонтакте»

Чтобы установить виджет приветствия, идём в каталог приложений «ВКонтакте» и жмём на кнопку «Добавить» напротив нужного нам приложения Spycat.

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

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

К счастью, Spycat подготовили удобную шпаргалку:

В текстах для виджета приветствия «ВКонтакте» можно использовать несколько переменных:

  1. имя и фамилию: {Firstname} и {Lastname} соответственно;
  2. город проживания: {City};
  3. последнюю указанную в профиле профессию: {Career}.

Обратите внимание, что каждое текстовое поле имеет ограничение до 100 символов, а надпись на кнопке — до 50. Поэтому в Льва Толстого поиграть не получится.

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

Общий совет: не пишите размыто. Пока я писала пост, успела забыть, из какого сообщества взяла этот пример.

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

А теперь расскажу, что можно делать при помощи виджета приветствия «ВКонтакте».

1. Рассылка

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

2. ЧаВо

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

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

3. Приятные бонусы

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

В этом виджете админы группы, которая продаёт духи, применили довольно редкую переменную — число. Видите, где написано 45? Число связывается с CRM-системой магазина. С каждым проданным по акции флаконом число будет уменьшаться.

Конечно, для нас с вами было бы понятнее, если бы вместо «всего 45 ароматов» было бы написано «осталось 45 ароматов». Возьмите себе на заметку такой способ обратного отсчёта.

4. Конкурс

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

Только не берите с них пример написания числительных.

5. Оффер

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

Вот такую милую манипуляцию использует детский благотворительный фонд «С любовью»:

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

Подытожим. Чтобы успешно использовать виджет приветствия «ВКонтакте», нужно:

  1. Определиться с целью и страницей, на которую будет вести виджет.
  2. Прописать призыв к действию на кнопке или в тексте виджета.
  3. Не забыть о пользе, которую виджет должен приносить не только вам, но и аудитории.

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