Добавляем виджет комментариев Вконтакте (VK) для WordPress

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

Введение

В этой записи я рассмотрю два способа:

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

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

AnyComment: плагин комментариев с авторизаций через соц. сети

Предлагаю вам убрать всю головную боль и установить AnyComment.

На это есть несколько причин:

бесплатный
авторизацию через ВК, Facebook, Twitter, Google, Github (скоро будут одноклассники, Dribble и др.)
оставить комментарий без перезагрузки страницы
статистика комментариев

подробнее можно почитать тут

Детальная установка плагинов описана под заголовком ниже, лишь в данном случае вводите «AnyComment» в поиске для установки этого плагина.

Плагин для VK комментариев

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

Инструкция к установке:

Войти в админ панель
Зайти в «Плагины» → «Добавить новый»
В правом верхнем углу есть поле для поиска «Поиск плагинов…», введите «Bologer VK Comments» и нажмите Enter, в результате вы должны увидеть следующий плагин:
Так же, вы можете скачать Bologer VK Comments архивом и установить его старым добрым способом
Нажмите «Установить» и после установки «Активировать»
В левой колонке меню у вас появится «ВК Комментарии» с иконкой социальной сети
Нажмите на ссылку плагина. Внутри вы увидите инструкцию по настройку. В целом, вам нужно будет зайти на страницу разработчиков ВК, скопировать код, вставить в специальное поле и плагин автоматически поставить поставленные ваши настройки на стороне соц. сети на вашем блоге

Это мой личный плагин и я буду вам благодарен если вы оставите хороший отзыв или «5 звезд» :)

Функции

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

Код. Инструкция по установке

Заходим на страницу с виджетами и выбираем «Комментарии» (или кликните тут).
В выпадающем списке «Сайт/приложение» выбираете «Подключить новый сайт» или выбираете текущий сайт (если вы уже добавляли). При добавлении вам нужно указать «название сайта», «адрес», «основной домен» и выбрать тематику. В моем случае выбираю и ввожу следующее: «Bologer.ru — мой блог», «http://bologer.ru», «bologer.ru» и «ИТ (компьютеры и софт».
Далее выбираем «Количество комментариев» для отображения. Если вы выберете, например, пять комментариев, а у вас уже добавлено больше, то сначала при загрузке страницы покажется 5 комментарием и далее вы можете нажать нажать «Показать еще», чтобы подгрузить остальные.
Выбираем нужно вам «Медиа» или нет. Это например добавление граффити, фото, аудио видео и ссылки.
Устанавливаете ширину блока комментариев.

И далее у вас автоматически сгенерировался код для вставки на сайт.

Мы не будем просто вставлять код, так как это не правильно. Я покажу вам как это делать в стиле WordPress.

Добавляем код виджета VK

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

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?136"></script>

<script type="text/javascript">
  VK.init({apiId: XXXXXXX, onlyWidgets: true});
</script>

<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "*"});
</script>

Как вы можете заметить, он разделен на 2 части.

Первая — это скрипты (строки 1-6), которые вам нужно подгрузить для отображения комментариев. Вместе «XXXXXXX» у вас будет отображаться уникальный номер вашего сайта.

Вторая — это часть кода, которая понадобится для отображения комментариев.

Создаем функцию в functions.php

Копируем функцию, которая находится ниже и открываем файл functions.php, который находится внутри вашей темы.
Спускаемся в самый низ файла и добавляем следующую функцию.

Внимание! Вместо «ВАШ_ID» пишите ID который написан в вашем коде для вставки.

function vk_comments_api() {

  if( is_single() ) {
    echo '<script type="text/javascript" src="//vk.com/js/api/openapi.js?136"></script>';
    echo '<script type="text/javascript">
        VK.init({apiId: ВАШ_ID, onlyWidgets: true});
      </script>';
  }
}
add_action('wp_head', 'vk_comments_api');

В этой коде я добавил два скрипта в <head></head> вашего WordPress сайта. Но я не просто их добавил. Я сделал условие, которые добавит скрипты только в том случае, если запись открыта полностью. А зачем нам нужно грузит сайт лишними скриптами? Верно?

Добавляем комментарии в comments.php

Далее вам нужно открыть файл comments.php и найти строчку похожую на эту: <div id="comments" class="comments-area"> , которая говорит о начале стандартных WordPress комментариев.

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

<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "*"});
</script>

И все готово! Комментарии должны быть успешно установлены.

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

Вывод

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