Комментарии вконтакте и фейсбук на wordpress сайте

Как добавить комментарии от Вконтакте и Фейсбук на WordPress сайт + кнопки соц.сетей


Меня многие просили подготовить материал о том как добавить комментарии от социальных сетей Вконтакте и Фейсбук на сайт созданный на движке WordPress. И вот наконец-то я выбрал время и подготовил эту статью. Сразу хочу отметить, что у вас должны быть аккаунты в обеих социальных сетях, если их нет, то сначала зарегистрируйтесь.

Итак, приступим.

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

Добавить плагин

После этого прописываем в поисковой строке название плагина — Vkontakte API и нажимаем клавишу Enter на клавиатуре. Находим наш плагин и жмем кнопку «Установить»

Ищем плагин

После того как плагин установится, нажимаем по ссылке «Активировать плагин». Теперь нам нужно его настроить.

Настройки плагина

После установки плагина в меню консоли управления сайтом появился новый пункт «Vkontakte API», переходим в него. Перед нами панель настроек. В данной панели 4 вкладки, разберем их по порядку.

Панель настроек

Вконтакте

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

Ссылка на создание приложения

Здесь нам нужно указать название нашего приложения и выбрать тип «Веб-сайт». Название можете указывать любое — его никто кроме вас не увидит. После этого нужно указать адрес нашего сайта и базовый домен, т.е. тот же адрес только без протокола http://. После того как заполнили все пункты, нажимаем кнопку «Подключить сайт»

Создаем приложение

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

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

ID приложения и защищенный ключ

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

Настройки комментариев Вконтакте

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

Далее идет блок «Вход» — эта функция позволяет вашим посетителям регистрироваться на сайте через социальную сеть вконтакте. Я лично регистрацию на своем сайте не ставил, но возможно для кого-то эта функция будет полезна.

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

Кнопка мне нравится вконтакте

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

Разница между мне нравится и сохранить

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

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

Кнопки и комментарии

Facebook

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

Ссылка на создание приложения

Здесь может быть два варианта:

1. Если вы не привязывали номер мобильного телефона к facebook, то вам предложат указать номер телефона и подтвердить его через смс. К сожалению, я не могу показать эти настройки т.к. мой номер давно привязан к моему аккаунту, но там нет ничего сложного. Нужно просто указать номер, получить код по смс, ввести этот код и отправить. После этого у вас будет все как во втором варианте.

2. Ваш номер привязан и вы увидите следующую картинку:

Создать новое приложение

Нажимаем по зеленой кнопке «Create a New App», нам откроется всплывающее окошко, в котором нам нужно заполнить некоторые поля (см. скриншот ниже):

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

2. Придумываем Namespace. Честно говоря, я так и не понял для чего нужен этот пункт. Насколько я понял, это что-то вроде логина, вообщем, здесь нужно указать УНИКАЛЬНОЕ слово латинскими символами (не менее 6). В дальнейшем это слово нам не понадобится, поэтому можно просто указать набор букв — это не важно.

3. Выбираем категорию. Категорию можно выбрать любую — это никак не влияет на работу комментариев.

4. Жмем по кнопке «Создать приложение»

Называем приложение

После этого появится всплывающее окошко, в котором нужно заполнить каптчу (ввести символы с картинки) и нажать «Ок».

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

Копируем ID приложения

Следующим шагом нам нужно указать ID администратора, для того чтобы мы могли управлять комментариями. Чтобы получить ID админа, нужно перейти на свою страницу в facebook. Здесь тоже два варианта:

1. В адресе вашей страницы указаны цифры и выглядит он примерно так: http://facebook.com/100001117382458. Просто копируете эти цифры — это и есть ID администратора, т.е. ваш ID.

2. Адрес вашей страницы имеет примерно такой вид: https://www.facebook.com/OpekunAlex, т.е. вместо цифр указан буквенный логин, тогда вам нужно воспользоваться вот этим сервисом — http://findmyfbid.com

Просто указываем ссылку на наш профиль в facebook и жмем на кнопку «Find numeric ID», копируем появившийся цифровой идентификатор, возвращаемся к настройкам плагина и вставляем в соответствующее поле.

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

Сохраняем настройки

На этом настройки facebook закончены, можно перейти на сайт и посмотреть что у нас получилось.

Кнопка мне нравится и комментарии

Социальные кнопки

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

Просто выставляете напротив нужной кнопки «Показывать», также как мы делали для кнопок Вконтакте и Фейсбук. Я обычно добавляю кнопки twitter и mail.ru с одноклассниками. После того как выбрали необходимые кнопки, не забудьте сохранить изменения. Если у вас есть твиттер, можете добавить свой аккаунт, тогда при нажатии на кнопку твиттера у ваших посетителей будет добавляться ссылка на ваш твиттер и если они твитнут ваш пост, то все их подписчики в твиттере увидят ссылку на ваш твиттер и возможно подпишутся. На этом здесь настройки закончены.

Социальные кнопки

Оставшаяся вкладка «Остальное» нас не интересует. Т.о. образом мы с вами разобрались как добавить комментарии от социальных сетей Вконтакте и Фейсбук на сайт созданный на движке WordPress + узнали как добавить кнопки социальных сетей на сайт.

P.S. Если у вас остались вопросы или что-то было непонятно, пишите в комментариях что именно не получилось, я постараюсь вам помочь.


Комментарии:

35 Комментариев. Оставить новый

Автору спасибо.

Ответить

Супер, спасибо большое!

Ответить
Сергей
1 Июль 2016 20:10

Спасибо за урок, очень помогли! Вопрос не по теме))) В какой программе записывали видео? Чтоб карандашиком выделять? Спасибо!

Ответить
Опекун Александр
1 Июль 2016 20:18

Рад, что вам помог мой урок:)
Видео записываю в программе Camtasia Studio. Карандашик — это стандартная функция этой программы.

Ответить

Никак не могу увидеть какие добавлены комментарии в Фейсбук и удалить лишние, В Панеле Управления — Комментарии — Социальные комментарии видны только комментарии от Вконтакте. У меня плагин текущей версии 3.32.5.9, в которой для вывода комментариев Вконтакте требуется сделать добавки в header.php и в single.php от деланья комментариев из виджета. Может есть какой-то способ увидеть все добавленные комментарии и от Фейсбук и удалить лишние.

Ответить
Опекун Александр
6 Сентябрь 2016 16:41

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

Ответить

Интересно, у меня есть главные фотографии и ВК и в ФБ, но раньше моего комментария, почему-то нет аватара?

Ответить
Опекун Александр
6 Сентябрь 2016 16:41

Не знаю, возможно ошибка.

Ответить

Полезная статья, спасибо)

Ответить

Изменилось название плагина с Social_API_3.32.5.9 на VKontakte API версии 3.32.5.9 и стал работать. Надо бы только, если пользователь только в одной социальной сети зарегистрирован, давать только один вариант комментария из неё. А если в двух – давать только один комментарий из той СС, которая в настройках указана первой.

Ответить
Опекун Александр
10 Ноябрь 2016 16:42

Ну это вопросы к разработчику. Я просто рассказал как этот плагин настроить.

Ответить
Владимир
26 Ноябрь 2016 17:54

Спасибо за инфу!

Ответить
Опекун Александр
26 Ноябрь 2016 18:03

Пожалуйста:)

Ответить

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

Ответить
Опекун Александр
6 Январь 2017 09:29

Ирина, вероятно ваша тема конфликтует с плагином. Попробуйте сменить тему оформления и посмотреть появятся комментарии или нет. Так мы поймем в чем проблема. Чаще всего проблема в теме оформления.

Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *