Комментарии VKontakte/Facebook – перехватываем и отправляем нам на почту

Добавляем виджеты комментариев 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, возможно, сделать его чуть больше.

Чао, адьёз, до свиданья ещё раз! Стакан мёда или медовухи на столе, с маслом и хлебом в кадушке с пивом.

Царский блог

Философия программирования