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.

46 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

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…