Пользователь
0,0
рейтинг
12 октября 2011 в 18:59

Виджет комментариев вконтакте для вашего сайта и хранение количества комментариев на сервере из песочницы

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


1.Регистрация cайта вконтакте


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

api_id — идентификатор нашего сайт как приложения в вконтакте

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

P.S: Вконтакте предоставляет упрощенный способ регистрации приложения для виджета «Комментарии», но в этом случае невозможно получить ключ api_secret(по крайней мере я битый час искал способ его получить и… не нашёл), который необходим в случае хранения количества комментариев. Поэтому не ленимся и создаём приложение.

2.Создание виджета


Создаём сам виджет, не имею желания дублировать документацию к виджету, скажу что в итоге должно получиться что-то вроде этого:
    VK.init({apiId: %ВАШ_api_id%, onlyWidgets: true});
    VK.Widgets.Comments("vk_comments", {limit: 10, width: "1000", attach: "*", onChange: addCommentCallback},   "post_<?php echo $post['id']?>");


что такое onChange, читайте дальше; Третий параметр — это ID данного виджета(блока) комментариев, если его не указывать в качестве id используется md5-хэш от location.href(ссылки на эту страницу). Мне это не подошло, так как на один элемент у меня указывало несколько разных ссылок. На этой стадии виджет уже работает, теперь нужно сообразить отображение количества комментариев.

3.Передача данных о количестве комментариев на сервер


Очевидно, что самым удачным вариантом является хранение количества комментариев в базе данных, даже если мы не храним сами комментарии, так как получение количества комментариев через API вконтакте будет слишком сильно тормозить работу сайта. Я храню количество комментариев в отдельном столбце таблицы с данными. Вопрос только в том, как держать в базе значение в обновленном состоянии и избежать рассинхронизации.
API виджета комментария имеет параметр onChange. Функция, которую содержит параметр onChange, вызывается каждый раз при событии удаления/создания комментария. Колбек-функция onChange вызывается с четырьмя параметрами

num — количество комментариев
last_comment — последний комментарий
date — дата
sign — ключ

Это нам и нужно. Теперь пишем саму функцию addCommentCallback, она будет делать ajax запрос, передавая все 4 параметра выше, а также id записи на сервер. Вот что получилось у меня(используется jquery):

function addCommentCallback(num, last_comment, date, sign){
    $.post("%ССЫЛКА_НА_СТРАНИЦУ_ОБРАБОТКИ_КОММЕНТАРИЯ%",{
         type: 'vkontakte',
         num: num,
         last_comment: last_comment,
         date: date,
         sign: sign,
         id: "<?php echo $this->post['id']?>"
    });
}


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

4.Валидация данных


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

php-код, обрабатывающий запрос, и пишущий в базу количество комментариев:
$post = $_POST;
if (!isset($post['num'])){
     $error = 'не указано количество';
}
else{
    $apiSecret = %ВАШ_API_SECRET%;//(да, за этим мы и прошли полную регистрацию)
    $hash = md5($apiSecret.$post['date'].$post['num'].$post['last_comment']);// до того, как обновить количество комментариев, мы получаем md5 - хэш от параметров api_secret, date, num, last_comment:
    if (strcmp($hash, $post['sign']) == 0){//проверяем что хэши совпадают
        //тут код сохранения в базу
    }
    else{
        $error = 'не совпадает хэш';
    }
}

Вот и всё! При желании, можно в базу сохранять не только количество комментариев, но и сами комментарии. Надеюсь что статья оказалась полезной и я не потратил зря время.
Дима @SuperKozel
карма
–1,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое

Комментарии (6)

  • 0
    А можно ли как-нибудь использовать данный виджет, только со своим оформлением?
    • 0
      Я менял перекрытием стилей и инструменты веб-разработчика в Хром. В Лисе — firebug.
  • 0
    документация сказала что нельзя. Если очень хочется, то можно к iframe у виджета подключить свой css
    stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
    • 0
      Контакт не даст этого сделать.
  • 0
    Спасибо. Пригодилось
  • 0
    Кстати нашел как достать ключ приложения, которое зарегистрировано через упрощенную форму
    Входим в Приложения — затем наверху-справа Настройки — там листаемся в самый низ до раздела Администрируемые приложения — напротив нужного нажимаем Редактировать и попадаем на страницу где есть Защищенный ключ

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