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 a caixa 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

Está com dúvidas?

Se você ainda está com dúvidas, solicite um atendimento virtual agora mesmo, clicando no link abaixo. Entraremos em contato com você e faremos todos os processos remotamente.
VALOR: R$ 40,00 (quarenta reais).

Clique aqui para solicitar uma ajuda

Conclusão

É isso. Não se esqueça de fazer o backup do seu template antes de fazer essas alterações e depois também, para manter uma cópia salva das alterações.  Se tiver dúvida ou deu algo errado, revise o código para ter certeza de que não esqueceu nenhum detalhe. Não se esqueça também de comentar aqui para sabermos se deu tudo certo!