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

  Автор:
  5579
Как установить на блоге комментарии вконтакте

Продолжаю рассказывать о фишках, которые встроены в шаблон AB-Inspiration, и о том как Вы это можете реализовать на обычном шаблоне для WordPress.

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

И начнем мы с установки виджета Комментариев Вконтакте.

Как Вы знаете комментарии на блоге очень важный элемент блога. Можно ли блог называть блогом если на нем нет возможности оставлять комментарии? Скорее нет. Такой сайт будет чем угодно, но только не блогом.

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

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

В шаблоне AB-Inspiration уже встроены комментарии Vkontakte. Чтобы они появились на блоге, нужно:

1. вставить ID приложения Вконтакте в «Настройках шаблона» в разделе «Вставки»
Снимок экрана 2014-10-30 в 21.30.15

2. в разделе «Настройка статей» выбрать как будут отображаться комментарии — в виде вкладок или подряд.Снимок экрана 2014-10-30 в 21.31.38

Если у Вас блог не на шаблоне AB-Inspiration, то Вам нужно установить виджет комментариев Вконтакте.

Подключение сайта Вконтакте

1. Зайдите в свой аккаунт Вконтакте под своим логином и паролем
2. Перейдите по ссылке http://vk.com/dev/Comments
3. Из выпадающего списка Сайт/Приложение выберите «Подключить новый сайт»
4. Заполните поля формы:

  • Снимок экрана 2014-10-30 в 16.46.15Название сайта — впишите название вашего блога
  • Адрес сайта — укажите адрес блога
  • Поле основной домен заполнится автоматически (домен вашего блога)
  • Из выпадающего списка Выберите тематику блога
  • Нажмите «Сохранить«

5. Во всплывшем окне введите Код с картинки

Снимок экрана 2014-10-30 в 16.56.59

 

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

6. Далее заполните поля настройки комментариев

Снимок экрана 2014-10-30 в 16.58.19

  • Выберите количество комментариев которое будет отображаться на блоге
  • Поставьте галочку «Медиа» для возможности оставлять в комментариях Графити, Фотографии, Видео, Аудио и Ссылки
  • Укажите ширину блога комметариев Вконтакте.

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

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

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>
<script type="text/javascript">
 VK.init({apiId: 2116043, 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: "520", attach: "*"});
</script>

Код состоит из 2-х частей:

1-ю часть нужно вставить в шапку блога в зоне head в файле шаблона header.php.

2-ю часть нужно вставить там, где Вы хотите, чтобы отображались комментарии. Обычно в конце каждой статьи. За вывод отдельной статьи отвечает файл single.php.

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

Вставка кода в header.php

1. Скопируйте первую часть кода (Ваш код будет отличаться ID номером. В моем случае это 2116043, у Вас будет другой номер.)

<script type="text/javascript" src="//vk.com/js/api/openapi.js?115"></script>
<script type="text/javascript">
VK.init({apiId: 2116043, onlyWidgets: true});
</script>

2. зайдите в админку блога в раздел «Внешний вид» — «Редактор»

3. Откройте файл header.php для редактирования

4. Найдите в коде закрывающий тег </head>

5. Вставьте код перед этим тегом

6. Сохраните изменения

Снимок экрана 2014-10-30 в 22.01.01

Вставка кода в single.php

1. Скопируйте вторую часть кода

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

2. В разделе «Внешний вид» — «Редактор» откройте файл single.php

3. Найдите в коде функцию comments_template(); — эта функция отвечает за вывод встроенных комментариев на блоге.

4. Вставьте код виджета «Комментарии Вконтакте» до или после функции comments_template();

Важно! Функция comments_template(); это PHP. Код комментариев Вконтакте это HTML и Javascript. Необходимо вставить код Вконтакте либо до открывающего кода php — <?php или после закрывающего — ?>.

Если Вы случайно установите код между этими тегами, блог не будет работать. Давайте посмотрим на примере:
Снимок экрана 2014-10-30 в 22.08.14

Это пример кода в файле single.php. Он у Вас может выглядеть немного по-другому. Важно понять принцип.

После функции comments_template(); еще идет фигуная закрывающая скобка, затем endwhile; и наконец закрывающий тег php ?>. Вот после этого тега и нужно вставить вторую часть кода комментариев Вконтакте.

В готовом виде должно выглядеть так:

Снимок экрана 2014-10-30 в 22.20.42

Сохраните изменения. Теперь можно посмотреть что получилось.

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

Предыдущие статьи на тему «Фишки без плагинов»:

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

   3 голоса
Средняя оценка: 5 из 5
Вы находите данную статью полезной или интересной? Поделитесь ею, пожалуйста, с другими - просто нажмите на кнопки ниже:
Самые Важные Оповещения Блога + Четкий Комплект Ценных Подарков ДЛЯ БЛОГЕРОВ И ФРИЛАНСЕРОВ
Оставьте свой комментарий:
20 комментариев
  1. Просто отличный материал! Анфиса — от души спасибо! У меня получилось!!! Причем, я давненько думала об установлении формы комментариев ВК, но нашла пару статей, где описывали такое решение через плагины и — бросила искать… А через скрипт — совсем другое дело! Посмотрим, что из этого выйдет =)

  2. Пока убрал комментарии от Вконтакте!!))
    Но как только понадобятся, вернусь к этой статье))

  3. Анфиса, спасибо за подробное описание. Я все установила, но чет ничего не вижу. Как должно выглядеть в итоге?:)

  4. Класс! Все получилось благодаря вашей инструкции! Большое спасибо!

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

  6. Спасибо, совершенно ничего сложного как оказалось нет, установила виджет группы к себе за пару минут, всё работает прекрасно!

  7. Я давно уже поставил комменты ВК через плагин и забыл про это. А сейчас чего то вспомнил об этом и думаю — чего это я плагином сервак нагружаю и решил заняться — нашёл Вашу статью и всё быстро сделал — красота! А вам большое спасибо!

на Блоге
в Фейсбук
в Вконтакте