Валидация FaceBook комментариев

26 December 2010 #facebook #webdesign #javascript

Во время разработки juev.info столкнулся с проблемой системы комментирования. Так как сайт генерируется статический, то приходиться использовать сторонние решения.

Сначала выбрал Disqus, как наиболее распространенный, простой и развиваемый. Установка не вызвала проблем, но сразу стало заметно, что страницы сайта загружаются намного дольше. Тестирование сторонней системой показало возрастание времени загрузки страницы с 0.3 секунд до 8.6. При повторной загрузке часть информации находиться в кеше браузера, поэтому занимает чуть меньше времени, но все равно порядка 3 секунд.

И тут я вспомнил про систему комментариев, которую предлагает социальная сеть facebook!

Изначально сайт ориентировался на англоязычную аудиторию. Там число пользователей facebook много больше, чем в России, поэтому я особо не озадачивался ограничениями системы. Воспользовался рецептом, описанным на странице Commenting with Facebook Connect. Используется специальный кросс-доменный файл, осуществляющий связку сайта с facebook.

Все заработало, время загрузки страницы упало и довольно существенно, но сами комментарии загружались довольно долго. И появилась еще одна проблема – страницы, на которых размещались комментарии перестали проходить проверку кода на соответствие стандарту xhtml 1.0. Ошибка возникала из-за присутствия тегов fb:comments, которые отсутствуют в спецификации xhtml. Одна единственная ошибка и не понятно, как ее исправлять. В интернете много пишут о ее существовании, но решение найти оказалось очень не просто.

Во-первых, я решил отказаться от кросс-доменного файла и перейти на использование JavaScript SDK, который предлагается самим FaceBook.

Рассмотрим пример создания комментариев для своего сайта. Для этого переходим на страницу Create an App, где создаем новое приложение и в итоге получаем API-код, который будет использоваться в нашем скрипте.

После чего в самом верху страницы меняем блок тега <html>:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">

Была добавлена выделенная строчка. Затем в том месте страницы, где собираемся размещать комментарии, добавляем следующий код:

<div id="fb-root"></div>
<script type="text/javascript">
  var c = document.getElementById('fb-root');
  var e = document.createElement('fb:comments');
  c.appendChild(e);
  window.fbAsyncInit = function() {
    FB.init({appId: 'you-apps-code', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Что интересно, скорость загрузки комментариев увеличилась и довольно существенно. И так как теперь отсутствуют теги, которые не прописаны в стандарте, страница проходит валидацию.