Para conseguir colocar os comentários do facebook no blogspot você precisa criar um aplicativo no facebook aplicativos do facebook, clique em novo aplicativo e preencha as informações pedidas.
Aqui precisamos colocar o endereço do blog que vamos utilizar os
comentários do facebook. No campo App Domains você deve usar o endereço
do seu blog sem o http:// mais abaixo no campo de texto Website with
Facebook Login deve usar o endereço completo do seu blog.
App Domains: rafaecarioca7.blogspot.com
Website with Facebook Login: http://rafaelcarioca7.blogspot.com
clique em salvar e copie o numero do id do aplicativo.
Agora podemos usar esse numero do aplicativo para colocar os comentários do facebook no blogger.como na imagem abaixo.
Vamos colocar os códigos para mostrar os comentários do blogger e
facebook juntos no seu blog. São 3 partes de códigos, mas
recomendamos colocar uma por vez e salvar antes de inserir a próxima,
Faça um backup do seu template antes de modificar seu blog. Agora entre na pagina editar HTML e marque a opção expandir modelo de widgets.Procure pela linha <div class='comments' id='comments'> (se achar mais de um utilize o que estive mais no inicio do html) e coloque depois dessa linha o seguinte código:
Depois que fizer o teste você pode ajustar a largura da caixa de comentários alterando o valor 450 e também o numero que comentários do facebook que aparecem no seu blog trocando o numero 3, neste trecho: fb:comments expr:href='data:post.url' num_posts='3' width='450'/
Clique em salvar e procure por </head>
e coloque antes dele esse
código abaixo, mas troque a parte YOUR_FB_ID pelo id do seu aplicativo no
facebook como mencionamos no inicio deste post:.
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' 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>
Salve novamente e procure por ]]></b:skin>
e insira esse estilo CSS antes dele:.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;}
Agora é só salvar mais uma vez e visualizar seu blog que já está tudo pronto e agora seu blog vai mostrar os comentários do facebook e blogger ao mesmo tempo.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>