Добавляем виджеты комментариев VK/FB на свою страничку
Создаём приложения
Добавить комменты VK/FB на свой сайт относительно просто – создаём соотв. приложения в VK/FB, получаем их id. Вот адреса страничек для создания приложений: https://vk.com/dev/widgets_for_sites для ВК и https://developers.facebook.com/apps/ для Фэйсбук.
Подробно на этой теме останавливаться нет смысла, так как у них меняется всё очень часто, я имею в виду всякую воду и интерфейс, и каждый раз вникать в одно и тоже под другим соусом не особенно хочется. Но принцип видимо остаётся одним и тем же, и созданное нами несколько лет назад приложения продолжают работать. Честно говоря, назвать приложением это от FB/VK у меня язык с трудом поворачивается, скорее это надстройка над виджетами, контроллер виджетов точнее. Главное – они обеспечивают связь нашего сайта с многотысячной армией пользователей этих популярных сетей.
Верстаем страничку
Итак, получили ид, теперь надо определиться с версткой комментов на своей страничке. Это может быть, например, в виде двух колонок (классы `left` и `right` определяют соответствующий CSS-стиль float):
<div class="social_comments"> <div class="outer"> <div class="inner"> <h3>Ваши отзывы и комментарии</h3> <div class="list clearfix"> <div class="left"> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments('vk_comments', {limit: 20, width: '460', attach: 'photo,video,audio'}, 555); </script> </div> <div class="right"> <div class="fb-comments" data-href="http://atzar.ru/my.html" data-num-posts="20" data-width="460"></div> </div> </div> </div> </div> </div>
Вставка непосредственно комментариев для VK осуществляется вызовом script-функции VK.Widgets.Comments с тремя аргументами: первый должен быть строкой ‘vk_comments‘, второй – объект со свойствами самих комментариев, и третий параметр определяет уникальность комментариев на страничке.
Кол-во комментов на странице определяется свойством `limit` для VK и атрибутом `data-num-posts` для FB. Ширина поля с комментами определяется свойством `width` для VK и атрибутом `data-width` для FB.
Важно! Уникальность комментов для страницы определяется третьим аргументом в VK.Widgets.Comments (это может быть любое целое число) и атрибутом `data-href` для FB. Если вы используете одни и те же уникальные ключи для комментов на своих страницах, на этих страницах будут отображаться одни и те же комментарии (для VK ключом является также сам адрес текущей страницы, который, видимо, добавляется автоматически).
Подключаем движок комментов
Но, сверстав вышеприведенный фрагмент страницы, мы сделали только пол-дела. Что бы комменты заработали – отобразились нужные с возможностью добавлять новые и редактировать старые, надо подключить ещё скрипты от вендоров VK/FB.
Для VK
Указать нижеприведенные строки можно в любом удобном месте страницы, но перед вызовом метода VK.Widgets.Comments:
<script type="text/javascript" src="//vk.com/js/api/openapi.js?_2016-10-31_1544"></script> <script type="text/javascript"> // Подключаем комментарии VK VK.init({apiId: 4386888, onlyWidgets: true}); </script>
Тут надо указать только один параметр apiId – это id нашего приложения ВКонтакте.
Для FB
Смотрите ссылку: https://developers.facebook.com/docs/javascript/quickstart
Вставьте этот код сразу после открывающего тега <body>.
<script> window.fbAsyncInit = function() { FB.init({ appId : '310810409102888', xfbml : true, version : 'v2.8' }); // ловим поступление нового коммента с FB FB.Event.subscribe('comment.create', fb_newcomment); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
Здесь следует указать лишь свой appId, то есть ид своего приложения, созданного на Facebook dev page.
Перехватываем комменты
Мы вызвали метод FB.Event.subscribe(‘comment.create’, fb_newcomment) для перехвата комментариев от Facebook пользователей на нашей страничке, о чём будет сказано чуть ниже. Замечу, что этот метод надо вызывать в теле обработчика fbAsyncInit, иначе вы словите ошибку:
ReferenceError: FB is not defined
Ключевое слово fb_newcomment означает имя функции, где мы будем заниматься обработкой поступления комментариев. Вот содержимое этой функции (мы используем jQuery):
// ловим поступление нового коммента с FB function fb_newcomment(response) { $.ajax({ url: 'ajax.php?new_vkfb_comment', type: 'POST', data: { type: 'fb', text: response.message } }); }
При поступлении нового коммента мы отправляем его нашему серверу, скрипту ajax.php, с особыми параметрами в POST-запросе:
type (строка) – тип комментария ‘fb‘ или ‘vk‘
text (строка) – текст комментария, который мы получаем из свойства response.message
Скрипт ajax.php также получает аргумент `new_vkfb_comment`, свидетельствующий о поступлении комментария, т.к. этот скрипт может применяться нами и для других целей.
Для VK в обработчике document.load ($(document).ready для jQuery) напишем такой метод:
// ловим поступление нового коммента от VK VK.Observer.subscribe('widgets.comments.new_comment', function(num, last_comment, date, sign) { $.ajax({ url: 'ajax.php?new_vkfb_comment', type: 'POST', data: { type: 'vk', text: last_comment } }); } );
Параметры для ajax.php те же самые: type – ‘vk’, text – текст комментария пользователя ВКонтакте.
Наш сервер
Итак, в клиентской части мы организовали отображение и перехват новых комментариев от пользователей Facebook/VKontakte (Фэйсбук/ВКонтакте). Теперь осталось на сервере получить эти комментарии и отправить нам на email.
Этим занимается PHP-скрипт ajax.php, если видит GET-параметр new_vkfb_comment
Вот его код:
if(isset($_GET['new_vkfb_comment'])) { $text = htmlspecialchars(trim(@$_POST['text'])); // текст комментария $type = htmlspecialchars(trim(@$_POST['type'])); // тип: `vk` or `fb` if(empty($text) || empty($type)) die('err'); // ip address and user agent (user browser) $ip = @$_SERVER['REMOTE_ADDR']; $ua = @$_SERVER['HTTP_USER_AGENT']; $vkfb = $type == 'fb' ? 'Фэйсбук' : 'ВКонтакте'; // шлём письмо $letter = HTML::render('letters/sentfbvk', array('TEXT' => $text, 'IP' => $ip, 'UA' => $ua, 'VKFB' => $vkfb)); $subject = "Добавлен комментарий ч/з $vkfb"; eMailIt($letter, $subject, 'myadmin@yandex.ru', 'noreply@ourserver.ru'); }
Метод HTML::render парсит текст, добавляя туда переменные и функции, подробнее о нем можно почитать здесь же, в этом блоге: http://atzar.ru/php-htmlrender-pages/
Функция eMailIt шлёт письмо. Первый параметр – текст письма, второй параметр – тема, третий парметр – кому (email), четвёртый – от кого (email).
Содержимое шаблона sentfbvk.html может быть к примеру таким:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Получен комментарий ч/з %%VKFB%%</title> </head> <body> <h3>Получен комментарий ч/з %%VKFB%%</h3> <p> Комментарий: %%TEXT%% <hr> IP: %%IP%%<br> UA: %%UA%% </p> <br> --<br> Наша подпись </body> </html>
Конечно, в этот шаблон можно добавить другие данные – адрес страницы, откуда отправлен комментарий, к примеру.
На этом всё, раскланиваюсь и говорю “Спасибо за внимание!”.
P.S. На закуску
И на закуску приведу способ динамически обновлять комментарии на текущей странице, если мы поменяли её содержимое ч/з Ajax, и нам надо отобразить обновлённые комменты:
... var num = $('#uniq').val(); ... // обновим комментарии VK & FB setTimeout(function() { $('#vk_comments').empty(); VK.Widgets.Comments('vk_comments', { limit: 20, width: '460', attach: 'photo,video,audio' }, num); $('.fb-comments').empty().attr('data-href', 'http://atzar.ru/my.html#' + num); FB.XFBML.parse(); }, 100);
Обратите внимание на переменную num – её надо сохранять и восстанавливать отдельно, возможно в скрытом input‘е на страничке, ибо она обеспечивает уникальность отображаемых комментов (как об этом говорилось выше).
DIV’ы с ид vk_comments и классом fb-comments содержат комментарии, их мы сперва чистим (jQuery метод empty).
Комментарии ВК обновляются новым вызовом метода VK.Widgets.Comments, для ФБ – вызовом метода FB.XFBML.parse(). Так как мы поменяли ключ (num), на странице должны появиться новые комментарии.
Весь код облекли в setTimeout для асинхронного отображения, можно поиграться с числом 100, возможно, сделать его чуть больше.
Чао, адьёз, до свиданья ещё раз! Стакан мёда или медовухи на столе, с маслом и хлебом в кадушке с пивом.