Como colocar comentários do Facebook e deixá-los juntos com os do Blog

Se você quer dar mais uma opção para os seus leitores comentarem no seu blog e ao mesmo tempo promovê-lo, você está lendo o post certo. Aqui, ensinaremos como pôr acaixa de comentário atualizada do Facebook e manter a caixa de comentário do blog, assim, o leitor poderá escolher um dos dois para comentar. Ensinaremos também como moderar esses comentários e como ser notificado quando alguém comentar.

Adicionar comentários do Facebook juntamente com o do Blogger

Infelizmente, o tutorial é grande, mas está bem explicadinho, "nos seus mínimos detalhes". Está dividido em três etapas para melhor visualização. Então, vamos lá!

1 - Criando um "app" (aplicativo) no Facebook

1.1 - Primeiramente, deve-se criar um aplicativo no Facebook. Para isso, acesse https://developers.facebook.com/apps/ e clique em +Add a New App (Adicionar um novo aplicativo).

Adicionando um novo App

Na janela que se abre, selecione www:

Selecione www

Após isso, você será levado para outra página que mostrará alguns de seus aplicativos, caso vocês os tenha. Ignore isso e clique em Skip and Create App ID:

Clique em Skip and Create App ID

Na janela que se abre, preencha o que se pede (Observação: pode ser que estas opções já estejam traduzidas):

Display name (Nome de exibição): Escolha um nome para o aplicativo;
Contact Email (Email de contato): Coloque o seu e-mail de contato;

Namespace: Coloque o mesmo nome de cima, só que sem espaço (e sem acentos);
Is this a test version... (Esta é uma versão de teste de outro aplicativo?): Não

Categoria: escolha "Apps for Pages (Aplicativos para Páginas)".

E clique em Create App ID (Criar um ID do Aplicativo).

Criando o aplicativo

Aparecerá uma janela chamada Security Check. Basta preenchê-la com o que for pedido e clicar em Submit. Por exemplo, pode ser pedido para que você selecione as imagens que têm uma flor.

1.2 - Finalmente, você estará com o Aplicativo criado, mas precisará configurar algumas coisas. Na coluna de opções, selecione Settings (Configurações) e preencha os campos que ainda não estejam preenchidos:

App Domains (Domínios do aplicativo): Digite aqui o endereço do seu blog, sem o "https":

Coloque o endereço do seu blog sem o "https"

1.3 - Depois, ainda nessa janela, clique em + Add Platform (+Adicionar Plataforma) e selecione “Site”. Na aba que aparecer, em Site URL, adicione o endereço completo do seu blog, com o https://. Clique em Save Changes (Salvar alterações).

Adicionando endereço completo do blog

1.4 -  Agora, vá para App Review (Revisão do Aplicativo) (1), clique em "Yes (Sim)" (2) para tornar o App público e clique em Confirm (3):

Tornando o App público

1.5 - Na coluna lateral, selecione novamente o Dashboard (Painel) e guarde o ID do aplicativo (ou deixe essa janela aberta).

Guarde o ID do seu aplicativo

2 - Colocando os códigos no template do blogger

2.1 - Vá para o painel do seu blog, selecione “Modelo” e clique em Editar HTML: 

ATENÇÃO:
* Antes de qualquer alteração no seu template, faça o backup do mesmo.
* Recomendamos que você crie um blog de teste e faça os passos lá. Se tudo ocorrer bem, você poderá aplicá-lo ao seu blog principal.

*Não nos responsabilizamos por quaisquer danos causados pelo seguimento deste tutorial.

Não esqueça de fazer o backup antes de qualquer alteração

2.2 - Agora, clique em qualquer área dentro do editor de códigos e aperte Ctrl+F para abrir uma caixa de busca dentro do próprio template.

ATENÇÃO: Você deve clicar em qualquer área do editor de texto (1), e não fora dela. Após deixar o cursor piscando nela, você aperta Ctrl+F para abrir a caixa de busca dentro dele (2), e não fora. Veja na imagem abaixo:

Como procurar partes do código no Blogger

2.3 - Nessa caixa de pesquisa, procure por </head>, cole antesdele o seguinte código e clique em “Salvar modelo”:

Atualização (13 de abril de 2016): Este código foi atualizado. Caso você tenha acessado este tutorial anteriormente, localize essa parte e faça a substituição do anterior. Obs.: o código anterior ainda está em funcionamento.

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'SEU_APP_ID',
      xfbml      : true,
      version    : 'v2.8'
    });
  };
  (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/pt_BR/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<meta content='SEU_APP_ID' property='fb:app_id'/>

<script type='text/javascript'>
function commentToggle(comentario) {
if (comentario == '#fb-comments'){
window.document.getElementById("fb-comments-page").style.display='block';
window.document.getElementById("blogger-comments-page").style.display='none';

window.document.getElementById("fb-comments").style.background='#ffffff';
window.document.getElementById("blogger-comments").style.background='#d1d1d1';
} else if (comentario == '#blogger-comments') {
window.document.getElementById("blogger-comments-page").style.display='block';
window.document.getElementById("fb-comments-page").style.display='none';
window.document.getElementById("blogger-comments").style.background='#ffffff';
window.document.getElementById("fb-comments").style.background='#d1d1d1';
}}
window.onload = function(){
commentToggle('#fb-comments');
}</script>

Caso você seja de Portugal ou Espanha, ou qualquer outro país, troque o pt_BR por pt_PT(Portugal), es_ES (Espanha) ou a sigla correspondente ao seu país.

2.4 - Troque SEU_APP_ID pelo ID do aplicativo que você acabou de criar. (Cuidado para não retirar as aspas).

Atualização (15 de novembro de 2016): A documentação do Facebook diz que você deve configurar o ID do Aplicativo ou de sua conta, não ambos. Então, não precisa mais descobrir qual é o ID da sua conta.

2.5 - Agora vamos inserir os códigos CSS. São eles que darão a aparência e estilo da box do Facebook e do Blogger. Procure por ]]></b:skin>, cole esse código antes dele e clique em “Salvar modelo”:

.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;}
.comments-page .fb_iframe_widget,
.comments-page .fb_iframe_widget span,
.comments-page .fb_iframe_widget span iframe[style] {
min-width: 100% !important;
width: 100% !important;
}

2.6 - Ainda não há nenhuma alteração visível no seu blog. Procure por <div class='comments' id='comments'> e cole o seguinte código depoisdessa linha.

Obs.: Você deverá encontrar dois resultados para essa busca. Cole o código nas duas ocorrências, caso contrário, a box poderá aparecer ou não em algumas postagens.

<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://sites.google.com/site/docjoanir/img/btface.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentário(s)
</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://sites.google.com/site/docjoanir/img/btblogger.png'/> <data:post.numComments/> Comentário(s)
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType != "index"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='100%' data-colorscheme='light'  />
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Caso você tenha encontrado apenas um <div class='comments' id='comments'>, procure por <div class='comments'> ou <div id='comments'> e cole também o código abaixo dele.

Note que destacamos o "light". Ele é o valor padrão para a sua box do Face. Caso seu template seja escuro, troque o "light" pelo "dark" e veja o que acontece.

  Quer a Box do Blogger antes da do Face?

Se você quiser que a Box do Blogger esteja selecionada por padrão e apareça antes da Box do Face, acesse: Colocar os comentários do Blogger antes dos comentários do Facebook.

  A box do Facebook não está aparecendo. E agora?

Se você seguiu todos os passos até aqui e a box do Facebook não apareceu (ou apareceu parcialmente), siga esse tutorial que escrevi hoje (22 de junho de 2015) apontando algumas causas e soluções para esses problemas: Bug nos comentários do Facebook no Blogger 

3 - Moderando os comentários do Facebook

Com todos os códigos colocados, agora precisamos configurar a moderação. Se alguém comenta algo no seu blog, você precisa receber uma notificação para que saiba que essa pessoa comentou, não é mesmo? O Facebook oferece essa funcionalidade nessa box, desde que esteja tudo configurado corretamente. Lembra dos IDs pedidos no passo 2.4? Eles servem para o Facebook saber que você é o administrador do blog onde a box está inserida e pra qual App enviar os dados comentados.

3.1 - Então, acesse: https://developers.facebook.com/tools/comments e você verá seu Painel de Controle de comentários. Adicione esse endereço aos seus favoritos, pois é bom que você faça visitas periódicas a ele.

Clique em configurações:

Moderar comentários

3.2 - Na janela que abrir, adicione-se como moderador. Veja abaixo o que significa cada uma das opções:

Atualização (13 de abril de 2016): Esta janela foi atualizada e agora está dividida por abas. Faça as observações necessárias para aplicar as configurações abaixo.

    Moderators: Adicione pessoas que poderão moderar os comentários feitos. Adicione-se também;

    Blacklisted Words: Escreva aqui algumas palavras que serão bloqueadas na box. Comentários que as contenham ficaram ocultos e irá para a aba "hidden". Lá, você pode torná-lo público ou não;

    Comment Length Limit: Defina até quantos caracteres poderão ter em um comentário;

    Enable Attachments: Ative a anexação de imagens nos comentários;

    Sort Comments By: Defina a ordem em que os comentários aparecerão: Top (mais populares), Newest (novos primeiros) e Oldest (antigos primeiros);

    Moderation: Public (os comentários serão públicos automaticamente;  Review Blacklisted Comments(os comentários que conterem as palavras bloqueadas definidas estarão ocultos passivos à moderação) e Closed (todos os comentários estarão ocultos e apenas os comentários que não estiverem na lista de palavras bloqueadas ficarão passíveis de moderação);

    Notifications: Defina se você e outros moderadores serão notificados a cada comentário novo.

Se você tem uma página do Facebook dedicada ao seu blog, ative o Espelhamento de comentários. Assim, os comentários feitos nos seus posts também aparecerão na sua página.

Ajustando as notificações