Comentários via facebook no blog.

Uma coisa que todo mundo quer mas nem sempre consegue é colocar esse bendito sistema de comentários do Facebook junto com o comentário do blogger.

Tentei milhões de tutoriais e nenhum dava certo, até que decidi juntar dois tutoriais para ver se conseguia e finalmente a batalha foi vencida.

Já que tem muita gente que não consegue com alguns tutoriais vou fazer este para ajudar também.

• Primeiro você deve criar um aplicativo no facebook (aqui)
• Colocar os dados do aplicativo
• Pegar o id do app. 

• Depois de criar o aplicativo e estiver com o id dele é a parte do hmtl. 
  Painel do blog > Editar modelo > Editar HTML .

CTRL + F procure pelo seguinte trecho: 

<div class='post-footer-line post-footer-line-1'/>

E cole o seguinte código, abaixo do trecho encontrado. 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function()
{
FB.init({appId: &#39;APPID;, status: true, cookie: true,
xfbml: true});
};
(function()
 {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol + &#39;//connect.facebook.net/pt_BR/all.js&#39;; e.async = true; document.getElementById(&#39;fb-root&#39;).appendChild(e); }()); </script>
<fb:comments expr:href='data:post.url'/>
</b:if> 

Procure por </head> e cole antes o código abaixo

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>

<script src='http://code.jquery.com/jquery-latest.js'/>

<meta content='APPID' property='fb:admins'/>

<script type='text/javascript'>

function commentToggle(selectTab) {

$(".comments-tab").addClass("inactive-select-tab");

$(selectTab).removeClass("inactive-select-tab");

$(".comments-page").hide();

$(selectTab + "-page").show();

}

</script>

Procure por <div class='comments' id='comments'> e cole o código abaixo dele, caso não encontre este trecho procure por <b:if cond='data:post.commentPagingRequired'> e cole o código acima do trecho. 

<div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='52' width='640'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'/>

Logo após procure pelo trecho ]]><b:skin e cole o código acima do trecho

.comments-page {background-color: #f2f2f2;}

#blogger-comments-page {padding: 0px 5px;display: none;}

.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}

.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}

.comments-tab:hover { background-color: #eeeeee;}

.inactive-select-tab { background-color: #d1d1d1;}