Валидация FaceBook комментариев
Во время разработки 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>
Что интересно, скорость загрузки комментариев увеличилась и довольно существенно. И так как теперь отсутствуют теги, которые не прописаны в стандарте, страница проходит валидацию.