4 ноября 2012 г.

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


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

Комментарии Facebook в Blogger


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

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

Код плагина комментариев Facebook

Первую часть кода нужно вставить сразу после тега <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, нужно внести изменения:

<div class='fb-comments' expr:data-href='data:blog.url' data-num-posts='10' data-width='496'/>
Надеюсь, что больше сюрпризов не будет. Хотя в нашем деле всякое бывает. Не ошибается тот, кто ничего не делает.

Комментировать в ВКонтакте

Комментировать в Facebook

Комментировать в Blogger

13 комментариев:

  1. я так поняла, у вас ошибка в коде для комментов от в контакте. надо удалить


    Спасибо!

    ОтветитьУдалить
  2. Спасибо Огромное! Чёткий и ясный скрипт! Мне действительно помог!!!

    ОтветитьУдалить
  3. да - фэйсбук установился, а контакт что-то не очень.. :)

    ОтветитьУдалить
  4. походу все же когда идут комменты с самого блогспота то комментарии с фейса и вк удаляются.. (((

    ОтветитьУдалить
  5. Спасибо. Все ок :) Вопрос, а редактировать и управлять такими комментариями есть возможность?

    ОтветитьУдалить
    Ответы
    1. Есть, но нужно указать администратора с помощью тега <meta> в разделе <head>:
      <meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
      Подробнее здесь: https://developers.facebook.com/docs/plugins/comments/

      Удалить
  6. Я не могу найти у себя в шаблоне тег body. Что делать?

    ОтветитьУдалить
    Ответы
    1. Продолжить поиски. Он там должен быть обязательно.

      Удалить
  7. У меня Блоггер ругается, пишет "The widget with id "Blog1" cannot contain element: "div". A widget can only contain b:includable elements." что делать? (((

    ОтветитьУдалить
    Ответы
    1. Это значит, что не в том месте вставляете. Вставляйте код внутри b:includable элемента. В моём примере это

      Удалить
    2. В моем примере это <b:includable id='comment_picker' var='post'>

      Удалить
  8. Здравствуйте! Подскажите, что не так. Делаю все по инструкции, но когда нажимаю "просмотреть шаблон" мне выдает "Не удалось загрузить шаблон: Ошибка при синтаксическом анализе XML (строка 1000, столбец 64): The reference to entity "version" must end with the ';' delimiter"
    Вот эта строчка js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v2.3";

    ОтветитьУдалить