Corrigir Problemas dos Comentários do Blogger e Facebook Juntos no Blog

Eu tenho dois blogs nos quais preciso do máximo de otimização nos comentários para incentivar o povo a participar (senão não tem sentido eu escrever nada). O Tutorial aqui no Dicas Para Blogs de Como Usar Comentários do Facebook e do Blogger ao Mesmo Tempo me pareceu, a princípio, uma ótima alternativa; mas ao tentar implantar o recurso nos referidos blogs, me deparei com uma série de empecilhos - que, ao ler os comentários do post, constatei que diversos outros leitores do Dicas Para Blogs estavam passando pelo mesmo dilema. E, diante de problemas que pareciam não ter solução, como eu sou insistente e teimosa, fui atrás de depurar todo o código até descobrir uma forma de colocar tudo “nos trinques”. E, por fim, resolvi compartilhar minhas descobertas.


Evidentemente, o presente tutorial é uma adaptação do referido supracitado, anteriormente publicado aqui mesmo no Dicas Para Blogs. Devido aos contratempos que, assim como eu, diversos outros leitores do site encontraram ao tentar implantar o sistema, pedi ao Fabiano se não poderia fazer uma versão alternativa contendo as soluções que eu encontrei e tive permissão concedida. Logo, o fato de alguns códigos do artigo original também estarem presentes aqui não caracteriza plágio.

Pré-passos: Você tem que criar um aplicativo do Facebook para o seu blog e fazê-lo funcionar. Para isso, veja aqui Como Criar Aplicativos no Facebook e Usar Comentários no Blog. Vou incluir alguns detalhes a mais a esse tutorial:

1: Incluir o xmlns do Facebook, o OpenGraph Protocol e as metatags

No HTML do blog, comece colando o seguinte código logo depois de <html (não precisa apagar nada, apenas adicione um espaço entre o código colado e a próxima propriedade definida na tag):


xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://opengraphprotocol.org/schema'

Agora, logo abaixo de <head>, inclua:

<meta content='SEU-USER' property='fb:admins'/>
<meta content='SUA-CHAVE-API/APP-ID' property='fb:app_id'/>

Onde SEU-USER você substitui pelo seu nome de usuário do facebook (não é o seu NOME, é o que vem no LINK do seu perfil: facebook.com/esteeoseuuser) e SUA-CHAVE-API/APP-ID você coloca a App ID do aplicativo que você criou. Essas duas metatags vão dizer à página quem é o administrador daquele aplicativo.

2: Incluir o SDK JavaScript do Facebook no blog

No HTML do blog, procure por <body e, logo após o fechamento desta tag, cole o seguinte:

&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
&lt;script&gt;(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 = &quot;//connect.facebook.net/pt_BR/all.js#xfbml=1&amp;appId=INCLUA-A-CHAVE-API-DO-SEU-APP&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;

E coloque a chave API do aplicativo que você criou no local indicado. A partir daí, qualquer aplicação do Facebook que você inclua no blog deverá funcionar corretamente.

Outra coisinha: Será preciso desativar algumas partes do recurso que você implantou pelo tutorial original. Como fazer isso? Se você segue o conselho de fazer um backup do template antes de fazer modificações no código, basta subir o arquivo XML que você baixou anteriormente. Caso não, siga os passos ao contrário do tutorial para retirar os blocos de código que você incluiu.

Recomendo que você visualize o seu blog após cada alteração para verificar erros e, caso tudo certo, salve. Assim, se acontecer algum outro impasse durante o tutorial, é mais fácil achar onde está o erro.

Agora, vamos depurar os problemas descobertos e apresentar as soluções encontradas.

Problema 1: Alguma coisa no tutorial deu conflito com dois plugins de jQuery que eu já utilizava, um em cada blog em que tentei implantar o sistema.

Solução: Como o tutorial do Fabiano utiliza jQuery, tentei criar um JS normal que obtivesse o mesmo efeito. E consegui, meus plugins voltaram a funcionar.

Aplicando a solução: No HTML do seu template, procure por </head> e, logo acima, cole o JS a seguir:

<!-- script para Comentários do Blogger e Facebook Simultaneamente - Sem bugs! [Autoria de Yara G. - www.seethehalo.net] -->
<script language='JavaScript'>
function showComments(tipo) {
if (tipo == 1) {
window.document.getElementById(&#39;blogger-comments-page&#39;).style.display=&quot;block&quot;;
window.document.getElementById(&#39;fb-comments-page&#39;).style.display=&quot;none&quot;;
window.document.getElementById(&#39;blogger-comments&#39;).style.background=&quot;#f2f2f2&quot;; //cor da aba ativa editavel
window.document.getElementById(&#39;fb-comments&#39;).style.background=&quot;#d1d1d1&quot;; // cor da aba inativa editavel
} else if (tipo == 2) {
window.document.getElementById(&#39;fb-comments-page&#39;).style.display=&quot;block&quot;;
window.document.getElementById(&#39;blogger-comments-page&#39;).style.display=&quot;none&quot;;
window.document.getElementById(&#39;fb-comments&#39;).style.background=&quot;#f2f2f2&quot;; // cor da aba ativa editavel
window.document.getElementById(&#39;blogger-comments&#39;).style.background=&quot;#d1d1d1&quot;; // cor da aba inativa editavel
}
}
window.onload = function(){
showComments(1);
}
</script>

Há um detalhe editável destacado nesse script: a cor que as abas adquirirão quando uma e outra forem clicadas. É importante definir os valores hexadecimais das cores com os seis caracteres. Se você for usar, por exemplo, preto, e quiser colocar só #000, ele não aceita. Tem que ser #000000 (veja aqui o Código HTML das Cores). E muito cuidado para não apagar nenhum &quot; senão nada funciona.

Trocar a aplicação jQuery do tutorial original por JavaScript simples não vai ser útil apenas se você usa algum outro jQuery que possa gerar conflito. Isso também faz parte da solução de outro problema muito apontado. No próximo passo veremos o destaque do número 1 na chamada da função no fim do script.

Problema 2: O povo (eu, inclusive) queria deixar os comentários do blogger como aba selecionada padrão.

Solução: Bom, aqui eu combinei uma mudança no código que sugeri num comentário que deixei lá no tutorial original com o script que eu criei, e consegui fazer isso perfeitamente.

Aplicando a solução: Atentem para o destaque da chamada da função no fim do script, que eu já frisei anteriormente. Se você quiser deixar a aba dos comentários do Blogger como padrão, o número que a função chama deverá ser 1; se você preferir o sistema do Facebook primeiro, substitura pelo número 2 nessa parte do código:

window.onload = function(){
showComments(1);
}

A outra parte desta resolução vem no passo abaixo.

Problema 3: As abas não apareciam caso não houvesse nenhum comentário pelo Blogger.

Solução: Matei essa charada antes de voltar pra ler os comentários da galera em geral. Simplesmente inserir o código abaixo após ambas as ocorrências de <div id='comments' class='comments'> que fica tudo lindo e normal.

Aplicando a solução: Este é quase o mesmo código do tutorial original do Fabiano, eu alterei apenas duas coisas: a ordem de um pedaço do código para resolver o pepino anterior e o evento onClick para responder ao JS que eu criei:

<div class='comments-tab' id='blogger-comments' onClick='showComments(1);' title='Comentários no Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comentários
</div>

<div class='comments-tab' id='fb-comments' onClick='showComments(2);' title='Comentários no Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comentários
</div>

<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Configurei aqui para que a aba de comentários do Blogger apareça à esquerda e seja a padrão. Para fazer com que a do Facebook apareça à esquerda, coloque o código destacado em azul (correspondente ao do Face) acima do destacado em laranja (correspondente ao Blogger), atentando à modificação no script descrita no passo anterior.

Lembre-se também de que os atributos num_post='3' e width='450' são editáveis.

Problema 4: (Sim, depois de tanto pastar até fazer tudo funcionar direito, encontrei outro pepino!) Nada funciona nas páginas estáticas!

Solução: Inserir a parte que mostra os comentários do face com uma condicional específica para páginas estáticas.

Aplicando a solução: Volte às duas vezes que você inseriu código após a <div id='comments' class='comments> e, logo após </b:if>, inclua mais isso:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='3' width='450'/>
</b:if>

Edite também os valores num_post='3' e width='450' do mesmo jeito que você configurou anteriormente.

Isso aqui só tem um porém: se você desativou os comentários em alguma página estática específica, as abas vão aparecer do mesmo jeito. Como esse detalhe eu infelizmente não consegui resolver, só reativando os comentários do Blogger para não ficar a aparência feia.

Pós-passos: Não se esqueça de incluir o CSS para que as abas adquiram aparência de abas.

É o mesmíssimo código do Fabiano, eu apenas comentei para vocês saberem o que alterar para ficar em conformidade com o script. Procurem, no HTML do template, por ]]></b:skin> e insira o seguinte logo acima:

.comments-page {
background-color: #f2f2f2; /* use a mesma cor que você colocou lá no script */
}
#blogger-comments-page {
padding: 0px 5px;
display: none;
}
.comments-tab {
float: left;
padding: 5px;
margin-right: 3px;
cursor: pointer;
background-color: #f2f2f2; /* use a mesma cor que você colocou lá no script */
}
.comments-tab-icon {
height: 14px;
width: auto;
margin-right: 3px;
}
.comments-tab:hover {
background-color: #eeeeee; /* também é editável */
}

Também excluí a parte relativa à class .inactive-select-tab, porque não vamos mais precisar dela.

Prontinho! Depois de tudo isso, o sistema deve estar funcionando lindamente sem qualquer erro no seu blog. :D

Só peço para que o crédito ao início do script não seja removido, pois ele, assim como o presente tutorial, foi elaborado após muito trabalho, observação, testes, erros, possibilidades gritantes de estrago de dois templates dificultosíssimos e um belo churrasco de neurônios!

Leia também:
Como dar Destaque nas suas Postagens no Facebook
Colocar Gadget de Posts Recomendados do Facebook no Blog

Por fim, agradeço à oportunidade do Dicas Para Blogs de envio de Guest Post e principalmente à concessão da permissão para eu adaptar um tutorial já existente. Sucesso a todos!

Yara G.
www.schreiindeutsch.net
www.seethehalo.net

Nós (Dicas para Blogs) que agradecemos a sua colaboração com nosso blog com essas soluções para problemas na implantação dos comentários do Facebook junto com os comentários do Blogger.

18 comentários :

  1. Saudações!
    Em primeiro lugar, obrigado pelas suas dicas. Sigo o seu blogue no Feedly faz tempo.
    Possuo alguns blogues no Blogger, experiências que fiz, só falta escrever conteúdo com mais frequência, mas é uma questão de me organizar melhor.
    No entanto, há uma coisa que me chateia no sistema de comentários do Blogger: é o fato de não me notificar de respostas quando comento em outros blogues da Blogger. Sabe se há alguma forma de ativar a notificação?
    Abraço!

    ResponderExcluir
  2. Paulo quando você comenta em outro blogs do blogger tem o link inscrever-se por email abaixo da caixa de comentários..... então você precisa se cadastrar para receber os avisos...

    mas concordo que esse deve ser um recurso pouco conhecido e utilizado.

    ResponderExcluir
  3. preciso de ajuda, as imagens (foto) de quem comenta sumiram, agora só aparece o nome da pessoa, o que eu devo fazer?

    ResponderExcluir
  4. qual foto? do perfil blogger... deve ser devido a alteração no código ....

    ResponderExcluir
  5. Amigo, quando voce disse (Simplesmente inserir o código abaixo após ambas as ocorrências de <... id='comments' class='comments'>) eu não achei no meu código essas ocorrências... fiquei confuso, sai procurando (<... id=...) mas tem muito código com esse e nenhum (...'comments' class='comments'>) Tive que restaurar meu backup... deu tudo certo até aqui, porém pra prosseguir preciso da sua ajuda.
    Explica direito onde os códigos azul e amarelo, sou iniciante, obg

    ResponderExcluir
  6. Deyvson o grande problema é que isso varia conforme o template justamente por isso em alguns casos não tem como dizer o lugar especifico então precisa fazer alguns testes.

    mas tente usar o ctrl f e procurar trechos mais especificos, por exemplo para achar
    div class='comments-tab' id='blogger-comments'

    pesquise no ctrl f por comments-tab que é o nome do estilo e esse temos certeza que se existir será desta forma que estará escrito.

    ResponderExcluir
  7. Olá, eu tenho um HTML do blogger personalizado, e tentei por esse sistema, porém quando comentam pela aba do blogger, fica como se eu não tivesse esse sistema, ele simplesmente some... Você saberia como resolver isso? Fiz com um blogger teste com o HTML padrão, e deu certinho, só com esse novo que comprei que não funciona...
    Caso queira dar uma olhada, esse é o blog de testes que tentei por e que não deu certo, tentei até as suas dicas, mas não ajudaram.
    http://testesdjessica.blogspot.com.br/

    ResponderExcluir
  8. Djéssica
    o novo que comprei não funciona.....

    o que você comprou? template? blog?

    deve ser algum código no template personalizado que está gerando o problema

    ResponderExcluir
  9. Adorei e estou usando.
    Gostaria de sugerir mais uma aba p comentar com Google+.
    Abraços...

    ResponderExcluir
  10. por enquanto não achei um tutorial para colocar os comentários do Google+ nas abas mas espero conseguir isso em breve.

    ResponderExcluir
  11. Segui este tutorial aqui (http://coisasdameri.blogspot.com.br/2013/09/comentarios-do-blogger-com-abas-para.html) para acrescentar a aba do Google + e junto do seu tutorial corrigi um outro probleminha. Porém, os botões de "curtir" que apareciam em todas as minhas postagens sumiram. Agora só tem o do Twitter.

    Lembro que em outro blog meu tive esse problema e consegui corrigi, mas agora não lembro como...

    ResponderExcluir
  12. o botão curtir e os comentários do facebook usam um mesmo trecho de código, então talvez tenha apagado esse trecho quando foi editar o botão curtir ou os comentários do facebook no blog.

    infelizmente descobrir exatamente qual é o problema é difícil, se usou aquele tutorial e funcionou deveria tentar o mesmo novamente

    ResponderExcluir
  13. Olá!
    Não estou conseguindo instalar em meu blog os comentários.
    Já tentei esse tutorial e aquele original http://www.dicasparablogs.com.br/2012/02/como-usar-comentarios-do-facebook-e-do.html
    Mas nada funciona. Só aparece o botão curtir que instalei nas postagens..
    Será que pode me ajudar?

    ResponderExcluir
  14. Victor se já usa o botão curtir tem que verificar se não tem códigos repetidos do facebook no seu blog porque o botão curtir e os comentários tem trechos do código iguais.

    além disso em alguns templates gera erro por causa das personalizações feitas

    ResponderExcluir
  15. Olá, Estou com dificuldades para inserir o coments do facebook no meu blog, já me guiei em diversos tutoriais, todos em vão dê uma olhada ... http://torvidesigner.blogspot.com.br/

    Me ajudem !

    ResponderExcluir
  16. TORVI Designer infelizmente em templates personalizados como é o seu caso é mais difícil encontrar (resolver) o problema.

    a única alternativa é tentar retirar todos os códigos do facebook e tentar colocar novamente mas tenha cuidado para não deixar códigos duplicados pois isso pode gerar problemas

    ResponderExcluir
  17. O meu problema eh para responder comentarios. Depois que customizei meu layout o botao responder nao funciona mais (e isso foi antes de personalizar a aparencia dos comentarios). Nunca tinha mexido em nada dos codigos do comentario, ate ter esse problema e tentar buscar alguma solucao.
    Jah olhei em diversos sites e foruns, brasileiros e em ingles, mas nao achei nada que resolvesse.
    Voce sabe como posso corrigir isso?
    blog afetado: http://lectergirl.blogspot.no/

    ResponderExcluir
    Respostas
    1. o que pode modificar é formatar o texto dos comentários (use o inspecionar elementos do firefox ou chrome para achar os nomes dos estlios css)

      Excluir