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

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

Что даст виджет комментариев Вконтакте?

«Зачем подключать второй блок комментариев на сайт, если можно пользоваться родными комментариями WordPress?» — спросите вы. Есть у меня несколько убедительных ответов на этот вопрос. Во-первых, я выбрал социальную сеть Вконтакте не просто так, потому что её аудитория — это десятки миллионов пользователей. Будьте уверены, что львиная доля посетителей вашего сайта зарегистрирована Вконтакте. Для нас это только плюс, так как оставлять комментарии через виджет Вконтакте намного удобнее и быстрее. Уверяю вас, пользователи это оценят.

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

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

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

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

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

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

Внимание!

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

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

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

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

  1. Этот код мы поместим в шаблон header.php:
    <!-- Put this script tag to the <head> of your page -->
    <script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script>
    
    <script type="text/javascript">
      VK.init({apiId: 4175669, onlyWidgets: true});
    </script>
  2. А вот этот блок кода нужно будет вставить в шаблон — single.php:
    <!-- 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, attach: "*"});
    </script>

Как всегда, переходим на страницу редактирования шаблонов: Внешний вид->Редактор. Для начала, добавим первый фрагмент кода в шаблон header.php. Сразу после тега <head> вставляем первый фрагмент кода, вот что у вас должно получиться:

  1. Открытый тег <head>.
  2. Код, который мы скопировали со страницы создания виджета.
  3. Сохраняем все изменения.

Теперь перейдем ко второму фрагменту кода. Его нужно вставить в шаблон single.php. Как я говорил в других статьях, этот шаблон используется для отображения записей. Но вам еще нужно найти место, в которое вставить блок кода. Предлагаю сделать поиск по шаблону single.php. Искать нужно по следующему слову — comments, что в переводе с английского означает — комментарии. Таким образом вы сможете найти родной блок комментариев WordPress. И, уже исходя из этого будете решать куда вставлять код виджета комментариев, перед родными комментариями WordPress или — после.

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

  1. Нативный блок комментариев
  2. Блок кода, который будет отображать комментарии Вконтакта

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

Как работает виджет комментариев Вконтакте?

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

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

12 Комментариев

  1. Виктор 4 года назад

    Как раз искал инфу про этот виджет. Обязательно добавлю на свой сайтик. Мне кажется, оттуда люди комментируют охотнее. Без капчи и имени. А про незаметную «Отобразить на Вашей странице» даже не догадывался. За это отдельное спасибо

    • Автор
      Денис 4 года назад

      Всегда пожалуйста. /wp-content/plugins/wp-monalisa/icons/wpml_yes.gif

  2. Света К. 4 года назад

    Тоже, как и Виктор, не знала о дополнительной кнопочке. Раздумываю, стоит ли добавлять этот виджет на свой сайтик. Плюсы, несомненно, есть. Но 2-ое поле для комментариев считаю будет лишним, а от стандартного пока не хочу отказываться /wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

  3. Оксана 4 года назад

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

  4. Дмитрий 4 года назад

    Здравствуйте Денис! Еще раз спасибо за помощь в автопостере.

    Скажите пожалуйста: я установил виджет на свой тренировочный сайт в вордпрессе: http://121212.capitalika.ru/?p=206#more-206, но при добавлении коментов — сами коменты как бы начинают конфликтовать с «Мета» и «Метки»/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif в результате чего — при добавлении комента он периодически дергается — то появляется — то исчезает./wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif

    Подскажите пожалуйста — что я могу сделать, чтобы этого не было.

    Спасибо./wp-content/plugins/wp-monalisa/icons/wpml_bye.gif

    • Автор
      Денис 4 года назад

      Я оставил у вас несколько комментариев — все нормально работает.

  5. Дмитрий 4 года назад

     http://youtu.be/PCJvdF2FQW4.

    • Автор
      Денис 4 года назад

      Скорее всего, там косяк в верстке. Чтобы это исправить — нужно копаться в коде шаблона и эксперементировать.

  6. Никифор 3 года назад

    Здравствуйте. Интересует такой вопрос- посетитель оставляет комментарий в виджете, а я об этом никак не оповещаюсь. Соответственно, не могу ответить вовремя. Это можно как-то исправить?

  7. Сергей Суховерхов 3 года назад
  8. Стас 3 года назад

    Я лично http://web-ratings.ru/webmasters виджет стал юзать.

    Плюс в том что он простой + отзывы отображаться сразу на странице (не переходя на сторонний сайт)

  9. Pavel 3 года назад

    Здрасти!

    Подскажите как отключить комментирование вконтакте на странице?

Оставить комментарий

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

*

/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img src="" alt="" class="" width="" height="">