No tutorial de Como pôr comentários do Facebook juntos com os do Blogger, algumas pessoas relataram alguns problemas. Então, resolvi fazer essa postagem esclarecendo algumas causas e trazendo soluções possíveis.
 |
| Como resolver alguns bugs da box de comentários do Facebook |
1º caso
Ao terminar todo tutorial, aparece a aba para visualizar tanto os comentários do Facebook, como os do Blogger, porém não aparece a box de comentários do Face, como exemplificado na imagem abaixo.
 |
| Aparece a aba, mas não é possível ver a box de comentários do Facebook |
Motivo e solução
Nesse caso, alguma coisa no seu template está bloqueando os plugins do Facebook ou fazendo-os com que funcionem apenas em algumas páginas. Até o momento não consegui localizar o que bloqueia (até porque, pelo número de templates diferentes que existem para o Blogger, seria difícil encontrar). Entretanto, adicionando o código abaixo, é possível fazer com que a box e outros plugins do Facebook apareçam.
No Painel de controle do blogger, vá em Layout e clique em Adicionar um Gadget em qualquer área do blog. Na janelinha que abrir, selecione HTML/JavaScript. Agora, cole o seguinte código:
<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>
Pronto! Se o problema era com o bloqueio de script, seu problema foi solucionado!
2º caso
Motivo e solução
Esse bug aconteceu principalmente com pessoas que têm o template do Blogger modificado por terceiros. Como os templates originais são bem parecidos, é normal que o blogueiro procure outros mais diferentes. Porém, como eles são modificados, algumas coisas são acrescentadas e outras, excluídas. Dessa forma, talvez não seja possível integrar a aba de comentários do mesmo jeito que está no tutorial.
Já mostrei como resolver esse problema no tutorial principal após uma atualização, mas não custa repeti-la.
Nele, no passo 2.6, digo que é pra vocês procurarem por <div class='comments' id='comments'> e colar um código após essa linha. Você deve encontrar dois resultados e colar nos dois.
Porém, em alguns templates modificados, você encontra apenas um resultado. Então, cole nele e procure também por <div class='comments' ou <div id='comments' e cole o código na linha de baixo.
Nele, no passo 2.6, digo que é pra vocês procurarem por <div class='comments' id='comments'> e colar um código após essa linha. Você deve encontrar dois resultados e colar nos dois.
Porém, em alguns templates modificados, você encontra apenas um resultado. Então, cole nele e procure também por <div class='comments' ou <div id='comments' e cole o código na linha de baixo.
3º caso (o mais grave que já encontrei)
Peguei um layout agora que, poxa vida, que troço difícil de arrumar. Ele é até bonito, mas bloqueou totalmente os códigos do Facebook. Passei mais de uma hora tentando encontrar a pedra de tropeço (risos), mas não consegui.
A dica aqui é: se você quer muito ter a box de comentários do Facebook, troque de template.
Mas você gostou tanto desse, né? Então tenho uma outra "solução". Siga os passos:
3.1. Crie um gadget (Painel de controle do Blogger > Layout > Adicionar Gadget > HTML/JavaScript) e cole o seguinte código:
<div id="fb-root"></div>
<script>(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#xfbml=1&version=v2.8&appId=ID-DO-SEU-APP";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>(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#xfbml=1&version=v2.8&appId=ID-DO-SEU-APP";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
3.2. No Painel de controle do Blogger, vá em Configurações > Postagens e comentários. Na opção Modelo de postagens, clique em Adicionar e cole o seguinte código:
<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div class='fb-comments'>
<h4>Comente com o Facebook:</h4>
<fb:comments data-colorscheme='light' expr:href='data:post.url' num_posts='5' width='100%'/>
</div>
</b:if>
<div class='fb-comments'>
<h4>Comente com o Facebook:</h4>
<fb:comments data-colorscheme='light' expr:href='data:post.url' num_posts='5' width='100%'/>
</div>
</b:if>
3.3. Agora, sempre que você for escrever uma postagem, o código da box irá aparecer no editor, como na imagem abaixo:
Escreva sua postagem normalmente acima das palavras em negrito. Não apague elas, senão a box não aparecerá.
3.4. Se desejar, oculte os comentários do Blogger.
 |
| Escreva no local indicado e não apague o que está em negrito |
Escreva sua postagem normalmente acima das palavras em negrito. Não apague elas, senão a box não aparecerá.
3.4. Se desejar, oculte os comentários do Blogger.
Obs.: Essa dica não adicionará a box em postagens já feitas. Caso deseje que elas apareçam nessas, você terá que editar uma por uma. Para isso, entre no editor de postagens e no modo HTML, adicione o código do passo 3.2.
Conclusão
É isso. Esses são alguns bugs com soluções. Há mais algum problema que você queira relatar. É só comentar. Há, nossos tutoriais estão sempre recebendo atualização. Fique ligado! Curta nossa página no Facebook clicando no botão abaixo. Até a próxima!
