WordPress ВКонтакте: как интегрировать сайт с социальной сетью, лучшие инструменты

Именно с VK.COM в первую очередь владельцы сайтов пытаются интегрировать свой ресурс на WordPress. Вконтакте – одна из самых популярных соцсетей в Рунете. В этой статье вы найдёте самые доступные способы внедрить виджет ВК на свой ресурс.

skrin69 1

 

 

Меню статьи

 

 
  Какими способами можно интегрировать ВКонтакте на своем сайтее

Как добавить виджеты ВКонтакте на сайт WordPress

Настраиваем и вставляем виджеты:
“Комментарии”   Сообщества”  Мне нравится    Авторизация”   Опросы”   Рекомендации”   “Разрешить писать сообществу”   Подписаться на автора”   Напишите нам   Сообщения сообщества   Запись на стене”   Публикация ссылок”

Плагины WordPress для интеграции VK:
какие плагины позволят решить задачу по внедрению нескольких виджетов.
Рассматриваем функционал двух мощных плагинов:
Easy VKontakte Connect
VKontakteAPI.

Какие ещё плагины могут пригодиться
 Meks Easy Social Share (социальные кнопки «Поделиться»)
 VK-photos (галерея на сайте из фотографий Вконтакте)
 VK Poster Group.

 

Какими способами можно интегрировать ВКонтакте на своем сайте

Интегрировать сайт с соцсетью ВК – значит установить один из 12 типов виджетов:

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

Каждый рассмотрим подробно чуть ниже.

Как добавить виджеты ВКонтакте на сайт WordPress

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

skrin69 2

skrin69 3

Комментарии

Виджет comments widget представляет собой блок для комментирования. Вы наверняка уже видели такой на множестве сайтов.

skrin69 4

С его помощью посетители ресурса могут комментировать статьи без регистрации (только по логину и паролю ВК).

Настраивается виджет прямо на указанной странице ВК.

Для настройки требуется указать следующие параметры. Первым делом необходимо указать сайт, для которого настраивается виджет. Затем – допустимое количество комментариев. Можно поставить среднее значение – 10. Есть опция “расширенные комментарии”. Ширина виджета и, конечно, код для вставки.

skrin69 5

Сообщества

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

skrin69 6

Настройте виджет и скопируйте получивший код, чтобы вставить на определенную страницу или в сайдбар.

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

skrin69 7

Кнопка «Мне нравится»

Кнопка «Мне нравится» должна быть под каждой информационной статьёй на сайте WordPress. VKontakte предоставляет возможность легко добавить такую кнопку.

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

skrin69 8

Авторизация

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

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

skrin69 9Опросы

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

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

skrin69 10Рекомендации

«Рекомендации» – ещё один полезный виджет ВКонтакте для сайта WordPress. Идёт «в комплекте» с виджетом «Мне нравится». «Рекомендации» – это блок с наиболее популярными (судя по оценкам «нравится) материалы блога.

В настройках можно выбрать:

  • количество записей (сколько будет выводится в блоке),
  • период выборки (т.е. за какое время популярные статьи выводить – по умолчанию стоит «неделя»),
  • и формулировку (либо «Понравилось 444 людям», либо «Интересно 444 людям»).

skrin69 11

Разрешить писать сообществу

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

Настройки всего две: выберите сообщество, от которого будут идти сообщения и выберите высоту кнопки (всего три варианта).

skrin69 12Подписаться на автора

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

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

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

Инструмент заменит стандартную форму обратной связи.

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

skrin69 14

Сообщения сообщества

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

skrin69 15

Выберите сообщество и произведите настройки.

skrin69 16

Запись на стене

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

Нужна лишь ссылка (url) на запись.

skrin69 17

Публикация ссылок

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

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

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

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

skrin69 18Плагины WordPress для интеграции VK: пошаговая настройка

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

Easy VKontakte Connect

Если нужен хороший плагин WordPress для группы ВКонтакте – Easy VKontakte Connect идеальный вариант. Функциональность плагина поражает:

  • автопостинг записей в группу (а при необходимости и на стену личного аккаунта);
  • фотоальбом из Вконтакте на сайт;
  • кнопки «поделиться» разных соцсетей: ВК, Одноклассники, Мой Мир, FB, Google+, Twitter, Pinterest;
  • из названных выше доступны: «сообщения сообщества», «напишите нам» (шорткод), «авторизация» (поддерживает и WooCommerce), «комментарии» (приходит оповещение на почту), «сообщества»;
  • часть содержимого ресурса можно скрыть и открывать только подписчикам группы ВК;
  • анализ групп в ВК;
  • возможности для динамичного оформления виджета в сайдбаре: всплывающий, выезжающий.

Чтобы установить плагин, переходим в раздел консоли WP «Плагины», далее – «Добавить новый». В поиск вбиваем название и устанавливаем.

skrin69 19

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

skrin69 20

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

На второй вкладке можно задать точечные настройки для автопостинга:

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

skrin69 21

Третья вкладка – настройки для виджета «Комментарии». Здесь настраивается:

  • ширина и высота блока комментариев. При значении «0» настраивается автоматически.
  • число комментариев: по умолчанию 10, а можно поставить в диапазоне 5-100.
  • запрет/разрешение на прикрепление к комменту файлов;
  • обновление ленты комментариев в реальном режиме (вкл/выкл);
  • размещение виджета на сайте (авто/вручную);
  • кому показывать: всем посетителям, либо только зарегистрированным;
  • служебные настройки – для профи (можно задать разный Page ID для одной и той же статьи, CSS, API).

skrin69 22

Можно импортировать комментарии из группы на сайт. Многие настройки доступны лишь в PRO версии. Просмотреть все оставленные комментарии можно в соседней вкладке – «Обзор комментариев».

skrin69 23

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

skrin69 24

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

skrin69 25

Следующая вкладка – «Анализ групп ВК». Это инструмент анализирования группы ВК. Позволяет узнать интересы подписчиков, повысить эффективность группы и увеличить охват, число подписчиков. Анализирутся посты группы (до 100 штук). Оценивается количество лайков, репостов, комментов.

Вкладка «Сайдбары» позволяет создать свой собственный: с эффектом исчезновения или появления, до или после контента. Как только создадите здесь свой сайдбар, он появится в списке виджетов Вордпресса.

skrin69 26

skrin69 27

Последний пункт меню плагина EVC – «Лог». Здесь отображаются логи действий плагина EVC. На момент установки и первичной настройки здесь никаких записей не будет. Эта функция позволяет фиксировать все события, включая действия с ошибками. Необходимо, чтобы знать, где искать ошибку, как её устранить.

VKontakte API

VKontakte API – продукт известного разработчика плагинов. Эта же команда выпустила: плагин для оптимизации сайта WP; плагин, отключающий комментарии к записям WP, инструменты для транслитерации ссылок и имен файлов, отключения уведомлений администратора, сокрытия страницы входа в систему и другие разработки (скрипты, стили).

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

Настройка VKontakte API для WordPress производится легко. Не нужно быть крутым веб-мастером, чтобы понять для чего, какая кнопка предназначена.

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

skrin69 28

Настроим виджет «Комментарии». Растянем блок на ширину страницы. Настроим уведомления. Дадим возможность добавлять файлы к комментариям.

skrin69 29

Подключим Facebook. Дадим возможность пользователям выбирать, как комментировать, с помощью виджета ВК или посредством обычных комментариев WordPress.

skrin69 30Подключим социальные кнопки сетей ВК, FB, Google+, Twitter, Mail, OK). Доступны кнопки ВК «Нравиться» и «Поделиться», «Лайк» в FB, ретвит в Twitter и т.д.

skrin69 31

skrin69 32

Самые главные настройки в разделе «Настройки логина».

skrin69 33

Добавим сайт в ВК. Настроим приложение. Скопируем его ID, ключ и всё готово.

skrin69 34

skrin69 35

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

skrin69 36

skrin69 37

Какие еще плагины могут пригодиться

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

  • Meks Easy Social Share (социальные кнопки «Поделиться»),
  • VK-photos (галерея на сайте из фотографий Вконтакте),
  • VK Poster Group.

Meks Easy Social Share

Добавляет к записям и страницам кнопки соцсетей «Поделиться». Поддерживает Facebook, Twitter, Reddit, Pinterest, email, Google+, LinkedIn, StumbleUpon, WhatsApp и ВКонтакте. Все эти кнопки появятся на вашем сайте Вордпресс после активации и настройки плагина.

Интерфейс на английском. Но все настройки понятны.

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

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

skrin69 38

Meks Easy Social Share – не единственный такой плагин для WordPress. ВКонтакте share buttons – с такими словами в названии есть много аналогов. Например, плагин VK Share Button.

VK-photos

Плагин позволяет добавить на сайт галерею из фотографий, выложенных в соцсети Вконтакте. Отличает этот плагин Вордпресс («галерея как ВКонтакте», – говорят пользователи) наличие трех встроенных стилей. Один из них действительно сильно похож на фотоальбом Вконтакте.

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

skrin69 39

К сожалению, последнее обновление этого плагина было 2 года назад. Не факт, что он будет адекватно работать на новых версиях WP.

VK Poster Group

VK Poster Group – это плагин WordPress VKontakte для автопостинга записей. Это самый простой инструмент для быстрого постинга записей Вордпресс в группу соцсети ВК. Никаких лишних настроек нет. Бесплатный, но с поддержкой разработчика. Поддержка Woocommerce.

Как настроить? Переходим в настройки после установки и активации плагина. Нажимаем красную кнопку – шаг 1. Нас перебрасывает на Вконтакте, в раздел разработчиков. Здесь нужно создать приложение. Затем перейти в «Настройки» и скопировать ID приложения. После вернуться к настройкам плагина и вставить в соответствующее поле ID.

Сразу после этого будет доступен шаг №2. Нажмите на вторую появившуюся красную кнопку. Перебросит в соцсеть. Нужно согласиться с предложением (дать доступ, чтобы плагин мог публиковать записи от вашего имени). Полученный токен (ключ доступа) вставить в соответствующее поле в настройках плагина VK Poster Group. Далее добавим ID группы, в которой нам нужны записи сайта. И произведем остальные настройки. Сохраним результат. И будем наслаждаться автопостингом.

skrin69 40