21/02/2012

Como Usar Comentários do Facebook e do Blogger ao Mesmo Tempo

Dar mais opções de comentários no seu blog é muito útil para conseguir mais comentários e se utilizar os comentários do Facebook junto com os comentários do Blogger poderá ter mais comentários e links divulgando as postagens do seu blog no Facebook. Então vamos mostrar como colocar no seu blog ao mesmo tempo os comentários do Facebook e os comentários padrão do Blogger juntos para que seus visitantes em apenas um clique possam escolher qual sistema de comentários desejam utilizar e assim proveitar para ter comentários e visitas no blog.

usar comentários do blogger e do facebook juntos

Caso ainda não tenho criado uma aplicação no facebook recomendamos que leiam nosso outro tutorial: Como Criar Aplicativos no Facebook e Usar Comentários no Blog para saber como fazer e pegar a ID do seu aplicativo de comentários do facebook porque vamos utilizar isso neste tutorial.
achar id do aplicativo do Facebook

Nós vamos colocar os códigos para mostrar os comentários do blogger e facebook juntos no seu blog. Na verdade são 3 partes de códigos, mas recomendamos colocar uma por vez e salvar antes de inserir a próxima, pois no teste que fizemos colocando as 3 partes de uma vez deu erro na hora de salvar, mas fazendo uma por vez funcionaram perfeitamente os códigos HTML, CSS e javascript no blogger.

Recomendamos fazer um backup do seu template antes de fazer modificações no seu blog. Agora entre na pagina editar HTML e marque a opção expandir modelo de widgets.

Procure pela linha <div class='comments' id='comments'> (se achar mais de um utilize o que estive mais no inicio do html) e coloque depois dessa linha o seguinte código:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' 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='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'>

Depois que fizer o teste você pode ajustar a largura da caixa de comentários alterando o valor 450 e também o numero que comentários do facebook que aparecem no seu blog trocando o numero 3, neste trecho: fb:comments expr:href='data:post.url' num_posts='3' width='450'/

Clique para salvar e procure por </head> e coloque antes dele esse código, mas troque a parte YOUR_FB_ID pelo id do seu aplicativo no facebook como mencionamos no inicio deste post:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>


Salve novamente e procure por ]]></b:skin> e insira esse estilo CSS antes dele:

.comments-page {background-color: #f2f2f2;}
#blogger-comments-page {padding: 0px 5px;display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Agora é só salvar mais uma vez e visualizar seu blog que já está tudo pronto e agora seu blog vai mostrar os comentários do facebook e blogger ao mesmo tempo. Se quiser poderá ver outras maneiras de colocar comentarios no blog:
Colocar Comentários do IntenseDebate no Blogger
Usar Comentários do Disqus no Blogger - Personalizar Caixa de Comentários
Permitir Comentários em Algumas Postagens - Opções de Postagens

Esperamos que gostem dessa opção que acabamos de mostrar e deixem seu comentário sobre usar o facebook no blog ou qualquer outro assunto interessante para blogueiros.
Related Posts with Thumbnails

393 comentários:

  1. como faço para o número de comentários do facebook???

    ResponderExcluir
  2. Acabei de testar e funcionou de primeira... muito bom

    ResponderExcluir
  3. Emmanoel Belo de Souza
    só aparece o numero de comentarios do facebook do que está na segunda primeira imagem do tutorial.

    não tem como somar os dois, ou seja usando o exemplo da imagem são 7 comentários (3 do facebook e 4 do blogger) mas não dá para mostrar esse resultado.

    ResponderExcluir
  4. Tem como moderar os comentários do Facebook?

    ResponderExcluir
  5. Achei bem legal a dica mas pra quem tem o template bem modificado não funciona, eu por exemplo tenho que colocar meus códigos abaixo de: para que funcione alguma coisa, uma outra coisa engraçada é que funcionou apenas no mozilla firefox os comentários via facebook... e essa dica aqui não funcionou nada no meu :(

    http://vbmobiles.blogspot.com, endereço do meu blog, caso consiga me dar uma ajudinha eu agradeço muito!!

    Obrigado pela dica.

    ResponderExcluir
  6. Gostaria de saber como colocar os comentários do Facebook e do disqus juntos

    ResponderExcluir
  7. VH
    é que em templates modificados as vezes as tags são outras.

    mas veja se tem mais de uma vez o codigo: div class='comments' id='comments' e tente colocar em algum outro igual a ele.

    ResponderExcluir
  8. Ótima dica.

    Já utilizo este recurso a um bom tempo e tem sido muito útil para meu blog

    ResponderExcluir
  9. Anônimo
    acho que deveria colocar os comentarios do disqus e depois tentar colocar os do facebook.

    ResponderExcluir
  10. sobre moderar os comentarios do facebook isso é nas configurações.

    veja na primeira imagem que aparece a palavra configurações no canto dos comentarios, clique nela.

    mas só aparece se você estiver logado no facebook

    ResponderExcluir
  11. Olá. Mais um óptimo post, gostei muito. Mas tenho uma dúvida.. e quem utiliza o Disqus ? Isso resulta da mesma maneira ?
    Obrigado e aguardo por uma resposta..
    Abraço,
    wilker

    ResponderExcluir
  12. você pode também entrar neste link para moderar os comentários

    http://developers.facebook.com/tools/comments

    ResponderExcluir
  13. Wilker
    não testei com o disqus, mas acredito que seja uma questão de adpatar os códigos ou seja na parte onde tem os comentarios do blogger colocaria os do disqus.

    ResponderExcluir
  14. O link encontra-se indisponível...

    ResponderExcluir
  15. Também pensei nisso por acaso xd, vou fazer isso :) obrigado :)

    ResponderExcluir
  16. esse link?

    http://developers.facebook.com/tools/comments

    só funciona se estiver logado no facebook

    ResponderExcluir
  17. "Desculpa, mas ocorreu um erro.

    Estamos a tentar resolver esta situação o mais depressa possível.

    Retroceder" deve ser algo do momento, tento mais tarde entrar nesse link.

    ResponderExcluir
  18. ok, isso acontece, não tem pq se desculpar

    ResponderExcluir
  19. Fabiano,fiz o que você falou e funcionou.Só coloquei a imagem um pouco menor>1450x1100.Hospedei a imagem no picasa.Ajustou perfeito.O problema é que a parte do conteúdo continua estranha.Parece solta do back.Deixei a parte mais rosa para colocar o cabeçalho,mas o título e o resto do conteúdo ficam muito lá no topo.Tem jeito de ajustar isso?Fazendo o esquema de fatiar e instalar no html é melhor.E como fazer neste código XML?Dá uma olhada como ficou.> testblogarte.blogspot.com e testblogarteac.blogspot. Fiz estes dois para teste. Muito obrigada pela ajuda.

    ResponderExcluir
  20. Fabiano,o que quero é que a página role como a sua,porém com o fundo que fiz e com a cor que há nele para a área da postagem.Assim como a sua.

    ResponderExcluir
  21. Não gostei muito do sistema de comentários do Facebook, pra mim, ele é mais conectado a rede social do que ao blog, mesmo assim, ótimo tutorial, Fabiano! Estava até pensando em testar em outro blog meu para ver se eu mudo de ideia.

    Os comentários do Facebook podem ser sincronizados com os do Blogger? Pois se eu for usar, terá que ser um dois dois, existe forma de conectar?

    ResponderExcluir
  22. Gostei muito do post. Ficou otimo no meu site, mas resovi deixar como estava.

    ResponderExcluir
  23. Fabiano, e se eu já tiver uma caixa de comentários do facebook no meu blog. Eu preciso excluir ela e depois fazer esse processo ?

    ResponderExcluir
  24. Ana Cristina
    o fundo do nosso blog é uma cor e a parte das postagens e colunas é uma imagem mais simples que a sua por isso é facil fazer ela continuar até o final da pagina, veja a imagem que usamos: http://acessoriosparablogs.com.br/imagem-fundo.gif

    Dymas
    acho que não tem como sincronizar os comentarios do blogger e facebook.

    mas a idéia principal ao usar esses comentarios é conseguir divulgação no facebook

    Matheus Augusto
    é melhor retirar os comentarios do facebook que já tem no blog e depois colocar esse código.

    ResponderExcluir
  25. Fabiano,muito, muito obrigada pela sua ajuda!Consegui deixar o background do jeito que quero.Só gostaria que me ajudasse em mais uma dúvida:Aumentei a largura da área de postagem no design de modelo,mas o cabeçalho não fica centralizado.Tem jeito de centralizar ou tenho que diminuir o tamanho do background?Não queria a área de post tão estreita.Fiz novamente medindo 1800x1600.Dá uma olhada:cantinhodataika3.blogspot.com É outra página de teste(rs).

    ResponderExcluir
  26. Primeiramente parabéns pelos 5 anos de blog e quase 6milhões de visitas. Mais como eu excluo a caixa de comentários para poder adicionar essa ? { eu estou com a caixa de comentários do facebook, e gostaria de colocar somente essa }

    ResponderExcluir
  27. Fabiano, como eu faço para que os marcadores, abaixo da postagem, apareçam somente na página inicial do Blog??

    ResponderExcluir
  28. Ana Cristina
    então precisa alterar a imagem para a largura das postagens que você quer e colocar a imagem no seu blog.

    depois isso ajustar a largura no html para ficar dentro da imagem.

    Marcos Vinicius

    entre na pagina editar html, marque para expandir o modelo e procure um trecho mais ou menos igual esse:

    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span>

    agora coloque as linhas b:if que estão em negrito.

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <span class='post-labels'>
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span>
    </b:if>

    não posso dizer exatamente como é no seu blog pois varia um pouco conforme o template.

    ResponderExcluir
  29. Matheus Augusto
    obrigado pelos parabéns.

    quando li seu comentário falando em 5 anos... sabe nem acredito que já passou tanto tempo (passou muito depressa)

    ResponderExcluir
  30. Acha, por nada. Mais como eu excluo a caixa de comentários para poder adicionar essa ? { eu estou com a caixa de comentários do facebook, e gostaria de colocar somente essa }

    ResponderExcluir
  31. ô fabiano, o desenvolvedor do aplicativo do facebbok para comentários no blogger, agora tem que ser pago para criar o aplicativo.

    ResponderExcluir
  32. Eu uso o comentários do Facebook, mas na minha opinião:

    O comentários do Facebook faz com que as pessoas sentem mais vontade de comentar e ao mesmo tempo conecta as pessoas, mas também tem desvantagens, pois tem pessoas que querem comentar mas não tem conta em nenhum dos provedores login que o comentários permite...

    Porque você não usa o do Blogger e o do Facebook, assim os visitantes terá mais opções de comentar??

    ResponderExcluir
  33. Matheus Augusto
    não precisa excluir nada, só fazer as alterações que mostramos.

    mas tem que ser com a opção de comentários incorporada a pagina

    ResponderExcluir
  34. Phablo Project
    acho que não é pago. pelo menos quando criei não tinha nenhum aviso sobre isso.

    Marcos Vinicius
    na verdade já estou testando no blog frases curtas

    mas acho que em breve sou usar aqui também

    ResponderExcluir
  35. Fabiano, não consegui por culpa da ID! O link da ID não funciona, entra nele, e ele redireciona pra pagina inicial do facebook! Esse link: http://developers.facebook.com/

    ResponderExcluir
  36. Não, não, o link é esse http://developers.facebook.com/setup/

    ResponderExcluir
  37. Fabiano , eu fiz tudo como explicou mais não consegui. Da uma olhadinha no meu blog e ve o que posso fazer para arrumar esse sistema por gentileza? http://foco-news1.blogspot.com

    ResponderExcluir
  38. ola amigos do dicas para blogs eu tenho um blog e queria adicionar varias imagens ao msm tempo que ja estão hospedadas em um site ai eu qeria um programa ou codigo que ja adicionassem o junto com o link, aqui vai o meu email para vcs que quiserem me adicionar tarcisinho.96@hotmail.com

    ResponderExcluir
  39. Anônimo
    acho que não tem como usar as imagens(emoticons) junto com os comentarios do facebook

    Matheus Augusto
    pode ter mais de um div class='comments' id='comments' no seu html, então tente colocar no outro

    ResponderExcluir
  40. Infelizmente continuo sem conseguir. Vou deixar do jeito que está mesmo. Mais mesmo assim obrigado ... abraços

    ResponderExcluir
  41. Coloquei esse sistema de comentários no meu Tumblr mas os comentários são os mesmos para todos os posts. Como faço para que cada post tenha os seus próprios comentários?

    ResponderExcluir
  42. acho que não tem notificação, você precisa entrar na pagina de moderação do facebook

    Roger
    não testei esses comentarios no tumblr ainda

    ResponderExcluir
  43. Vou testar agora. Obrigado pelo post.

    ResponderExcluir
  44. é o segundo tutorial que vejo sobre o assunto, mas, infelizmente ainda não conseguir instalar no meu blog =/ deve ser zica, uso o template minima modificado... segui ao pé da letra o tudo mas não funfa lá -.-'

    ResponderExcluir
  45. o lugar de colocar os codigos pode variar um pouco conforme o template... ou as personalizações já feitas nele

    ResponderExcluir
  46. Fabiano, não consigo fazer a aplicação, esse link ai http://developers.facebook.com/setup/ redireciona pra minha HOME do face! E agora? :(

    ResponderExcluir
  47. O formulario da funcionando perfeitamente mas ta aparecendo um aviso dizendo que a minha url esta inacessível o que pode ser isso??? url do blog afetado - http://portal-prive.blogspot.com/

    ResponderExcluir
  48. Anônimo
    você cadastrou seu celular ou alguma outra forma de verificação da sua conta no facebook?

    só pode criar aplicativo quem já fez isso.

    Roger
    veja se colocou os códigos nos lugares certos e se criou o aplicativo no facebook com a identificação do seu site.

    ResponderExcluir
    Respostas
    1. Tambem tou tendo o mesmo problema, ja teste com varios outras urls mesmo de sites q nao sao meus e todos funciona, mas quando tento por esse "http://credo-muleke.blogspot.com/" nao consigo.

      Alguma sugestao?

      Excluir
  49. o meu deu certo! Agora,como faço para colocar somente o simbolo do blogger e do facebook como o seu?Obrigada

    ResponderExcluir
  50. Fabiano, pode desconsiderar minha pergunta. Eu refiz e deu certo. Deve ter faltado algum código no HTML.Esse Blog ajuda muito.

    ResponderExcluir
  51. RE: " entre na pagina editar html, marque para expandir o modelo e procure um trecho mais ou menos igual esse:



    agora coloque as linhas b:if que estão em negrito. "

    Sim. mas tem como fazer com que os marcadores não apareçam também nas postagens de um marcador?


    POR EXEMPLO: RETIRAR "" Mais Frases sobre: Datas Especiais, Dia dos Pais, Vida "" dessa página http://www.frasescurtas.com.br/search/label/Dia%20dos%20Pais

    ResponderExcluir
  52. veja se colocou os código nos lugares certo, tem duas tags div class='comments' id='comments' no html, talvez você tenha usado a errada

    ResponderExcluir
  53. Marcos Vinicius
    acho que não tem como ocultar o marcador no menu na pagina dele mesmo.

    ResponderExcluir
  54. seguindo esse tuto, a única coisa que não aparece são as abas,no meu blog... mas , comparado a outros que visualizei pela net, esse é o mais complexo!!! :D de qualquer forma, ótima dica.

    ResponderExcluir
  55. bem, depois de ir testando muitas e muitas vezes e lendo os comentários aqui, visualizei que existe duas Tags div class='comments' id='comments' estava colocando na primeira que me aparecia, quando adicionei na segunda, funcionou corretamente!! :D Obrigado aos desenvolvedores desse site, sempre ajudando, também 5 anos de história não são 5 dias, parabéns e mais um Obrigado ;)

    ResponderExcluir
  56. Anônimo tem que usar os comentarios incorporados a pagina para funcionar.

    WMaster
    quando paro para pensar nisso (5 anos) nem acredito que já passou tanto tempo

    ResponderExcluir
  57. [aaa] No meu deu certo Ufa! Pensei que não iria dar, porque só funcionou na segunda vez do código : div class='comments' id='comments' .
    Pena que o design não ficou igual o seu. Vou ver se é por causa da largura! Eu acho ://

    Muito obrigada!
    http://leticiac04.blogspot.com/

    ResponderExcluir
  58. a largura você pode ajustar nessa linha
    fb:comments expr:href='data:post.url' num_posts='3' width='450'/

    ResponderExcluir
  59. criou o aplicativo no facebook e usou o numero correto dele no código quando colocou no seu blog?

    nos testes que fiz tudo funcionou corretamente

    ResponderExcluir
  60. fabiano é normal aparecer um aviso no comentario do facebook assim oh -> Aviso: http://dcontroles.blogspot.com/2012/02/produtora-de-angry-birds-promete.html é inacessível. ?

    ResponderExcluir
  61. vinicius é estranho dar erros.

    porque em todos os testes que fiz funcionou da primeira vez sem problemas

    Dcontroles não era para aparecer a mensagem.

    em ambos os casos vocês usando o numero correto do aplicativo do facebook?

    ResponderExcluir
  62. Fabiano, muito obrigado pelo post, fucionou direitino no meu blog, mais o fundo dos meus comentarios ficou branco, eu quero que inves de branco fique transparente

    Agurdo e agradeço antes de ter a resposta

    ResponderExcluir
  63. como assim criar o aplicativo? acho que é por isso que num deu...

    ResponderExcluir
  64. para deixar o fundo transparente use o código

    background-color: transparent;


    veja na parte final do código que mostramos tem background-color: #f2f2f2 e outros background é só trocar por transparent

    ResponderExcluir
  65. Mattheus Tricolor
    veja aqui Colocar Comentários do Facebook Blogger

    lá tem mais detalhado sobre o aplicativo do facebook

    ResponderExcluir
  66. Fabiano queria sua ajuda para abrir primeiro a opção de comentar pelo blog e ao lado a opção do facebook. Simplesmente inverter a posição, entendeu? Tentei mas não consegui.
    bjos

    ResponderExcluir
  67. vou tentar fazer uns testes para tentar inverter, mas por enquanto ainda não deu certo

    ResponderExcluir
  68. Fabiano, sou eu de novo.
    eu consegui colocar, mas tem um porém, meu blog é preto e os botões do sistema de comentário é branco.
    como eu mudo a cor de fundo? é no codigo?

    ResponderExcluir
  69. Mattheus Tricolor

    neste trecho tem as cores:

    .comments-page {background-color: #f2f2f2;}
    #blogger-comments-page {padding: 0px 5px;display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

    veja cada background-color é a cor de fundo de uma parte. Se quiser usar preto o código é #000

    mas existem muitos tons de cores escuras veja aqui o Código das Cores

    ResponderExcluir
  70. Aqui nao funciona cara. Nao tem nenhum numero antes do "comentarios" do facebook e quando eu clico fica em brando, inclusive no do seu blog mesmo. Alguma sugestão?

    ResponderExcluir
  71. Fabiano, me desculpa te estar incomodando toda hora, mas é o seguinte: eu consegui colocar o sistema de comentários e mudar a cor tudo direitinho, mas na opção de colocar comentário pelo facebook não aparece nada, porque? como eu ponho a caixa de comentário do facebook? abs...

    ResponderExcluir
  72. acho que os comentários do facebook estão com algum problema estava aparecendo e funcionando normalmente até ontem.

    vou aguardar mais um pouco para ver se volta ao normal e procurar por alguma informação no proprio facebook.

    ResponderExcluir
  73. na linha
    < script src='http://connect.facebook.net/pt_BR/all.js'/ >

    alterei dessa forma e resolveu

    < script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1' >

    ResponderExcluir
  74. Aproveitando, na minha aba do blogger nao aparece uma commentbox. Saberia explicar o porque?

    ResponderExcluir
  75. Mattheus Tricolor tem que expandir o modelo de widgets na pagina editar html para encontrar o código.

    Brave Fencer Deve ser algum código que adicionou no html.

    o unico jeito de resolver é achar o código e apagar.

    ResponderExcluir
  76. Este comentário foi removido pelo autor.

    ResponderExcluir
  77. Fabiano, consegui achar a linha, mas fiz todo como estava descrito e tudo que mostra é os comentários do blog. como se nada tivesse mudado.

    ResponderExcluir
  78. Desculpa a quantidade de posts por miha parte, mas problema resolvido. Eu havia seguido seu conselho de adicionar ao div class='comments' id='comments' superior, e não havia dado certo, ai apaguei no de cima e adicioeni no de baixo e funcionou, acho que no superior, não é uma regra.

    ResponderExcluir
  79. consegui fabiano, muito obrigado, desculpa o incômodo!
    parabéns pelo blog...

    ResponderExcluir
  80. onde vou pra conseguir o codigo do facebook?

    ResponderExcluir
  81. tem que criar o aplicativo no facebook.

    veja no link no inicio do tutorial

    ResponderExcluir
  82. fabiano, como eu mudo a cor do texto dos comentários do facebook?

    ResponderExcluir
  83. Mattheus Tricolor

    tente alterar essa linha
    fb:comments expr:href='data:post.url' num_posts='3' width='450'

    assim:

    fb:comments expr:href='data:post.url' num_posts='3' width='450' data-colorscheme='dark'/

    mas parece que só tem essa opção

    ResponderExcluir
  84. Fabiano,

    Também estou trabalhando nas cores das caixas de comentários, tanto do face quanto do blogger que ficou branco. Consegui mudar a cor da caixa do face pra "dark" como sugeriu mas a aba está branca.

    Pode me ajudar?

    ResponderExcluir
  85. Roberta Nogueira

    sobre a aba branca veja neste trecho do código

    .comments-page {background-color: #f2f2f2;}
    #blogger-comments-page {padding: 0px 5px;display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px;width: auto;margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

    aqui tem cores de fundo da caixa, veja os background-color

    ResponderExcluir
  86. Então, esse é o mesmo utilizado anteriormente com o fundo da cor que queria mas agora parece que não funciona. XD

    ResponderExcluir
  87. mas esse código muda o cor ao redor dos comentarios do facebook, mas a caixa de comentarios é gerada com a formatação do facebook.

    se quiser pode testar alterando o código que falei no outro comentário usando

    background-color:none;

    isso deixaria sem fundo ao redor.

    ResponderExcluir
  88. Fabiano,

    Deu muito certo!!!!!!!!!!!!!!!!! XD
    Obrigada!! Tá show de bola!

    ResponderExcluir
  89. fiz como mostrou no post e deu super certo, valeu!

    ResponderExcluir
  90. como aumenta a fonte (letra) dos comentários do facebook?

    ResponderExcluir
  91. acho que os comentários do facebook não permitem edição, mas vou fazer uns testes e se possivel um tutorial sobre o assunto.

    ResponderExcluir
  92. Oi Fabiano. Eu noto que você às vezes coloca palavras linkadas nos seu comentários. Como posso fazer isso também?
    Obrigada. Beijos:*

    ResponderExcluir
  93. Liege Karina


    o código é aquele que está na caixa "Link desta página" antes do botão curtir, retweet.

    é um código de link normal

    ResponderExcluir
  94. Eu mudei a configuração do meu blog para responder abaixo de cada comentário. Com isso, a opção de responder pelo facebook e comentarios do face sumiram. Tem como arrumar isso?
    Obrigada

    ResponderExcluir
  95. Adriana Fernandes
    acabei de responder seu outro comentário no post:
    Como Ativar a Opção Responder Comentários no Blogger


    mas os comentários do facebook estão dando alguns erros essa semana, acho melhor aguardar uns dias para tentar mexer nisso

    ResponderExcluir
  96. Esse post é muito interessante. Pode ajudar muitos blogueiros a resolverem os problemas com os comentários da sua página.

    ResponderExcluir
  97. Fabiano,
    Pq o blogger não conta os comentários?
    Tem como saber quantos comentários do sistema Facebook tem no blogger?

    ResponderExcluir
  98. os comentários do facebook são fora do blogger por isso não tem como contar juntos

    ResponderExcluir
  99. Fabiano ...

    Tentei fazer isso e deu certo somente os do facebook. O comentario do blogger, apesar de aparecer a opção, quando a gente clica fica em branco.
    Procurei como adicionar o comentário do blogger, fiz, porém continou não aparecendo. Chequei as configurações, também o layout na parte "Postagens" tudo de acordo para que o formulário de comentários apareça incorporado.

    Antes eu usava só os comentários do facebook, como já foi mostrado aqui como fazer, porém com essa nova opção ia transferir mas não consegui por causa desse problema

    Tem noção de como resolver, obrigado

    ResponderExcluir
  100. se já usava antes é melhor retirar o código para depois colocar esse para não misturar

    ResponderExcluir
  101. Por favor me ajuda... fiz todo o processo correto.

    Aparece esta msg:
    O plugin de comentários requer um parâmetro href.

    Ate minha caixa de fas que tem no meu blog nao aparece mais, so essa msg: Could not retrieve id for the specified page. Please verify correct href was passed in.

    O que pode ter acontecido??

    ResponderExcluir
  102. Mayara Sousa você configurou corretamente o aplicativo no facebook?

    ResponderExcluir
  103. Fabiano vc disse que vcs usam esse codigo em dois blogs e funcionou perfeitamente.

    http://www.frasescurtas.com.br

    Onde coloco isso no aplicativo do face?

    ResponderExcluir
  104. tem que criar o aplicativo no facebook e depois colocar o numero dele nesta linha


    meta content='YOUR_FB_ID' property='fb:admins

    no lugar de YOUR_FB_ID

    ResponderExcluir
  105. Criei o aplicativo e tudo mais.. alterei pelo o ID do aplicativo como diz no tutorial e nda.

    Vou parar esse dias em tentar... vou adicionar outras coisas em meu blog de teste. Dpois volto a mexer nisso dnovo... valeu!

    ResponderExcluir
  106. Os comentarios aqui do site hj so estao abrindo os do blogger msm e do facebook nada.
    E eu estou logada no face.

    ResponderExcluir
  107. infelizemente tem dias que o facebook dá uns erros nos comentarios

    ResponderExcluir
  108. tem como eu colocar um aviso + ou - assim: "escolha o sistema do comentário:".
    dá pra fazer isso?

    ResponderExcluir
  109. o jeito para deixar escolher é esse que mostramos colocar em abas lado a lado.

    acho que não tem como fazer como falou, mas se quiser pode colocar essa ou alguma outra frase falanndo sobre isso antes do código que falamos para colocar no trecho div class='comments' id='comments'

    ResponderExcluir
  110. Eu fiz tudo certo, porém apresta um erro. Fiz vários testes e comprovei que toda vez que faço um comentário via o blogger as guias desaparecem. Tanto do Facebook quanto do Blogger.

    Gostaria de saber se tem como resolver esse impasse.

    ResponderExcluir
  111. Está funcionando perfeitamente, mas queria dar destaque pros comentários do Blogger, não do Face. Ao abrir o post, gostaria de deixar os comentários do Facebook como segunda opção na aba, aparecendo primeiramente o Blogger. Vi que essa é uma dúvida de muita gente. Parece simples trocar, mas já tentei de tudo e aparecem muitos erros.

    (FB/Blogger - Blogger/FB).
    Sei que tem como trocar, porque já vi isso num blog do próprio blogger. Quero não só trocar a ordem, e sim abrir os comentários do blogger ao abrir o post. Estou procurando isso há anos e nada.

    Poderia ajudar? Não achei isso em canto algum. O Marcos do Ferramentas Blog não sabe, no Códigos Blog a mesma coisa... Se puder ajudar agradeço muito.
    Obrigado!

    ResponderExcluir
  112. Renato
    se esses outros blogueiros(que são muito bons) não acharam como fazer deve ser bem complicado mesmo, mas vou tentar fazer uns testes sobre isso e se conseguir farei uma postagem sobre o assunto.

    ResponderExcluir
  113. Rosemberg C.
    infelizmente em templates personalizados acontecem imprevistos, mas tente retirar alguns scripts por exemplo aquela enquete que aparece sobre a sua pagina.

    as vezes esses script geram erros uns nos outros. então precisa fazer alguns testes

    ResponderExcluir
  114. Valeu! Fico no aguardo. E não tem como somar os dois comentários pra aparecer na home não, né? Ou só do Blogger?

    ResponderExcluir
  115. não é possivel somar o numero de comentários do blogger e facebook

    ResponderExcluir
  116. Cara, estou com um problema, meu templante eh editado, com sub menus e slide de images, mas quando adiciono qualquer script do facebook no html, os sub menus e o slide de imagens simplesmente param, sabe o que eh isso? como posso resolver? agradeço desde já, vou ficar no aguardo.

    ResponderExcluir
  117. talvez algum código dos slides e do sub menu usem o mesmo nome.

    mas infelizmente alguns códigos geram conflitos com os códigos do submenu

    ResponderExcluir
  118. não consegui faze esse tipo mais consegue fazer outro jeito assim http://developers.facebook.com/docs/reference/plugins/comments/

    agora tenho seguinte duvida como bota moderação no jeito que fiz? assim "http://developers.facebook.com/docs/reference/plugins/comments/"

    ResponderExcluir
  119. a moderação é nesta pagina

    http://developers.facebook.com/tools/comments

    ResponderExcluir
  120. O MEU ESTA APARECENDO A SEGUINTE MENSAGEM QUANDO TENTO COMENTAR USANDO A OPÇÃO DO FACEBOOK "Este comentário ainda não foi publicado no Facebook. Publish Comment" O comentário só é publicado depois qe a pessoa clica nesse Publish Comment. Isso acontece mesmo com a opção de publicar no facebook estar selecionada. Eu vi aqui no blog e não acontece isso. Acho qe o erro foi na hora de criar o app vcs tem um tutorial atualizado ? pq no outro as imagens de explicações são diferentes. Pq isso esta acontecendo? HELP

    ResponderExcluir
  121. mas o tutorial que usamos foi exatamente esse para colocar os comentarios neste blog

    ResponderExcluir
  122. Olá Fabiano,

    Então, estou muito satisfeita porque deu certo para mim usar os comentários com blogger e facebook tb. Inclusive consegui colocar borda sombreada nas tabs e mudar as cores de fundo, assim fica mais em evidência, para o leitor.

    Escrevo sobre temas totalmente diferentes dos teus rsrs, mas estou preparando uma página de créditos em meu blog, e estarei incluindo o teu, sem compromisso algum, pois várias dicas eu consegui aqui para personalizar o meu.

    Muito obrigada,
    Paz e sucesso a ti ;)

    Lucy

    ResponderExcluir
  123. ps: esqueci de perguntar algo:

    tem como sermos notificados por email quando recebemos comentários do facebook?
    Digo isto, pois tenho de frequentemente tenho de entrar naquela página de desensolvedores para ficar verificando se recebi comentários, o que é muito chato, pois não recebo notificações.
    Como poderia alterar esta opção para que eu fosse avisada vc sabe?

    grata desde já

    ResponderExcluir
  124. acho que o unico jeito é entrando na pagina de moderação

    ResponderExcluir
  125. Testei mais de 8 vezes e no meu blog não muda nada... Não cria a aba de comentários do facebook...

    O que posso fazer para que o código funcione?

    ResponderExcluir
  126. infelizmente em alguns templates não dá certo

    ResponderExcluir
  127. descobri o erro, é só colocar no 2º div class='comments' id='comments' que aparece. vlw pelo codigo.

    ResponderExcluir
  128. Comigo funcionou, mas percebi que a caixa de comentários do facebook diferencia páginas com e sem "www".
    Por exemplo, se na página de um post onde a url está com "www" tiver 5 comentários, se eu tirar o "www" a página fica com nenhum comentário.
    Isso é um problema porque alguns aplicativos levam pra páginas do blog colocando o "www", já outros não, isso causa um desencontro nos comentários.

    ResponderExcluir
  129. Olá Fabiano eu coloquei esse sistema de comentários no meu blog e funcionou direitinho só com um porém meu blog tem um silide ai quando eu coloco esse script que fica proximo a tag HEAD o meu slide para de funcionar. Me de uma ajuda ai por favor como é que eu faço para os scripts funcionar simultaneamente.

    Desde ja agradeço.

    ResponderExcluir
  130. Marcos
    teoricamente não era para dar problemas...

    tem certeza que não apagou nenhuma linha por engano ou mesmo algum sinal, por exemplo se faltar > " / ' em algum lugar já é o suficiente para dar erro no código

    ResponderExcluir
  131. Muito bom. Funcionou bacana, mas depois que coloquei os códigos, quando clicko na aba dos comentários do Blog aparecem os comentários do Facebook novamente.
    Não estou conseguindo visualizar os comentários do Blog.
    Tem alguma ideia do que pode ser?
    Valew.

    ResponderExcluir
  132. verifique se colocou todas as partes dos códigos no lugares certos

    ResponderExcluir
  133. Como faço para ficar igual o seu assim um ao lado do outro? com a opçao de escolher qual quer escrever, eu fiz porem ficou o face em cima e o comentário do blogger embaixo, como posso fazer para ficar em aba igual aqui????

    ResponderExcluir
  134. foi esse tutorial que usamos para colocar os comentarios do facebook e blogger juntos, mas acho que não tem como inverter a ordem

    ResponderExcluir
  135. o meu não ficou em abas igual o seu como faço??? fiz tudo igual, porém nao deu certo vc pode me ajudar? tem como conversar contigo sem ser so por aqui?

    ResponderExcluir
  136. muita gente fala em conversar por msn ou skype, mas não seria possivel atender a todos.

    infelizmente alguns templates dão erros com esse código

    veja se configurou corretamente o aplicativo do facebook

    ResponderExcluir
  137. Valeu min ajudou muito visite meu blog http://www.lmxdesinger.blogspot.com

    ResponderExcluir
  138. eu consegui colocar os comentarios, mas não como esta no seu site.
    No meu blog ficou os comentarios do facebook e logo abaixo ficou o do blogger.
    http://opinioespromundo.blogspot.com.br/

    Se você quizer da uma olhadinha...

    ResponderExcluir
  139. Fabiano tenho que te agradecer... a tempos estou tentando colocar comentário no Face no meu blog... já tinha tentado de tudo... Mas agora finalmente deu certo *-*

    Obrigada :)

    ResponderExcluir
  140. Segui todos os passos corretamente, porém não deu certo... Será que é por conta do meu template? Poderia me dar alguma dica?

    http://www.calangodocerrado.net

    ResponderExcluir
  141. Olá Fabiano, obrigado pela dica e pela atitude de compartilhá-la, bacana isso. Parabéns.
    Agora uma dúvida: existe uma maneira de colocar a aba dos comentários do blogger antes da do Face?
    Abçs

    ResponderExcluir
  142. Milton Kennedy
    já fiz alguns testes sobre isso mas não funcionou. Além disso nas pesquisas que fiz também não achei como deixar os comentários do blogger aparecendo primeiro

    ResponderExcluir
  143. Ola amigo no meu blog ja e diferente nao aparece o do facebook so a do blogger como sempre era antes ou seja nao acontece nada..

    http://gospel02.blogspot.com/

    ResponderExcluir
  144. Lobo Sousa veja que na caixa de comentários do facebook tem a opção:
    Publicar no Facebook

    então só vai aparecer no facebook se quem comentou deixar isso marcado

    ResponderExcluir
  145. mas eu nao consigo comentar no facebook porque a caixa de comentarios do facebook nao esta aparecendo! so a do blogger.

    ResponderExcluir
  146. Creio que agora deu tudo certinho. Você poderia dar uma olhadinha em meu blog? Pra ver se fiz a coisa certa? =)

    Abração

    ResponderExcluir
  147. Lobo Sousa infelizmente em alguns momentos realmente não aparece a caixa de comentários do facebook, mas ela sempre volta ao normal em alguns minutos.

    ResponderExcluir
  148. Fabiano vc sabe me dizer porque a caixa aparece somente depois do primeiro comentário do blogger?
    Quando faço a postagem ela não aparece, mas depois do primeiro comentário ela funciona, será que é preciso adicionar algo para que apareça? Obrigada pela ajuda =)

    ResponderExcluir
  149. Vanda
    notei esse erro uma vez no meu blog mas foi algo momentaneo e logo passou a funcionar normalmente

    ResponderExcluir
  150. Obrigada fabiano problrma resolvido.

    ResponderExcluir
  151. Obrigada, vamos ver se vai aparecer então, valeu =)

    ResponderExcluir
  152. Fabiano, vc sabe me dizer se o facebook manda notificações? Ou precisamos acessar as páginas pra ver se há comments novos do face?

    ResponderExcluir
  153. Vanda acho que não tem notificações.

    eu adicionei a pagina de moderação dos comentários do facebook aos meus favoritos e entro nela algumas vezes por dia.

    ResponderExcluir
  154. Tem como inverter os sistemas de comentários?
    Tipo, nos nossos blogs aparecem os comentários do facebook na esquerda e os do blogger na direita.
    Dá pra deixar os comentários do blogger na esquerda e os do facebook na direita?
    Abraço...

    ResponderExcluir
  155. Mattheus Araújo eu e outro blogueiro já tentamos mas não foi possivel inverter isso

    ResponderExcluir
  156. Obrigada Fabiano, gostei demais desse script, o retorno foi garantido!
    A propósito, meu blog completará 4 anos em agosto e estou sorteando uma câmera digital, quer participar? Aparece lá.

    Abração!

    ResponderExcluir
  157. funciona normal aqui, mas fui retirar os comentários das páginas estáticas e não somem por completo por causa dos comentários do facebook. O que devo fazer?
    meu blog: http://traquinologia.blogspot.com.br/

    ResponderExcluir
  158. vou fazer uns testes e se possivel publicar um tutorial sobre esse assunto

    ResponderExcluir
  159. Existem outra opção para layout personalizados?! O blog em questão que estou tentando modificar é o www.designdascores.com e já fiz tudo e não apareceu.. alguém pode me auxiliar?! Ou vou precisar trocar o layout por falta de compatibilidade?!

    ResponderExcluir
  160. acredito que seja um questão de quantidade e tipos de códigos de cada template.

    existem diversos códigos que dão bugs em alguns templates

    ResponderExcluir
  161. No meu no meu tinha 2 codigos, a eu colei na primeira em baixo e não funcionou, ai colei na segunda funcionou, obrigado.

    ResponderExcluir
  162. acredito que o problema com as páginas estáticas que mencionei estejam ligadas ao template e não ao facebook

    ResponderExcluir
  163. Para quem esta com dificuldade para aplicar este sistema em seu template vai aqui uma dica.

    Nos indicam para começar em: class='comments' id='comments'
    Mas isso pode variar a cada template, alguns encontrar 1 outros 2,3...
    Se você nao conseguiu é porque nao encontrou o correto, segue esses passos:

    1-Salve seu template
    2-marque a opção expandir modelo de widgets
    3-busque todos os id='comments' que encontre em seu template
    4-aplique abaixo deste DIV codigo indicado nesta pagina, pode aparecer mais de um em seu template, o segredo é testar todos, eu recomendo aplicar no último.

    Foi a soluçao pra mim espero que para vcs tambem, abraço!
    http://www.gleoz.com/

    ResponderExcluir
  164. Help Fabiano, o que pode estar acontecendo? Na postagem de hoje não aparece a caixa de comentários do blogger buaaaa. Oque houve?

    ResponderExcluir
  165. Vanda o problema é só na postagem que fez hoje?

    tente editar a postagem e veja que na pagina tem postagens tem opções e uma delas é ocultar os comentários.

    se não for esse seu problema então deve ser um erro no carregamento da pagina.

    mas acho que já está funcionando, entrei agora (22:39) no seu blog e estão aparecendo os comentários do facebook e do blogger

    ResponderExcluir
  166. deve ser algum erro momentaneo.

    testei agora e parece tudo normal

    ResponderExcluir
  167. aqui tá funcionando normal, mas teria como corrigir o plural para que aparecesse "Seja o primeiro a comentar" e "1 comentário" em vez de "0 comentários" e "1 comentários"?

    ResponderExcluir
  168. Usei o Notepad++ e nao funcionou. Alguma dica ou outro metodo?

    ResponderExcluir
  169. Voltou a funcionar Fabiano, obrigada. =)

    ResponderExcluir
  170. Parabéns Fabiano, ótima postagem car eu estou usando o template bos forma desenvolvido pelo Fernando Buson, eu quero saber se tem como retirar aquele espaço entre o menu e os posts se você puder me ajudar fico grato da uma olhadinha lá, valeu um abraço...

    ResponderExcluir
  171. Por Favor eu queria saber porque quando eu comento nos comentarios do blogger os do facebook somen

    ResponderExcluir
  172. Deu certinho aqui estava precisando mesmo, muito obrigado!

    ResponderExcluir
  173. Parabéns!!! Este é o primeiro de uns 20 tutoriais que realmente deu certo. Meu Blog é novinho e eu estava quebrando cabeça com isto, eu só mudei as cores para #000000. Obrigada

    ResponderExcluir
  174. Fabiano, me responde, coloquei isso no meu blog, mas ele aparece os comentários padrão do blogger, ai quando alguem posta o 1° comentário aparece a caixa do facebok e do blogger. Por que?

    ResponderExcluir
  175. deve ter algum erro nos códigos ou colocou algum código em lugar errado.... mas é complicado saber onde é seria necessário fazer testes.

    e claro se for algum template pronto que baixou é mais dificil ainda

    ResponderExcluir
  176. como eu poderia fazer pros comentários aparecer nas páginas também?
    Como nesse caso:

    http://unitriuberlandiabasquete.blogspot.com.br/p/titulos.html

    Obrigado

    ResponderExcluir
  177. veja essa linha de código

    b:if cond='data:blog.pageType == "item"'

    tente alterar deste jeito, tente alterar desta forma

    b:if cond='data:blog.pageType != "index"

    eu não testei mas deve funcionar para as postagens e paginas estaticas já que essa configuração ativa para todas as paginas que não seja a inicial do blog.

    mas verifique se não gera erro na pagina dos arquivos ou marcadores.

    ResponderExcluir
  178. eu posso utilizar o mesmo app em dois blogs?

    ResponderExcluir
  179. Bruno Sommerfeld acho que deve criar um aplicativo para cada blog

    ResponderExcluir
  180. Olá estou com problemas neste sistema. Eu já tenho o app do facebook, os codigos ficaram perfeitos mas quando clica em Comentários Blogger não mudar nada continua nos Comentários do Facebook. Qual pode ser o problemas? Eu sempre usei desse sistema e primeira vez que acontece esse problema já tentei de tudo e nada arruma esse problema. Este é o link do blog que estou desenvolvendo http://testegarotodegrife.blogspot.com.br

    Aguardo respostas

    ResponderExcluir
  181. deve ter faltado algum detalhe nos códigos, mas é dificil saber o que é

    veja se não pagou nada por engano ou colocou em lugar errado no html tem muitos códigos parecidos

    ResponderExcluir
  182. Olá! Já utilizei bastante tutoriais de vocês para conseguir deixar meu blog um pouquinho melhor do era antes... e acho q estou conseguindo graças as dicas de vcs. Muito obrigada!!
    Será q poderiam me dar um auxílio agora. Será q da forma como eu deixei a parte de "comentários" dos posts no meu blog eu consigo inserir este do facebook também? se puderem dar uma olhada e dizer se posso tentar colocar os códigos acima q não vai ter problema eu agradeceria, o restante tento fazer sozinha.
    Obrigada!

    ResponderExcluir
  183. Camila Mariah infelizmente só dá para saber se os códigos vão gerar algum tipo de erro quando coloca no blog.

    mas faça um backup do seu template antes de começar a mexer no html. Então se tiver algum problema poderá voltar ao seu template atual só enviando o arquivo novamente para o blogger.


    depois que fizer essa modificação sugiro que exclua o histórico de internet para testar, assim evitará erros de carregamento da pagina.

    ResponderExcluir
  184. Olá Fabiano,
    Ah tá... vou tentar então. Qualquer coisa volto aqui..rs..

    Mas muito obrigada pela dica!
    Abços.

    ResponderExcluir
  185. Olá Fabiano,
    Ocorre o seguinte, os comentários do meu blog estão como popup. Então não sei se esse é o problema, mas mesmo fazendo essas modificações não aparece nada de comentários do facebook. Será q teria como arrumar isso, ou só alterando o comentário do blog?
    Aguardo e obrigada.
    Camila.

    ResponderExcluir
  186. a pagina de moderação de comentarios do facebook é essa:
    http://developers.facebook.com/tools/comments

    se estiver tudo configurado certo no seu blog e a moderação estiver ativada nas configurações dos comentários do facebook, então não sei o que fazer.

    só tem essas opções. mas tente excluir o historico de internet, talvez seu computador esteja usando o cache para mostrar a pagina e por isso não aparece as mudanças recentes

    ResponderExcluir
  187. Olá Fabiano, desculpe tantos comentários, mas só queria dizer q deu certo.
    O que eu fiz foi o seguinte, ao invés de inserir o código após o primeiro div class='comments' id='comments' q encontrei eu inseri no último e assim deu certo. Sabe lá porquê..rs... mas tbém deixei transparent o fundo para ficar melhor com meu blog e a fig do "comente" q eu tenho.
    Valeu! Abços

    ResponderExcluir