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 |
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:
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 |
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.
* 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>
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:
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>.
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>
<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!
