Colocando comentários do Facebook no lugar dos do Blogger | Blog do Joanir

Colocando comentários do Facebook no lugar dos do Blogger

sábado, 22 de outubro de 2016
Neste tutorial, mostraremos como substituir os comentários do Blogger pelo do Facebook. O passo a passo consiste na criação de um Aplicativo no Facebook e a implementação de um código no Blogger. Então, vamos lá!

Comentários do Facebook no Blogger
Comentários do Facebook no Blogger

1 Criando um aplicativo (app)

Este passo é muito importante, pois será para o aplicativo que os comentários serão enviados e onde poderão ser moderados.

1.1 Como já tenho um tutorial de como criar um aplicativo, clique no link abaixo e siga todo o passo 1:

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

2 Ocultando comentários do Blogger

2.1 Acesse o painel do seu blog.

2.2 Vá em Configurações e selecione Postagens, comentários e compartilhamentos.

2.3 Na opção Local do comentário, selecione Ocultar e clique em Salvar configurações.

Ocultar comentários do Blogger
Ocultar comentários

3 Aplicando código do Facebook

3.1 No Painel do seu blog, vá em 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.

3.2 Clique em qualquer área dentro do editor e aperte Crtl+F para abrir um buscador (search) de códigos.

3.3 Procure por </head>, colo o código abaixo antes dele e clique em Salvar modelo.

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

3.3.1 Substitua SEU_APP_ID pelo número do seu Aplicativo, criado no passo 1.

3.4 Agora procure por <div class='post-footer-line post-footer-line-2'>. Você deverá encontrar dois resultados. Cole nos dois o código abaixo dessa linha:

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

3.4.1 Com esse código, a box de comentários do Facebook aparecerão apenas na página dos post. Caso você queira que ela apareça também na página inicial, basta apagar as condicionais destacadas <b:if cond='data:blog.pageType != "index"'> e </b:if>.

4 Configurando a moderação pelo app

Esta parte do Tutorial já está feita. clique no link abaixo e siga o passo 3.

Conclusão

Com essa box de comentários do Facebook, ficará mais fácil para o leitor comentar os seus posts, já que praticamente todo mundo tem uma conta nessa rede social. Se você gostou deste tutorial, ou tem alguma dúvida, comente aqui embaixo. Até a próxima!

Tá difícil?

Podemos fazer isso pra você.
Contrate-nos

Adblock Detectado

Percebemos que seu AdBlock está bloqueando propagandas no nosso blog.

Desative-o, por favor, também não gostamos de janelas abrindo aleatoriamente, então não temos dessas aqui.

Muito obrigado!