Colocando os comentários do Facebook no Blogger

em 4 de dezembro de 2015


Não há como negar: o Facebook é uma força em termos de visibilidade, e pode ajudar muito ao blog.
Atualmente, no exato momento em que escrevo esse tutorial, a tendência em termos de comentários é agregar os comentários feitos via Facebook com os do blog, seja ele blog do Blogger ou Wordpress.

Tempos atrás ensinei aqui no blog um modo de ter ambas as formas de comentar, tanto pelo Blogger quanto pelo Facebook.
Recorde:

Como usar os comentários do Blogger e do Facebook ao mesmo tempo?


Funciona, mas o tutorial que apresento hoje é uma versão simplificada, atualizada e com um diferencial: você pode deixar que os comentários feitos com o login do Facebook apareçam na página inicial, sem precisar clicar em nada para comentar.

Para ficar claro veja o exemplo, que é um template que disponibilizarei gratuitamente para quem quiser baixar em breve.
Aqui:


Demonstração do tutorial


A forma de fazer explico abaixo, vem comigo!
Antes, duas considerações:
  1. Não faça direto em seu blog, use um blog de testes com o mesmo template de seu blog real. Só depois de dominar o modo de fazer é que você deve inserir em seu blog real. Vai por mim, segurança nunca é demais.
  2. Eu testei nos modelos Viagem, Simples e Espetacular do Blogger. Em templates baixados da internet pode não dar certo. Ou pode dar, vale testar.

Estou publicando este tutorial em uma sexta-feira.
Assim você tem o final de semana todinho para testar e conseguir. Acredite em mim: levei muito mais horas para testar em vários templates, montar o tutorial e publicar do que você vai levar para realizar. Vai dar certo, pode crer! Apenas faça com atenção e dedicação!!!!

Criar um aplicativo no Facebook


Para começar você precisa ter criado um aplicativo no Facebook que fará tudo funcionar.
Clique aqui: Facebook Developers
Aparecerá esta tela:


Clique onde a seta indica, em My Apps.
Caso você nunca tenha criado nenhum aplicativo será preciso se registrar, mas é bem simples e intuitivo.
Marque a caixinha Sim, clique em Register e siga as orientações (eles podem pedir um número de telefone para envio de código, por exemplo). Complete o processo de registro caso tenha sido solicitado.

Após ter completado o registro (ou caso já tenha sido registrado anteriormente) abrirá essa página:


Clique em Website.
Abrirá esta outra página:


Coloque o nome de seu app e clique onde a seta indica.
Vai abrir esta página:


Escolha a categoria que desejar e clique no botão azul.
Abrirá a página com seu ID.
Semelhante a esta, claro que com seu ID:


Reserve o número de seu ID. Vamos usar daqui à pouco.


Instalando os comentários via Facebook no blog


Para começar veja os códigos que você vai precisar:


Copiar os códigos


Deixe a página dos códigos aberta.
A seguir vá ao painel de seu blog clique na aba Modelo e a seguir clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que aparecer digite <head>.
Tecle Enter para localizar.
Está bem no começo de seu código-fonte, nas primeiras linhas.
ABAIXO de <head> cole o primeiro código.


Preste atenção:

  1. Onde marquei SEU NOME FACEBOOK coloque seu nome de usuário do Facebook, como aparece no navegador. O meu, por exemplo, é elainegasparetoparada.
  2. Onde marquei ID DE SEU APLICATIVO coloque o número de seu aplicativo, aquele que pedi para reservar anteriormente.

Salve.
Agora localize </head> e ACIMA disso cole o segundo código.

O número 5 se refere à quantidade de comentários via Facebook que serão exibidos. Altere se desejar.
Salve.

Agora, dentro da caixa de pesquisa cole este código e digite Enter para localizar:



Aparecerão (provavelmente) duas ocorrências desse trecho. Estamos em busca da segunda, ok? Preste atenção!
ABAIXO DISSO cole o terceiro código.

O número 650 se refere à largura da área dos coments via Facebook; altere se desejar.
O número 5 se refere à quantidade de comentários a serem mostrados.
Salve.
Está feito, lindo e fácil de fazer.

Uma dica importante:
Caso você queira que os comentários apareçam na página inicial, abaixo de cada post sem precisar clicar em nada apague a primeira e última linha do código acima.
Ficará assim:

<div id='fb-root'/>
<script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='5' width='650'/></div>


Se quiser que os comentários apareçam somente nas páginas dos posts deixe como no código original, você decide!

 Viu que legal? Em breve vou disponibilizar o template usado nesse tutorial para download. Aguarde, é semana que vem, sem falta!
E será em 4 versões, uma lindeza só!

 Aproveita que estás aqui e clique em Compartilhar esse post?
Assim mais pessoas chegam até ele e eu fico mais feliz...
Tanks!

  Extra! O template que usei no tutorial está disponível aqui.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

65 comentários , comente também!

  1. Oi Elaine,
    Obrigada pelo tudo.
    Fui no boleto teste e o mesmo pulo ao início está acontecendo.
    Bjs

    ResponderExcluir
  2. Gostei, vou tentar no blog experimental!

    ResponderExcluir
  3. Olá,Elaine.Tudo bom?
    Ao pesquisar div class='post footer' não aparece nada para mim.Eu coloquei os sinais de <> direitinho,mas eles não podem ser digitados aqui no coment,dá erro kkkk.Na verdade ao nem consigo digitar depois do "post".Fui fazendo exatamente como você falou,colocando os códigos e salvando.E fiz um post teste pois pensei que esse fosse o problema.O que pode ser?

    Bjus

    ResponderExcluir
    Respostas
    1. Murielly, sugiro que refaça os passos, e não esqueça que precisa ser a segunda ocorrência de post-footer, tá?
      bjssss

      Excluir
  4. Muito bom, vou testar... arrasando como sempre!!!
    Bom fim de semana.
    Bjs.

    ResponderExcluir
  5. Template! Olhinhos brilhando kkk bj Muito obrigada! Só faltava isso no meu blog bjbjbj

    ResponderExcluir
    Respostas
    1. rsrsr em breve, aqui nesse mesmo bat-blog rsrsrs

      Excluir
  6. Oi Elaine, tudo bem?
    Já tentei todos os tutorais possíveis mas, meu template não tem a segundo ocorrencia da Div Class post-footer. Mas já vi que uma pessoa que usa o mesmo que eu conseguiu, só que não foi ela que modificou o template portanto ela não sabe como fazer!
    Bjus, adoro seu blog!

    ResponderExcluir
    Respostas
    1. Fabiana, nesse caso procure qualquer segunda ocorrência de post-footer
      Vai achar line 1, line 2, etc
      Vá testando até o bendito aparecer :)

      Excluir
    2. O meu também não tem nem o segundo nem o terceiro textos que você mandou procurar :/

      Excluir
  7. Elaine sempre testei seus tutoriais com ótimos resultados, mas esse não deu certo. Será que é porque no meu modelo só há uma linha com a div do post-footer? Se você puder solucionar minnha dúvida eu agradeceria muito, pois faz tempo que testo tutoriais para colocar os comentários do Facebook desse jeitinho e nunca dá certo. O seu tutorial antigos que colocava os os comentários do facebook e blogger juntos deu certo quando fiz (não lembro se já utilizava o meu modelo atual), mas eu não gostei muito dele. Esse é exatamente como eu queria. Se ppuder ajudar, agradeço!
    Adoro seu blog Sigo em várias redes! Espero que continue sempre postando tutoriais super didáticos, pois são de grande valia!

    ResponderExcluir
    Respostas
    1. Vanessa, todo template tem 2 ocorrências dessa div, até os baixados da net.
      Tente achar, se realmente não conseguir experimente localizar algo como post-footer-line-2 por exemplo.
      Daí é testar até achar o lugar certo de inserir...

      Excluir
  8. Oi Elaine,
    como sempre vc arrasa com seu blog. Desejo feliz natal para você e que continue sempre assim, melhorando a cada dia e sendo feliz sempre. Beijo grande e obrigada pelos posteres que distribui.
    http://eupensoq.blogspot.com.br/

    ResponderExcluir
  9. NO meu facebook não aparece essa aba APP

    ResponderExcluir
  10. Muito obrigada pela dica! Fiz no meu blog de teste e deu tudo certinho e ficou bem bonitinho!
    e não demorou tanto como eu esperava!

    ResponderExcluir
  11. No meu não aparece o bendito post-footer, então não funcionou.

    ResponderExcluir
  12. Descobri tem que ser abaixo dessa tag
    < p class='comment-footer'>

    ResponderExcluir
    Respostas
    1. Nossa vlw mesmo, resolveu meu problema, não aparecia de jeito nenhum, mas achei essa tag, tinha 3, o meu funcionou na terceira :D

      Excluir
    2. Correção: Falei no terceiro, mas foi na segunda tag.

      Excluir
  13. Não estou conseguindo copiar os códigos, fiz o que disse encostei o mouse e esperei aparecer a imagem, mas não aparece.

    ResponderExcluir
    Respostas
    1. Ariadne, eu refiz o tutorial porque tirei o Synthax do template.
      Agora os códigos estão no botão, é só clicar e ir até a página.

      Excluir
  14. Funcionou perfeitamente como podem verificar em: ( www.ubuntulinux.com.br )

    ResponderExcluir
  15. Muito Bom, me ajudou muito, parabens pelo tutorial PERFEITO!!
    fiz no meu Blog esportivo, confira >> (www.minhavisaoesportiva.blogspot.com.br)

    ResponderExcluir
  16. Muito obrigado, funcionou perfeitamente. Só seguindo seus passos.

    ResponderExcluir
  17. Olá. Deu tudo certo pra mim, mas gostaria de editar as cores de fontes do contador de comentários e afins. pode me ensinar?

    ResponderExcluir
  18. Ficou perfeito no meu blog. Tudo certinho. Obrigada!

    ResponderExcluir
  19. Olá Elaine, tudo bom?

    Mais uma vez um excelente tutorial o qual apliquei em meu blog..
    (Meu blog é 100% Elaine Gaspareto!)

    Muitíssimo obrigado!

    O único problema é que não sei como ser notificado quando alguém comenta lá, você saberia?
    De toda forma, é uma ferramenta muito valiosa!

    Agradeço mais uma vez.
    Quem quiser conhecer meu site:
    www.oespaco.net

    Abraço a todos

    ResponderExcluir
  20. aaaaa obrigada amei o post!! já coloquei no meu blog *-* muito obrigada!!
    seamandomais.blogspot.com

    ResponderExcluir
  21. Ola gostei muito do seu blog, mas o meu aparece mas quando fui testar os comemntarios e mando publicar informa "Este conteúdo não está mais disponível" você saberia me dizer o que é?

    ResponderExcluir
  22. Eliane,
    Esse recurso não fica disponível se o blog for acessado pelo celular certo?

    Porque no meu aparece quando abro os post pelo computador normalmente, mas pelo celular não, é isso mesmo?

    ResponderExcluir
  23. Estou amando todas as dicas! No meu apareceu Facebook comments plugin. Fica assim mesmo?
    www.kellyzarate.com
    www.facebook/kellyzaratefotografia

    ResponderExcluir
  24. Seu blog é maravilhoso, voce explica tudo tão bem *_* não entendo nada de HTML mais consegui fazer várias coisas com voce , coisa que não conseguia em outros tutoriais. nossa muito obrigada. beijos!
    www.cacheandocommirellydarlen.com

    ResponderExcluir
  25. nossa, apanhei. Vi varios tutoriais e nao conseguia de jeito nenhum. Mas agora deu tudo certo. Tá lindooooo amorparanos.blogspot.com

    ResponderExcluir
  26. Como sempre ótimo!

    Fiz e dei certo!

    Te admiro muito! Nos tutoriais, nos textos. O blog todo! Parabéns!

    Obrigada.

    Comparitlhei.

    Beijos.

    Blog Jovens Mães

    ResponderExcluir
  27. Muito bom o tutorial!! :D perfect!! Bem simples! Muito obrigado!
    visitem: http://www.infowarsbrasil.org/

    ResponderExcluir
  28. Deu certo, yay! Mais um widget instalado com sucesso graças às suas dicas! ♥
    Gostaria de agradecer imensamente, seus tutoriais são excelentes!!! Muito obrigada por disponibilizar os códigos e pelos tutoriais tão explicadinhos, sempre acabo voltando pra cá pra pegar mais dicas haha!
    Tenha um lindo dia, parabéns pelo blog maravilhoso!
    Beijos e Morceguinhos,
    Med! ♥

    darkmedora.blogspot.com ♥

    ResponderExcluir
  29. Muitíssimo obrigado pelo tutorial Elaine!! <3 não sei o que aconteceu, mas ds comentários sumiram do meu blog, eu até tentei resolver o problema pesquisei em vários sites, porém não obtive sucesso TT.TT bom pelo menos vc conseguiu me ajudar com esse tutu.
    Sucesso pra vc flor (sempre) porque vc merece > <

    ResponderExcluir
  30. O sistema do Facebook mudou. Será que poderia postar uma versão atualizada?

    ResponderExcluir
  31. Tenho algumas duvidas Elaine.

    1) Coloco o meu nome ou o nome da pagina do facebook? Ambos os casos funcionou. Masssss, vamos para duvida 2.
    2) Quando comento, não aparece la na pagina do facebook, aparece o comentário como se fosse do facebook no blog... mas não la no face, como se ele sumisse la...

    Obrigado desde já.

    ResponderExcluir
  32. Muito obrigado por este post um ótimo tutorial!

    ResponderExcluir
  33. Bom Dia Amiga, olha eu mais uma vez, eu fiz um procedimento desse de colocar os comentários do face no Blogger e até que deu certo, mas ao fazer novas postagens aparecem duas caixas do face na página nova, será que e´algum erro ou tenho duas ID's da mesma na Developers? veja como fica: http://static.panoramio.com/photos/original/134479733.jpg e o meu site é: www.candeiasbahia.net - relembrando que uso um modelo antigo chamado Rounders.

    ResponderExcluir
    Respostas
    1. Gilmar, eu não sei dizer porque nunca testei nesses modelos antigos.
      Sugiro que você crie um blog de testes com um dos modelos do Design de modelo do Blogger e teste nele até pegar o jeito...

      Excluir
    2. Eu descobrir ontem mesmo de tanto mexer nos html, mês passado eu estava tentando colocar caixa de comentários no meu blogger e como não deu certo procurei remover todos os códigos que eu tinha aplicado; resultado: eu acabei deixando duas linhas do código no modelo, acabei esquecendo, daí quando fiz o novo procedimento, aconteceu isso, de ficar duas caixas, mas eu já removi e ficou tudo certinho agora. Muito obrigado pela sua atenção amiga e desculpas está te amolando viu, rssss.

      Excluir
  34. Fiz como ensinou, instalou e tudo, mas na hora de posta a mensagem aprece "falha na mensagem" sabe como resolver esse problema?

    ResponderExcluir
    Respostas
    1. Irismar, seu template é baixado da internet? Se for provavelmente não funcionará...

      Excluir
    2. É baixado da internet sim. Então esses códigos só funcionam com os templastes do blogger é isso? Ja agradeço sua atenção. Quero te parabenizar pelo lindo trabbalho. Bjs

      Excluir
    3. Sim, pois templates baixados em geral possuem variações próprias dos códigos.
      Por isso, em geral, causam conflito, infelizmente...
      Muito obrigada pelo elogio :)

      Excluir
  35. Esse post me ajuda sempre, toda vez que troco o template do meu blog. AMOOO!!
    obrigada

    bj

    ResponderExcluir
  36. dá um erro. Coloco o código e aparece perfeitamente.
    Mas toda vez quando a primeira pessoa vai comentar quando digita aperta pra enviar aparece uma mensagem de erro dizendo "valor inválido"... depois da segunda em diante tudo fica normal.

    ResponderExcluir
  37. oI QUERIDA! amEI SEU BLOG E SEU POST... MAS NÃO CONSEGUI FAZER :( TEM QUE SER O TEMPLATE QUE VC USOU, OU PODE SER EM OUTROS TEMPLATES? PORQUE NÃO APARECEU NADA :(

    ResponderExcluir
    Respostas
    1. Jacqueline, eu testei em vários templates, mas todos nativos do Blogger.
      Não testei em templates baixados da internet.

      Excluir
  38. Obrigado! cada vez que eu atualizo o layout do meu blog eu visito seu site. Bubunoni.com

    ResponderExcluir
  39. Excelente e super fácil, muito bem explicado!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…