Яндекс.Метрика

    Песочница

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

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

    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 = 'не совпадает хэш';
        }
    }
    

    Вот и всё! При желании, можно в базу сохранять не только количество комментариев, но и сами комментарии. Надеюсь что статья оказалась полезной и я не потратил зря время.