drbaltar | комментарии Facebook на Blogger (Reply)

Внезапно, в Марте 2011 года разработчики Facebook обновили код для социальных вставок ( Social Plugins ). Это в первую очередь кнопочки-лайки и комментарии.
Google в выдаёт выдаёт устаревшие инструкции о том как вставить комментарии от Facebook в свой блог на платформе bloggre.com ли blogspot.com. Такие инструменты как этот ещё работают, но есть более простой и улучшенный способ.
О преимуществах нового способа можно почитать в блоге самого facebook. Видно, что метод описанный там прост и эффективен. Но если следовать инструкциям и вставить код в blogger то получится не совсем то что ожидалось. Во-первых есть вероятность потерять старые комментарии. Читайте внимательно комментарии разработчиков о том, что надо сделать что бы этого не произошло.
Во-вторых, генератор кода виджета комментариев требует ввести URL блога. Вот к этому URL и будут добавляться комментарии. А нам хочется что бы они добавлялись к каждой странице отдельно.
Итак. Правильная инструкция как добавить виджет комментариев, а также кнопку-лайку от Facebook в блог на blogspot.com:
1. в заголовок добавляем ID вашего приложения


<html>
<head>
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">
</head>

Надеюсь вы знаете что такое приложение и где брать этот код. Если не знаете, то можете прочитать опять же в этой инструкции.

2. Открываем генератор кода виджета комментариев и выбираем нужные нам параметры. В качестве URL указывайте собственно RLL вашего блога: www.domain.com

3. Полученный код надо втсавить в шаблон блога. Blogger изменил интерфейс управления блогами, но найти как редактировать код всё же можно. Хотя вам покажут предупреждение о том, что редактирование кода требует особых знаний и навыков.
Открыв редактор кода установите галочку Expand Widget Templates и найдите в коде такой элемент:
<div class='post-footer-line post-footer-line-3'>
после этого элемента и до закрывающего элемента <div> и надо будет вставить комментарии.
Но перед тем как вставлять код от Facebook добавим условие по которому комментарии будут показываться только на странице заметки, но не на главной странице блога.
Это условие выглядит так:


<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>
<!-- Facebook comments BEGIN -->
**********************************************
<!-- Facebook comments END --> 
</b:if>
<div>

Вместо звёздочек и будем вставлять всё что получили на Facebook, комментарии и кнопки-лайки.
Присмотревшись, код этот состоит из трёх частей:

элемента: <div id='fb-root'/>
кода: <script>(function(d, s, id) ... и так далее до закрывающего элемента </script>
и самого виджета: <div class='fb-like' data-send='true' data-show-faces='true' data-width='450'/> - это код кнопки-лайки.

Две первых часть достаточно в одном экземпляре. Если вы хотите одновременно иметь и кнопки-лайки и комментарии не надо дважды повторять эти составляющие кода.
Всё это справедливо для любой платформы вообще, и не привязано собственно к blogger.com. Единственное что надо изменить в коде от Facebook для его совместимости с blogger находится в элементе виджета для комментариев. Facebook предлагает следующую строчку:


<div class="fb-comments" data-href="example.com" data-num-posts="2" data-width="500"></div>

Если так и оставить то комментарии будут оставляться к сайту example.com целиком, а не к каждой публикации отдельно. Вместо example.com надо каждый раз подставлять текущую страницу к которой оставляется комментарий. Это можно сделать с помощью мета-языка программирования от blogger.com. В итоге получаем работающий код:


<div class='fb-comments' data-num-posts='4' data-width='500' expr:data-href='data:post.url'/>

Итого у вас должно получиться что-то подобное:



<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>
<!-- Facebook comments BEGIN -->

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

<div class='fb-like' data-send='true' data-show-faces='true' data-width='450'/>

<div class='fb-comments' data-num-posts='4' data-width='500' expr:data-href='data:post.url'/>

<!-- Facebook comments END --> 
</b:if>
</div>