11. Как установить комментарии Facebook в шаблон Blogger

Сегодня я расскажу о том, как установить плагин для комментариев популярной социальной сети Facebook в шаблон Blogger. Facebook занимает лидирующие позиции в мире среди социальных сетей, поэтому определённо есть смысл поэкспериментировать с таким ресурсом.

Внедрить плагин комментариев Facebook в шаблон Blooger довольно просто. Чтобы получить код для установки плагина, перейдите на страницу http://developers.facebook.com/docs/reference/plugins/comments/.

Введите адрес сайта, количество отображаемых комментариев, установите ширину блока. Чтобы получить код для вставки, нажмите кнопку Get Code.

Первую часть кода нужно вставить сразу после тега <body>:

<body>
<div id='fb-root'/>
<script>(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/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Вторую часть кода нужно вставить там, где должен отобразиться блок с комментариями. Если у вас установлен один из стандартных шаблонов Blogger, нужно найти в шаблоне строчку кода <b:includable id='comment_picker' var='post'> и после неё вставить вторую часть кода плагина. В моём случае там уже установлен код виджета комментариев ВКонтакте. Код плагина Facebok я разместил после кода ВКонтакте. Вот так:

<b:includable id='comment_picker' var='post'>
<h4>Комментировать в ВКонтакте</h4>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id='vk_comments'/>
<script type='text/javascript'>
VK.Widgets.Comments("vk_comments", {limit: 10, width: "496", attach: "*"});
</script>
<h4>Комментировать в Facebook</h4>
<div class='fb-comments' data-href='http://noproblemblogger.blogspot.ru/' data-num-posts='10' data-width='496'/>

Результат вы можете видеть внизу страницы.

Обновление от 07.01.2012. Работа над ошибками. Понаблюдав за работой блока комментариев Facebook, я понял, что он работает не так, как мне хотелось бы. Оставленные пользователями комментарии, привязывались не к какому-то конкретному сообщению, а к блогу в целом. В результате все оставленные комментарии повторялись на всех страницах блога. Всё потому, что в поле URL to comment on я указал адрес блога в целом. А фактически это должен быть адрес конкретной отдельно взятой страницы. Вспомнив, как устроены шаблоны Blogger, я нашёл решение. Оно заключается в следующем. В код, который нам выдаёт Facebook, нужно внести изменения:

____________________________________________________________
Появляется нехорошая ошибка:

Error parsing XML, line 884, column 64:
The reference to entity "version" must end with the ';' delimiter.

Похоже, что что-то интерпретирует ваш документ как XML, а не HTML. XML намного строже HTML - одно из правил заключается в том, что амперсанды (&) имеют особое значение. Они означают, что "здесь идет XML-объект", который является особым символом. Например, вы можете ввести ", чтобы вставить " или > для вставки > в ваш документ.

В этом случае ваш код интерпретирует &version в строке 6 как начало одного из этих объектов. Если вы обновите строку 6 следующим образом:

js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
Затем вы должны обнаружить, что ошибка исчезает.

А она не исчезла!

Просто эта проблема была самой. Ответ выше не устранил проблему. Кнопки Facebook не загружаются. Ниже приведено исправление, которое я реализовал для разрешения как ошибки 500, представленной на сервере, так и для правильной загрузки кнопок.

Проблема заключается в том, что если вы используете что-то вроде Thymeleaf, которое использует XML. HTML, добавленный на страницу, должен быть правильно сформирован. Это приведет к сбою загрузки страницы с ошибкой 500, если текущая версия используется на странице.

Текущий метод включения Javascript SDK для кнопки. Следуйте за нами, как и т.д.

<div id="fb-root"></div>
<script>(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#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

И опять не исчезла!

Улучшение, необходимое для работы с более строгой проверкой XML. Это усовершенствование позволит правильно экранировать данные XML и комментировать CDATA для старых браузеров.

<div id="fb-root"></div>
<script>
/* <![CDATA[ */
(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#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
/* ]]> */

</script>
Вот теперь все на месте!!!
Ссылка на эти добавления:
http://qaru.site/questions/700982/error-parsing-xml-the-reference-to-entity-version-must-end-with-the-delimiter

Easythelog

С наступающим Новым Годом!

RegionAds

API в соц сетях

11. Как установить комментарии Facebook в шаблон Blogger