Como colocar os comentários do Facebook no seu blog

Sem dúvida o Facebook toma conta do planeta internet nos dias de hoje, com isso trouxemos pra você um tutorial interessante que irá te possibilitar adicionarem os comentários do Facebook nas suas páginas. Isso poderá até mesmo aumentar o volume de visitas do seu blog. Então vamos ao passo-a-passo.

Comentários do Facebook no Blogger

Fase 1 - Facebook: 

) Logado no Facebook acesse a página Facebook developers nela você deverá encontrar estas opções:

Como colocar os comentários do Facebook no blog

) Clique em Register Now

) Concorde com os Termos de Uso e clique em continuar.

) Avance as etapas até concluir o registro (durante este processo será necessário fazer uma verificação via celular.

) Agova vamos criar o aplicativo, basta clicar aqui:

Comentários do facebook no blogger - Tutorial completo

) Avance as etapas preenchendo o que lhe for pedido, ao final você poderá encontrar a ID de seu Aplicativo, Este ID será necessário nas próximas etapas.


Com o Ip em "mãos" concluimos a primeira parte, agora vamos para a fase 2.

Fase 2 - Blogger:

É sempre importante lembrar que qualquer alteração errada no HTML do seu blog pode ser definitiva e consequentemente fatal por isso sempre salve o backup do modelo antes de começar as alterações.

) Acesse a página Modelo e clique em Editar HTML, clique sobre o código HTML e pressione CTRL+F, aparecerá uma caixa de buscas, nela pesquise por:

<div class='comments' id='comments'>


ATENÇÃO: Existem templates onde é necessário encontrar este trecho mais de uma vez, em alguns casos é necessário fazer a alterações todas as vezes em que este trecho se repetir em outros casos isto já não é necessário, portante é necessário que você teste.

) Abaixo desta linha cole:

<div class='comments-tab' id='fb-comments'  onclick='javascript:commentToggle("#fb-comments");'  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("#blogger-comments");'  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 == "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'>

) Após salvar procure por </head> e ANTES desta tag cole:

<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='SEU 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>



) Onde você vê SEU ID  troque pelo ID que você colheu no Facebook. Salve mais uma vez e vamos para os últimos ajustes.

) Procure por ]]></b:skin> e ANTES desta tag cole:

 .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;}



Claro que este método irá melhorar muito o seu blog e com isso você com certeza poderá arrecadar mais verdinhas com ele, sendo assim aproveite e veja também as formas de monetizar o seu blog assim você saber se é possível ganhar dinheiro de outras formas e rentabilizar o seu blog.

Finalmente o fim!

Agora salve tudo o desfrute de seu novo recurso.

Caso você queira testar também um outro sistema de comentários, de uma olhada neste tutorial, ele irá te ensinar a usar o sistema de comentários Disqus, boa parte dos melhores blogs estão se rendendo a ele, então dê uma olhadinha...

Se necessário ou se possível deixe seu comentário.

SHARE

Alexandre Santos

Eu sou Alexandre Santos, graduado em Sistemas de Informação pela Faculdade Pitágoras, e professor a mais de 8 anos. Me aventurando como blogueiro afinal conhecimento só é útil quando compartilhado.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

141 comentários:

  1. Muito bom esse tutorial, me ajudou bastante.
    Parabéns!

    ResponderExcluir
    Respostas
    1. Muito Obrigado Nayane! Que bom que te nós te ajudamos.

      Excluir
  2. Muuuuuuuito bom, foi o único código que deu certo :)
    Valeu!!

    ResponderExcluir
  3. Ao comentar no meu blog nao aparece na pagina. porque será?

    ResponderExcluir
    Respostas
    1. Você observou um detalhe no tópico 1 pode ser que o seu template exija um ajuste.

      Excluir
  4. Oi pessoal, adorei o tutorial mas...
    - nos posts que já tem comentários, tudo bem, aparece na perfeição. Mas nos posts que não têm comentários, não aparece nem para comentar via blog nem via facebook.

    Podem-me ajudar?

    Obrigada xx
    www.helenaduque.com

    ResponderExcluir
    Respostas
    1. Os problemas que eu tive com este método normalmente foram causados por diferenças nos templates, então, assim que tentarem seguir o tutorial deem uma atenção especial ao tópico 1, se os testes sugeridos tiverem sido feitos, e problema ainda persistir, me avise que eu irei tentar buscar outra solução.

      Excluir
    2. Sim, testei com todos e o problema persiste! O template q eu uso, é o primeiro da categoria "Simples"

      Excluir
    3. estou com mesmo problema

      Excluir
  5. Fiz tudo certo (meu HTML tem a parte " 'seta esquerda'div class='comments' id='comments''seta direita' " duas vezes e eu fiz nas duas) e não está aparecendo a caixa pra comentar. Veja que lá a caixa pra comentar com o Blogger aparece mas para comentar com o Facebook não. Dê uma olhada por favor. Obrigado
    canalrazer.blogspot.com

    ResponderExcluir
  6. Acabei de descobrir que usando o Firefox a caixa pra comentar com o Facebook aparece, usando o Chrome não. O que fazer? Me socorre por favor... :P
    canalrazer.blogspot.com

    ResponderExcluir
  7. Fiz tudo, como está no tutorial, e nada...

    ResponderExcluir
  8. Consegui!!! Vlw!! http://www.rezcomeco.com.br/blog

    ResponderExcluir
  9. Ótimo tutorial! Adorei essa parte de separar os comentarios do face e do blogger em abas, isso ajuda muito, principalmente eu que gosto de tudo organizado!

    http://jigokku.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Realmente isso é muito bacana mesmo, obrigado por deixar seu comentário.

      Excluir
  10. Eu tentei mas meu layout não tem este código para colocar

    ResponderExcluir
    Respostas
    1. Isso e pra colocar no html não e layout: só você ir em modelo>editar html> e fazer do jeito que o tutorial mando.

      Excluir
    2. Millena o Vinicius foi perfeito na sua orientação, siga o que ele disse que você irá conseguir.

      Excluir
  11. Valeu mesmo Alexandre! Consegui! Ontem me matei p fazer isso porque mudei o nome do meu blog e tive que atualizar links e inclusive colocar esse recurso dos comentarios do face que meu namorado fez p mim da primeira vez, mas como ele nao estava com paciencia de me ajudar tive que me virar quase sozinha se nao fosse por você. Excelente tutorial! Obrigada!

    ResponderExcluir
    Respostas
    1. Eu que agradeço Dani, quando precisarem peçam outros tutoriais que farei o possível para encontrar a melhor solução para vocês.

      Excluir
  12. Funcionou perfeitamente,

    www.pausaprointervalo.com.br

    ResponderExcluir
  13. Só tem um problema, eu não recebo nenhum tipo de notificação quando comentam usando o facebook, isso é normal?

    ResponderExcluir
  14. Obrigada, minha irmã tentou diversos metodos mas não havia conseguido, o seu foi um pouco mais trabalhoso, mais valeu a pena! E está bem explicado.

    ResponderExcluir
  15. Para aqueles que não conseguiram eu vou continuar testando este método em vários templates, e sempre que possível vou procurar melhorar algumas coias.

    ResponderExcluir
    Respostas
    1. Olá, comigo estava do mesmo jeito, mas descobri a solução, ao menos para o meu caso.

      Eu tinha ativado a opção comentários pelo "google +" no meu blog, por isso nao mostrava a opção para comentar tanto pelo blogger como pelo facebook.

      Depois de desativar a opção comentários pelo "google +", ficou visível as 2 opções de comentários.

      Abçs

      Excluir
    2. Obrigado pela dica, espero que ajude mais usuários com problemas.

      Excluir
  16. Deu certo, apareceu a caixinha e tudo, mas o meu template fica meio bugado, os blocos laterais não aprecem como deveriam :(

    ResponderExcluir
  17. Melhor tutorial que eu já vi sobre como fazer isso. Ainda bem que você o fez, eu estava louco na internet procurando, e ninguém explicou tão bem quanto você ;). Obrigado ♥

    www.loucosporumestilo.com.br

    ResponderExcluir
  18. Nao consigo de jeito nenhum!!! Socorro, rsrs!

    ResponderExcluir
    Respostas
    1. Cara já tentou ver se a tag < div class='comments' id='comments' > não se repete no seu template, quando testei a maioria dos erros eram por conta desta tag.

      Excluir
  19. perfeito!!!!!!!!!!!!! foi o único que deu certo no meu blog em css3

    ResponderExcluir
    Respostas
    1. Ainda bem que deu certo Carol boa sorte com seu blog!

      Excluir
  20. Respostas
    1. Que bom que te ajudou, eu que agradeço!

      Excluir
  21. Eu tentei, mas nada aconteceu com o meu...

    ResponderExcluir
    Respostas
    1. Na fase 2 - Blogger, ainda na primeira instrução o artigo comenta a respeito das diferenças entre os templates, dê uma olhada e veja se o seu não se encaixa nesta diferença.

      Excluir
  22. Thanks, works very well!!! Good Job!

    ResponderExcluir
    Respostas
    1. I thank you, it was good to have helped :)

      Excluir
  23. Não achei o primeiro no meus codigos :(

    ResponderExcluir
    Respostas
    1. Priscila Rejane primeiramente obrigado por ter recorrido ao DataInfoBlog, mas me explique melhor você não encontrou a tag < div class='comments' id='comments' > ?

      Excluir
    2. ei Alexandre não achei,
      eu queria colocar a barra de comentários no final de cada postagem e não consigo...
      dá uma olhada (obrigada pelo retorno)
      http://www.priscilarejane.com/

      Excluir
  24. Eu fiz no meu blog e deu certo mas só nos posts que há comentário, e no meu blog não há nenhum texto repetido me ajude! http://the-ultimate-blogger.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olá Victor já vi esse problema em outros templates, vou ser sincero na ocasião eu não resolvi, mas prometo dar uma olhada assim que conseguir um tempinho e te repondo por aqui, vai me cobrando.

      Excluir
  25. Huhuhuull..deu certinhoo =)
    Obrigada pelo excelente tutorial.

    www.reticenncias.com.br

    ResponderExcluir
    Respostas
    1. Que bom que deu tudo certo Katiane eu que agradeço!

      Excluir
  26. Parabéns seu post é bem detalhado e deu super certo eu já tinha tentado várias opções e não consegui, vou visitar sempre o blog e recomendar sempre que possível, muito sucesso :D

    www.backstagedamoda.com.br

    ResponderExcluir
    Respostas
    1. Olá Wanessa que bom que deu tudo certo com o seu blog. Espero que possa continuar te ajudando sempre obrigado e boa sorte com o Backstage da Moda

      Excluir
  27. Respostas
    1. Joseph normalmente a tag skin normalmente é encontrada logo no começo do código pouco depois do < head>, encontrando a abertura da tag facilmente você encontrará o ]]>< /b:skin>

      Excluir
  28. parabéns deu certo! muito bom...

    http://charlem.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigado Charlem, boa sorte com o seu blog.

      Excluir
  29. Obrigada galera essa foi boa, adorei
    www.exotikomusik.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu que agradeço, estamos aqui pra te ajudar...

      Excluir
  30. Caro Alexandre.

    Primeiramente, parabéns pelo blog! Quando faço o 3º passo da fase 2, que é colar o código antes da tag head, o meu menu para de funcionar. Ele aparece, mais os submenus não funcionam, somente os que não tem sub-menus! Você saberia me dizer o que pode ser isto?

    ResponderExcluir
    Respostas
    1. Consegui resolver! Foi só ao invés de colar este código antes da tag de fechamento /head, colar la no começo, logo depois da tag de abertura head.

      Excluir
    2. Opa que bom que deu tudo certo, parabéns pelo esforço.

      Excluir
  31. minha caixa de comentarios fivou muito pequena

    ResponderExcluir
    Respostas
    1. Depois posta aqui o endereço do seu blog pra eu dar uma olhada, de repete é só dar uma ajustada no CSS

      Excluir
  32. Essa dica foi ótima vou compartilhar em meu Blog!

    Apesar que tive um pouco de trabalho, pois estava desconfigurando meu Slaider, funcionou legal excluindo um script. jquery

    VLW!

    ResponderExcluir
  33. Oii Alexandre... eu não consegui :/ Continua aparecendo os comentários do Blogger normalmente, mas não aparece NADA do Facebook... Esse é o segundo tutorial que eu tento e não dá certo!! Eu fiz tudo certinho, achei os códigos sem problemas, mas não aparece nada!! O que eu faço?!
    Blog Virtuosas com Estilo

    ResponderExcluir
    Respostas
    1. Bom, pra saber o que realmente aconteceu sem acompanhar o processo é complicado, caso seja possível, me envie o seu template (ou o código HTML), que eu dou uma olhada pra você e assim acredito que poderei te ajudar melhor.

      Excluir
  34. Consegui, o meu tava no segundo!
    Muito Obrigada mesmo!

    ResponderExcluir
    Respostas
    1. Quem bom que deu tudo certo Rosinha, boa sorte com o seu blog.

      Excluir
  35. vllw mano ajuda demais http://teladecinemas.br.vu/ deem 1 olhada pessoal

    ResponderExcluir
  36. Oi Alexandre,

    Fiz o passo a passo e funcionou perfeitamente (só não aparece o símbolo do facebook na aba), super recomendo, mas agora não sei como ver ou onde aparecem as publicações que foram comentadas. As pessoas estão comentando e eu não recebo aviso nenhum, e não sei onde verificar.

    Grata,
    Daniela Prytoluk
    www.ameliacomvaidade.com

    ResponderExcluir
  37. Sinceramente... essa é a primeira vez que agradeço a alguém comentando no blog, cara... muitíssimo obrigada! testei dezenas e dezenas de tutoriais e quando eu tava quase desistindo o seu tutorial deu EXTREMAMENTE certo logo de cara! eu quase nem acreditei '-'
    Muito obrigado mesmo! meu blog é free e queria add essa caixa pra ajudar na hora em que os links ficassem off e o pessoal avisasse (ja que todo mundo tem facebook) não precisasse ter uma conta no google pra comentar etc.
    http://timbrenachuva.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. E eu fiquei realmente feliz por ter te ajudo... Boa sorte com o seu blog

      Excluir
  38. visita ai pessoal: http://geralfilmesdublados.blogspot.com.br/

    ResponderExcluir
  39. E aí campeão, bom inicio de semana pra ti!

    Venho aqui agradecer pela ajuda. Mudei de template recentemente e tava tendo dificuldade de recolocar a ferramenta dos comentários do face. Felizmente, com os passos que você deixou aqui consegui colocar a ferramenta de volta, tranquilinho. Por isso, venho agradecer.

    Um forte abraço com o desejo de muita paz, sempre!

    P.S. Desde já passo à te seguir e ver mais postagens tuas por aqui. E, claro, estarei divulgando teu canal para outros blogueiros amigos nossos.

    ResponderExcluir
    Respostas
    1. Fico muito feliz por ter ajudado, que bom que o tutorial resolveu seu problema, estou em dívida com o pessoal que anda frequentando o blog, não tenho tido tempo nenhum para me dedicar aos novos artigos, mas podem ter certeza que em breve teremos novidades por aqui... Um abraço

      Excluir
  40. Fiz tudo direitinho, mas não deu certo ;\

    ResponderExcluir
    Respostas
    1. Olá Sandra posta o endereço do seu blog para eu dar uma olhada quem sabe consigo te ajudar

      Excluir
  41. Obrigada foi realmente muito válido!!

    ResponderExcluir
    Respostas
    1. Eu que agradeço e fico feliz por ter te ajudado

      Excluir
  42. Sei-la tem postagem em que aparece e em outras não!!! visheee estou perdida!!!

    ResponderExcluir
    Respostas
    1. Na fase 2 ainda no primeiro passo eu fiz um comentário sobre um problema que acontece em diferentes templates, as vezes é necessário fazer alguns testes caso não funcione, dê uma relidada neste ponto e veja se funciona plenamente. Qualquer coisa volta a postar por aqui...

      Excluir
  43. Parabéns! Pelo tutoria te desejo muito sucesso

    ResponderExcluir
    Respostas
    1. Muito Obrigado sucesso para todos nós Giovanne!

      Excluir
  44. deu tudo certo eu so queria aumentar o tamanho me ajuda

    ResponderExcluir
    Respostas
    1. Willian prometo que em breve eu volto aqui e edito este comentário para te ajudar agora eu estou um tanto enrolado mais em breve eu vejo esse detalhe do tamanho...

      Excluir
  45. Não conseguir cara. Poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Diz aí o que houve? Apareceu alguma coisa? Nada?...

      Excluir
  46. Realmente, não apareceu nada. Fiz tudo certinho e nada apareceu. Tentei com outros códigos também e não conseguir, acredito que vem a ser o template que não permite com os códigos existentes.

    ResponderExcluir
  47. Oi, cara. Obrigado, deu certo, mas uma coisa me incomodou quando conclui o serviço. Apareceu o erro 'Open quote is expected for attribute "content" associated with an element type "meta".' O que será?

    ResponderExcluir
  48. o meu deu certinho obrigado pelas dicas ....

    ResponderExcluir
  49. Deu certinho aqui. Na primeira tentativa não deu porque no passo 1 eu colei na segunda DIV encontrada. Então voltei e fiz na primeira e deu certo! Abraços e obrigado!

    ResponderExcluir
    Respostas
    1. Ótimo, alguns templates obrigam este pequeno ajuste, parabéns, eu que agradeço...

      Excluir
  50. Oiew, tudo bom? Gostei muito e deu quase certo. As postagens que já tinham comentários antes é possível comentar tanto pela ferramenta do blogger quanto pelo face. Mas quando é uma postagem que não tem comentário nenhum ainda, só é possível comentar pelo face. Teria como ver? Vou aguardar :D Obrigada!

    Blogger> www.horadaleitur.blogspot.com.br

    ResponderExcluir
  51. Alexandre deu certinho!! Mas me tira uma dúvida por favor, o espaço do comentário ta muito pequeno, como eu faço para ele aumentar de tamanho, seguindo o corpo do post, como este tamanho que eu estou comentando agora?

    Desde já obrigada pela resposta. Um abraço!!

    ResponderExcluir
  52. Olá boa noite, muto bom o tutorial, foi de grande ajuda. Esta de parabéns pelo blog, e por passar conhecimento adiante. Fiz o passo a passo desse tutorial no meu blogue. Mas , o comentário não aparece a caixa, e também aparece em todos outros comentarios de outras postagens, sendo que o normal seria cada comentario aparedcer em sua determinada postagem não? Pode me ajudar?
    O blogue é http://bonde-louco.blogspot.com.br/2015/01/filme-he-man-masters-of-universe-bonde.html

    ResponderExcluir
  53. Boa noite Alexandre, ótimo tutorial, deu certo e ficou ótimo com exceção de apenas uma coisa... quando se comenta pela opção do Blogger a opção do Facebook some e fica apenas os comentários do Blogger. Espero que possa ajudar.

    Parabéns pelo seu blog!

    ResponderExcluir
  54. Muito obrigada por disponiblizar esse tutorial! Deu mega certo!

    Zona de Conspiração

    ResponderExcluir
  55. ESSE TUTORIAL FUNCIONA DE VERDADE. O MELHOR QUE JÁ VI SOBRE O ASSUNTO. MUITO OBRIGADO.

    ResponderExcluir
  56. deu tudo certo mas fica um ICONE do BLOGGER e outro que seria do FACEBOOK mas a do facebook não aparece, fica uma foto sem imagem, tem como arrumar essa GIF??? se quiser da uma olhada http://nokiddingblog.blogspot.com.br/ VALEUU

    ResponderExcluir
  57. Não consegui por nada neste mundo.... já tentei dezenas de tutoriais, inclusive esse. SOCORROOOOOO!!!

    ResponderExcluir
  58. Quando vou em editar html e coloco pra pesquisar "div class='comments' id='comments'" não constam resultados. Será algum problema no modelo que estou usando?

    dicasdriver2.blogspot.com

    ResponderExcluir
    Respostas
    1. Consegui, eu apertava Ctrl + F no lugar errado, kkkkk.. mas o ícone do Facebook não aparece, aparece um erro de imagem

      Excluir
  59. você esta de parabéns pelo tutorial!!!! fucionou perfeitamente no meu blog

    ResponderExcluir
  60. Deu tudo certo!! meus comentários haviam sumido! e agora apareceram! muiito obrigadaaa !!

    ResponderExcluir
  61. Olá, boa noite, o seu tutorial foi o único que funcionou no meu blog, muito obrigada.
    Só faltou uma coisinha, aparece um ícone onde fica os comentários do blogger e do face ficou sem imagem, como se não pudesse carregar a imagem.

    ResponderExcluir
    Respostas
    1. Olá Zélia, vou conferir se há algo de errado e te aviso. De qualquer maneira obrigado.

      Excluir
  62. Somente Esse Funcionou no meu Blog
    Parabens.

    Cuecagamesdown.blogspot.com.br

    ResponderExcluir
  63. NOSSAAAAA, EU JÁ ESTAVA PARA DESISTIR... PARABÉNS, ME AJUDOU MUITO!!!OBRIGADAAAAAAAAAAA

    ResponderExcluir
  64. Muito obrigado!!! Vi milhões de tutoriais e o único que deu certo foi esse! Demais! :-)

    ResponderExcluir
  65. Curti muito esse estilo css que você colocou, teria como você colocar alguns estilos para nos?

    ResponderExcluir
  66. Curti muito esse estilo css que você colocou, teria como você colocar alguns estilos para nos?

    ResponderExcluir
  67. Troquem o http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png pelo https://1.bp.blogspot.com/.../s1600/Facebook%2Bico.png para o icone do facebook funcionar

    ResponderExcluir
  68. Parabéns pelo artigo,

    Vale lembrar que para cada comentário através do Facebook, é exibido um link no perfil de quem comentou, possibilitando assim uma maneira eficiente de divulgar.

    Abraços!

    ResponderExcluir
  69. Muito boa as dicas parabéns a toda equipe do blog. Quero aproveitar a oportunidade e compartilhar com vocês uma maneira rapida de ganhar um bom dinheiro garanto que vai ajudar você assim como me ajudou
    de maneira simples a ganhar moedas virtuais para gastar na web e como usar o programa gerador de dinheiro 2016 pelo paypal; Rápido, pratico e o melhor grátis... Para mais informações acesse:
    http://adyou.me/kDey
    http://adyou.me/RrXd (não é virus)

    ResponderExcluir
  70. Gostei das dicas vou usar todas. Parabéns.
    http://www.portaoautomatico-sp.com/

    ResponderExcluir