Comentários do facebook junto com o do Blogger

Não é simples, mas se fizer com atenção tenho certeza que vai dar certo.

Antes de começar segue meu conselho: faça backup de seu template. Assim, caso não goste, basta reinserir o template original e tudo volta a ser como antes.

Agora, ao trabalho:

Antes de mais nada é preciso criar um aplicativo em seu perfil do Facebook pois vamos precisar disso para criar o hack e implementar os comentários do Facebook no blog.
Faça assim:

Acesse seu perfil do Facebook e estando logado clique nesse link: https://developers.facebook.com/apps
Ele leva à página de aplicativos do Facebook. Lá você verá esta página:

Clique em Register now.
Abrirá esta outra página:

Marque a caixinha I accept the Facebook Plataform Policy  e depois em Continuar.
Na próxima janela insira seu número de telefone e escolha a opção que deseja para receber o código de validação.
Depois que receber o código e validar sua conta defina quem óde ver seu número de telefone.
Assim:

Clique em Continuar. Na próxima etapa pode clicar em Pular.
A seguir, na última janela clique em Done.
Está confirmada sua conta.

Agora vamos criar seu aplicativo.
Nesta página:

Clique em Criar novo aplicativo.
Vá seguindo o que a tela pedir e ao final você terá o ID de seu aplicativo. É dele que precisamos para implementar os comentários do Facebook no blog.
Esse ID aparecerá numa página semelhante a esta:

Esta parte terminamos. Agora vamos inserir em seu blog.


Para começar acesse a aba Modelo e selecione Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na caixa de busca que abrir coloque isso:

<div class='comments' id='comments'>

Em alguns templates  é preciso achar a primeira ocorrência desse trecho; em outros templates é preciso achar a segunda ocorrência desse trecho. Em outros é preciso colar o código abaixo das 2 ocorrências do trecho pesquisado.
Então você precisará testar, ok?

Abaixo dessa linha cole esse código:

<div class='comments-tab' id='fb-comments'  onclick='javascript:commentToggle(&quot;#fb-comments&quot;);'  title='Comentários no Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDL7_RkFMqRBP-BKpCVozrqVph5xOEhvR9gTZDiHCP8BxSHvjA1T7cfgMZ3aPCLsWDAnFtXVKaOEQ6Cz-V-BlmiBvduDGVkGy5zJGTKBuDfkv9e2gArQGTmRG3deZAPOw70azOwZmucdJV/h120/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(&quot;#blogger-comments&quot;);'  title='Comentários no Blogger'>
<img class='comments-tab-icon'  src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJFkPpnlU8XsQL0ecfdyEPUcuZCKNYs2EW13GCV_ohsqxV8fr1jNvCJ-ph0NlUFw8OMuyocj98EsgHZpy_7j3Wc2krSIPn0r0kSZMYdGcQrx9-aRbmcGx6b_QTF4qsaIqrBMTcSUhRUwH/h120/blogger-commet.png'/>  <data:post.numComments/> Comentários
</div><div class='clear'/>
</div>
<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='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Salve.
Agora localize isso: </head> e antes dessa tag cole isso:

 <script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='SEU 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>

Onde você lê SEU ID  coloque o ID que pedi pra reservar, aquela sequência numérica gerada no aplicativo do Facebook.
Feito isso, salve as alterações.

Estamos quase terminando.
Agora localize essa tag:

]]></b:skin>

E acima dela cole os estilos dos seus comentários:

 .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;}

Se quiser pode alterar as cores, definidas pelos códigos hexadecimais precedidos de #.
Depois de tudo pronto clique em Salvar alterações.
Tá feito!

Se tudo deu certo seu blog conta agora com mais uma opção para os leitores comentarem.
Em meu blog de testes ficou assim:

Quando o leitor comentar ele pode escolher a opção Publicar no Facebook ou não. É legal publicar quando queremos divulgar o comentário que fizemos, mas se preferir não postar basta desmarcar a caixinha.

Se publicar no Facebook os comentários aparecerão no blog, e se comentar ou responder no blog eles aparecerão no Facebook.

Moderando os comentários do Facebook

Para moderar os comentários e receber em seu perfil notificações quando houver comentários para aprovar clique nesse link:  http://developers.facebook.com/tools/comments

Abrirá a janela para que você defina as suas configurações. Esta:

Clique em Configurações. Na janela que abrir selecione as opções que preferir.

Entenda:

Moderadores: escolha os perfis dos moderadores de comentários.     

Modo de moderação: escolha se vai moderar ou não os comentários.     

Palavras na lista negra: escolha se quer bloquear certas palavras. Caso não queira, deixe a opção “sem restrições”.     

Outros provedores de login: escolha se deseja permitir que os usuários comentem com outro provedor ou não.     

Filtro de gramática: opção para corrigir alguns erros de gramática automaticamente.     

Compositor de comentários: Escolha se deseja Mostrar: sempre ou não.

Depois de pronto clique em Salvar.

Créditos de: http://www.elainegaspareto.com