Related Posts Plugin for WordPress, Blogger...

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

domingo, 30 de março de 2014
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.

Como colocar comentários do Facebook e deixá-los juntos com os do Blog
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).

Clique no botão verde, localizado próximo ao canto superior direito, +Add a New App
Adicionando um novo App

Na janela que se abre, selecione www:

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Editando HTML do blog
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:

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando aplicativo
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).

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando 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":

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando aplicativo
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).

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Criando aplicativo
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):

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Tornando o aplicativo público
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).

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - ID do aplicativo
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.

Como colocar comentários do Facebook e deixá-los juntos com os do Blog - Editando HTML do blog
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 antes dele 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 depois dessa 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/arquivosdoblog007/ico/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/arquivosdoblog007/ico/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


  Quer ajudar o nosso blog?

Este tutorial foi útil pra você? Te ajudou a melhorar o seu blog? Então nos ajude também, dê like, comente e compartilhe este post. Ah, e deixe também sua doação em dinheiro:
FAÇA SUA DOAÇÃO ONLINE CLICANDO AQUI

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!

Comentário(s)
9 Comentário(s)
9 comentários
  1. Gostaria de te agradecer muito por esse tutorial. Certamente que ele me ajudou bastante e deu tudo certo, assim como você ensinou. Muito obrigado e continue com esse bom trabalho. ;)

    ResponderExcluir
    Respostas
    1. Obrigado pelo comentário e que bom que deu tudo certo :)

      Excluir
  2. Eu já tinha o sistema de comentário do facebook no meu blog, mas era um codigo muito antigo que sempre deu problemas. No entanto, já havia bastante comentários nele. Vendo o seu artigo, resolvi seguir todos os passos e deu certo, consegui colocar o sistema. O problema é que os comentários do sistema antigo sumiram, sendo que eu usei o mesmo APP ID do sistema antigo.

    Assim, os comentários sumiram do meu blog, mas lá na página de configuração continuam todos lá. Como faço para que eles apareçam de volta no blog?

    ResponderExcluir
    Respostas
    1. Bom, é difícil de dizer o que saiu errado, mas vamos às possíveis causas:
      1 - Você alterou alguma coisa na parte do aplicativo? Na parte do "app domain". Você tem um domínio personalizado, nas configurações passadas, estava como nomedoseusite.blogspot.com. Se seu blog foi feito antes da ateração de domínio e antes da implementação do "br" em blogs nacionais, deixe como estava antes.
      2 - Tem tutoriais que apresentam apenas o (meta content='YOUR_FB_ID' property='fb:admins'/) e ao invés de pôr o seu ID do face, eles pedem pra você pôr o ID do aplicativo. Faça isso e remova a tag (meta content='YOUR_APP_ID' property='fb:app_id'/) (Coloque "<" em vez "(", é que não é permitido pôr tags no comentário). Mas atenção, ao fazer isso, pode ser que você não seja mais notificado, tendo que ir sempre na página de notificações para saber se alguém comentou.
      3 - Na página de notificações, veja se por algum motivo os comentários antigos se tornaram privados novamente. Acho bem improvável isso, mas não custa tentar.
      4 - Bom ,creio que você já fez isso, mas revise todo o código, talvez alguma coisa entre os códigos e o aplicativo não esteja batendo.

      Se não for nenhuma dessas coisas, daí eu não saberia te dizer qual é o problema, pois, na lógica, cada comentário pertence a uma postagem. No antigo blog meu, eu recebi comentários com um ID de aplicativo. Tempos depois criei outro aplicativo e coloquei neste mesmo blog, pois tinha excluído o app antigo. Depois de um tempo, os comentário antigos apareceram nas postagens, mas não na página de notificações.

      Bom, espero que dê certo. Qualquer coisa, é só avisar.

      Excluir
  3. Muito Top esse tutorial, valeu mesmo.
    Ajudou muito, já fazia um tempo que estava atrás dessa função pra colocar no meu blog.

    ResponderExcluir
  4. Muito bom o tutorial, me ajudou muito, estava a procura de um plugin do facebook que fosse responsivo, e funcionou perfeitamente.
    vejo que o seu está em Português, gostaria de deixar o meu assim também, poderia me ajudar com essa tarefa?
    Mais uma vez muito obrigado.

    ResponderExcluir
    Respostas
    1. Bom dia, José. Se você seguiu todos os passos do tutorial, no primeiro código fornecido, tem uma parte que tem o "pt_BR". Dessa forma, sua box deve estar em português brevemente. Aguarde alguns dias, ou verifique se você não tem nenhum outro tipo de plugin que esteja com a sigla em inglês "en-EN".
      Abraço.

      Excluir
  5. Obrigado pela resposta, irei esperar um tempo, procurei mas não encontrei a sigla "en-EN" em outros plugin.

    ResponderExcluir