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):
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:
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:
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 " 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:
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 == "static_page"'>
<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:
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.
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:
<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/all.js#xfbml=1&appId=INCLUA-A-CHAVE-API-DO-SEU-APP";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
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('blogger-comments-page').style.display="block";
window.document.getElementById('fb-comments-page').style.display="none";
window.document.getElementById('blogger-comments').style.background="#f2f2f2"; //cor da aba ativa editavel
window.document.getElementById('fb-comments').style.background="#d1d1d1"; // cor da aba inativa editavel
} else if (tipo == 2) {
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="#f2f2f2"; // cor da aba ativa editavel
window.document.getElementById('blogger-comments').style.background="#d1d1d1"; // 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 " 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 == "item"'>
<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 == "static_page"'>
<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.
Marcadores: Comentários, Facebook, Guest Posts