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

Введение

Я достаточно долго экспериментировал над виджетом комментариев вконтакте и пришла пора поделиться с вами своими знаниями. О плюсах рассказывать не буду – они и так хорошо расписаны разработчиками на странице подключения виджета. Единственное, что некоторые из них немного утратили свою актуальность после окончательного копирования виджета комментариев фейсбука, например вирусность. Поскольку многие теперь не будут «транслировать комментарий на стену и в ленту друзей» убрав галочку, эффективность данного пункта значительно снижается. Все же остальное – привычность, отсутствие надобности регистрироваться и вводить лишние данные кроме самого комментария – действительно очень неплохо.
Но не все так хорошо, как хотелось бы. Сколько слежу за этим виджетом, время от времени с ним происходят какие-то проблемы – то комментарии исчезают, то дизайн полностью изменяется (из за чего «едет» и дизайн на сайте), то callback() функция не работает… к этому еще добавить конфликты с разными браузерами и JS-фреймворками, неиндексируемость комментариев и получим полную картину. Короче говоря, над виджетом идет постоянная работа, но испытания почему-то проводят не на локальном сервере, а сразу на пользователях

Кому рекомендован виджет

Из-за описанных выше проблем рекомендую 10 раз подумать перед установкой и даже после этого не устанавливать данный виджет без особой необходимости. Это, например, HTML-сайты, которые и хотели бы предоставить возможность пользователям высказаться, но не могут это сделать другими способами. Или сайты, ориентированные исключительно на детскую и молодежную тематику – сегодня каждый подросток имеет аккаунт в контакте, чего нельзя сказать о более взрослой аудитории.

Установка виджета

Подробно описывать процесс установки тоже не буду, тем более что для разных CMS он может различаться, – остановлюсь лишь на самом главном. Для начала заходим на страницу подключения виджета и выбираем «подключить новый сайт».
Название сайта – любое, это исключительно для себя.
Адрес сайта – полный адрес вашего сайта с указанием протокола, например: http://chiliec.ru/.
Основной домен сайта – просто домен, без лишних символов, например: chiliec.ru Здесь главное не дописать слеш «/», поскольку он дописывается сам при копировании адреса сайта.

Нажимаем сохранить и копируем код на сайт, в соответствие с комментариями.

Коллбек-функция onChange

Наконец-то можно приступить к самому интересному. Рассмотрим процесс записи комментариев и их количества в базу данных, чтобы, например, показывать наиболее комментируемые статьи или в последствие оказаться от использования виджета с минимальными потерями. Просто приведу код:

Исходный код

<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 30, width: "500", autoPublish: 0, onChange: addComment});    
 
function getXmlHttp(){
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
      xmlhttp = false;
    }
  }
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}
 
function addComment(num, last_comment, date, sign) {
var str=document.URL;
var patt=/id=d/i
var result=patt.exec(str); // из URL получаем id новости
 
var xmlhttp = getXmlHttp()
xmlhttp.open('GET', 'update_comments.php?num='+num+'&'+result+'r='+Math.random(), true);
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       //alert(xmlhttp.responseText);
         }
  }
};
xmlhttp.send(null);
    }                
</script>

update_comments.php

<?php 
require("wp-config.php"); // сюда надо вписать путь к файлу подключение к MySQL
 
if (isset($_GET['id']) && isset($_GET['num'])) {
 
$id = mysql_real_escape_string(htmlentities($_GET['id'])); 
$num = mysql_real_escape_string(htmlentities($_GET['num'])); 
 
mysql_query("UPDATE `wp_posts` SET `vk_comments`='".$num."' WHERE `id`='".$id."'") or die(mysql_error()); 
 
echo"$num";
 
} else { echo"Ошибка!"; }
 
?>

Кроме такого способа сохранения, есть еще способ подписаться на события с помощью VK.Observer:

Исходный код

VK.Observer.subscribe('widgets.comments.new_comment', function(num, last_comment, date, sign){
  // При добавлении нового комментария сработает эта функция 
  // num - количество комментариев
  // last_comment - текст последнего комментария
  // date - текущая дата в формате ISO 8601 (например, 2004-02-12T15:19:21+00:00)
  // sign - контрольная сумма md5 от конкатенации 4х строк: api_secret, date, num, last_comment.
  console.log(num);
  console.log(last_comment);
  console.log(date);
});