Oi, internet ♥

Seja bem vindo se você é novo por aqui. Se já veio outras vezes, fico feliz por ter voltado ♥. Ah, eu sou a Moniele - mas pode me chamar de Moni, tá? Você está em casa, pegue um chá e tire os sapatos.

@mmoniele

Tutorial: Comentários do facebook no blog


Finalmente, o primeiro tutorial do blog !! Eu queria ter feito a muito tempo atrás, mas o 1001 Julietas estava com um problema no HTML ( por isso a falta de post's ) mas já arrumei. \o/, agora segura que eu vou encher o saco de vocês hehehe

Bom, hoje eu vou mostrar como colocar a caixinha de comentários do facebook no blog 

Ela vai - tem que ficar - desse jeito. É beeeeem fácil de fazer, não tem que mexer em muitos códigos e de todos que eu testei, foi o único que deu certo no meu blog.  - Eu não lembro em qual site eu encontrei esse tutorial, porque ele estava salvo á muito tempo aqui no word. Então, se for do seu site, me avise para que eu coloque os créditos aqui tá ? Vamos lá então :)


Criando um aplicativo no facebook : 
Primeiro de tudo,  para que dê certo você precisa criar um aplicativo no facebook, esse aplicativo vai gerar um código e esse código vai fazer com que o facebook te reconheça como o moderador dos comentários. 

Acesse -  https://developers.facebook.com/apps  -    Você vai ter que se registrar. Será necessário que você  coloque o número do seu celular. Depois disso, você clica em send as  text e espera chegar a mensagem com o seu código de confirmação no celular. ( A menagem chega rápido rs )


Agora, você vai criar o aplicativo. O facebook deu uma atualizada, e facilitou muito na hora de criar o aplicativo.  Você só precisa clicar em Create a new app no canto direito da  tela.


Vai aparecer uma caixinha - Nela, você vai colocar o nome do aplicativo ( Pode ser o nome do blog, ou qual você preferir ) - a 2 opção pode deixar em branco e por último a categoria que mais se encaixa com o seu blog.  ( Eu coloquei a segunda opção porque nenhuma se encaixou com o blog. 


Por fim, você vai clicar em Creat app ID e digitar o código de verificação que vai pedir.



Feito isso, vai aparecer uma nova página com o ID do seu aplicativo. Copie esse número e coloque em algum lugar, porque vamos precisar dele, tá ? 




 Fazendo funcionar o comentário do Facebook no blog \o/ 

Entre no seu blog - Modelo -  Editar Html

Aperte CTRL F - e dentro da caixinha que vai aparecer você vai procurar esse código

<div class='post-footer-line post-footer-line-3'>

E abaixo desse código que você procurou, você vai colocar esse código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                        <div style='float: left; margin: 0px auto 20px; padding: 10px; background: #fff;'>
                          <h4>
                            <fb:comments-count expr:href='data:post.url'/>
                            comentário(s) pelo facebook:
                          </h4>
                          <div id='fb-root'/>
                          <script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'/>
                          <fb:comments expr:href='data:post.url' num_posts='3' publish_feed='true' width='710'/>
                        </div>
                  </b:if>

Entendendo e modificando :

O que está em rosa : É o que configura onde vai mostrar  os comentários. Essa TAG está ativa para aparecer só dentro das páginas dos comentários do blog. Se você quiser que ele apareça na sua página inicial, então apague tudo o que está em rosa.

O que está em roxo : É o tamanho da caixinha dos comentários, modifique até ele se ajustar na sua área de postagem ( comentários ).

O que está em laranja : É a quantidade de comentários que vai aparecer na página, coloque a quantidade que preferir.

Visualize e Salve.

Moderando os comentários - Opcional .

Sem essa opção você provavelmente não vai receber notificação de quem comentou no blog pelo Facebook. Eu não á uso, então não recebo. Mas, é recomendável e super fácil também.

Aperte CTRL F e dentro da caixinha que aparece procure o código:


<head>

logo ACIMA desse código que você acabou de procurar, você vai colar esse código :

<meta content='ID-APP' property='fb:app_id'/>

O que está em VERMELHO  você vai colar aquele código que eu disse pra você copiar e guardar em algum lugar, lembra ?

Salve :)

Agora, clique em - https://developers.facebook.com/tools/comments  e  vai até configuração

Agora, vai aparecer uma janela, nessa janela no campo MODERADORES, você coloca o nome do seu usuário do face.



Salve.

Nessa página é onde você vai visualizar e moderar os comentários.

 Fim haha.  Bom, agora você tem além dos comentários do blog, os comentários do facebook também. Além dos seus seguidores e leitores, quem não tem blog ou conta do google ( o que é meio difícil ), vai poder comentar e interagir. \o/

É isso gente, qualquer dúvida deixem nos comentários que eu respondo :) Alguma ideia para post's futuros ou novos tutorias, é só deixar ai também tá ?


 Ah e claro, me acompanhe nas redes sociais ♥ 

Facebook  ♥ Instagram ♥  twitter 

Comentários

  1. Excelente dica, como uso wordpress apanhei até conseguir um plugin que funcionasse direito! Bjs.

    www.resenhamania.com.br

    ResponderExcluir
  2. Gostei muito minha linda eu precisava saber como obrigada
    magrafelizpensa.blogspot.com

    ResponderExcluir
  3. Super explicadinho, adorei o post! :D

    www.wordskindom.blogspot.com.br

    ResponderExcluir
  4. Ameeeeei
    Eu coloquei no meu blog, mas o contador não funcionou :c
    www.iamcamilakellen.blogspot.com

    ResponderExcluir
  5. Bem explicadinho!
    Também coloquei no blog e acho bem legal a interação por lá

    ResponderExcluir
  6. Aeee, eu estava mesmo querendo saber como que faz isso, sou péssima com configurações de blog, uma analfabeta funcional kkkkkkkkkk. Super obrigada pela dica!

    Beijo.
    http://www.tendadoslivros.com.br/

    ResponderExcluir
  7. Adorei! Muito obrigada pela dica, adoro seu blog, beijão <3

    ResponderExcluir
  8. Que legal!!! Já tinha visto comentários em blogs através do face, mas não tinha ideia de como se fazia isso. Vou guardar pra futuras consultas, hehe!

    =)

    Suelen Mattos
    ______________
    ROMANTIC GIRL

    ResponderExcluir
  9. Ameei esse tuto, até apliquei ele lá no blog.

    >>> http://gilustre.blogspot.com.br/

    ResponderExcluir
  10. Que legal o tutorial.
    Acho que vou tentar, apesar de ser meio burra nessas coisas, haha.
    Mas está tão explicadinho que acho que consigo.
    :P

    Beijooos

    www.casosacasoselivros.com

    ResponderExcluir
  11. Adorei o tutorial, achei muito bem explicado e fácil. Quero colocar logo isso no meu blog.

    beijos

    http://mundo-restrito.blogspot.com.br

    ResponderExcluir
  12. Olá!

    Excelente seu tutorial, vou aproveitar e ver se consigo colocar no meu!

    resenhaeoutrascoisas.blogspot.com

    Instagram @blogresenha

    ResponderExcluir
  13. Excelente tutorial! Eu não tinha a menor ideia de como fazer isso!
    Beijo

    ResponderExcluir
  14. Nossa que bacana a sua dica, vou usar com certeza, pois estou ajeitando meu layout! Muito obrigado pela dica!
    Beijos lindona!
    http://blogdakarulina.blogspot.com.br/

    ResponderExcluir
  15. Adorei a dica! Ótimo post (:
    http://www.lenouveaugrunge.com/

    ResponderExcluir
  16. Oiee!
    Adorei esse tutorial, foi bem útil para mim pois pretendo brevemente colocar comentários através do facebook! Por conta de alguns leitores não terem contado Google (: Fui super explicado e olha, esse foi o primeiro que vejo por aqui e adorei (Momento: Faz mais ♥). HUAHAUAHAU

    Beijos!

    ResponderExcluir
  17. Aaaaaaaaaaaaaaaaaah, vou fazer agora mesmo!

    Beijos (foscos)
    http://beijofosco.blogspot.com.br/

    ResponderExcluir
  18. Eu estou pensando em colocar isso no meu blog, acho que facilita bastante para os leitores, além de ser uma forma a mais de interação :)

    Beijos,
    Radioativa Fluffy

    ResponderExcluir
  19. Meus sinceros parabéns pelo Blog e pelo post, sério!
    Você explicou muito bem, e essa inclusive vinha sendo uma das minhas maiores dúvidas recentemente! Seu post foi extremamente útil, muito obrigada :3

    Um grande abraço!
    http://imaginationrelease.blogspot.com.br/

    ResponderExcluir
  20. bacana essa dica, nao sabia como faze-lo

    www.tofucolorido.blogspot.com
    www.facebook.com/blogtofucolorido

    ResponderExcluir
  21. Eu também não sabia como colocar comentários do facebook no blog, até que achei um blog que explicava, ai eu consegui hahaha. Essas suas dicas vai ajudar muitas blogueiras.
    Beijinhos!
    www.dosedeilusao.com

    ResponderExcluir
  22. Oi Obrigada mesmo pelo tutorial! Eu já tinha os comentários do fb, mas sem essa moderação que eu não sabia fazer era um saco ter que ficar olhando os posts toda hora pra saber se tem comentário. Devia ser mais simples né? uahuhauua
    Valeu, agora é menos dor de cabeça pra mim!
    Beijos, Amanda.
    Expresso de Nárnia

    ResponderExcluir
  23. dica maravilhosa *-* obrigada por compartilhar conhecimento. estou te seguindo!
    beijão <3
    www.renatacaparroz.com

    ResponderExcluir
  24. Que venham muitos outros! Amei o tutorial,super útil e muito bem explicadinho. Tenha um final de semana abençoado, beijos!

    Blog Paisagem de Janela
    http://paisagemdejanela.blogspot.com

    ResponderExcluir
  25. Oii tudo bem? Adorei esse tutorial, porque eu não sabia. Tenho dúvidas em várias coisas na verdade, hahaha. Sabe o que eu gostaria de aprender? Como colocar a minha fanpage direto no blog para que as pessoas possam curtir :3 , já tentei , mas nunca consigo :(
    Beijooos
    http://profissao-escritor.blogspot.com.br/

    ResponderExcluir
  26. Adorei o tutorial, posts assim ajudam muito!
    Beijão
    www.blogbelezamake.com

    ResponderExcluir
  27. OOoi,

    Eu estou mudando meu layout e quero adicionar os comentarios, adorei esse tutorial!
    Obrigada pela dica :)


    Beijinhos,
    www.entrechocolatesemusicas.com

    ResponderExcluir
  28. Oi Juh, gostei do seu primeiro tutorial, até porque eu tava precisando urgente( Ainda Tô kkk ) e pra ser seu primeiro tutorial ta 1000 show deu pra entender tudo e fico certinho no meu blog de teste, logo colocarei lá no blog...
    Abraços e um Boa semana...

    Um Conto Literário

    ResponderExcluir
  29. Oii, tudo bem? O tutorial ficou ótimo!!! Faça mais!
    Beijos.
    http://www.garotadolivro.com/

    ResponderExcluir
  30. Sabe flor eu já disse acima que você me ajudou vou ver se post no meu blog, pode ser blog grátis pois o meu não pago por ele
    linda tem post novo, poderia ver?
    magrafelizpensa.blogspot.com

    ResponderExcluir
  31. Tutoriais têm sempre a sua importância para alguém. Achei bem interessante.

    Bjs

    http://fadoanjols.blogspot.com.br/

    ResponderExcluir
  32. Adorei o tutorial, muito bem explicado <3
    beijos
    http://masenstale.blogspot.com.br/

    ResponderExcluir
  33. "Que jamais nos falte fé
    e que na esperança de uma realização,
    o melhor aconteça nos dando sempre mais entusiasmo.
    Que sua semana seja preenchida de bênçãos!"
    Deixando um recadinho pra vc
    amore ♥
    até mais tarde, voltarei!
    ...()""()
    .("('o')
    ,-(___)|'--.
    "=(o)==(o)='
    www.coisasdeladdy.com

    ResponderExcluir
  34. Que ótima dica, o tutorial ficou MEGA bem explicado, parabéns!


    Beijos
    Brilho de Aluguel

    ResponderExcluir
  35. Amei seu blog, o layout, o nome ♥ eternamente lindo.
    Gostei do tutorial, apesar de não me interessar em adicionar a aba de comentários no face, gostei de como explicou, eu particularmente não sabia.
    Beijos, linda!

    www.vodkaescarpin.com.br

    ResponderExcluir
  36. Oi tudo bem?
    nossa como você explica bem *-*, não tenho face, mas mesmo assim adorei, beijos e parabéns pelo lindo blog (L) Lost Words

    ResponderExcluir
  37. Gostei bastante do tutorial e com certeza já favoritei, em breve irei fazer essa mudança lá no blog. Fico no aguardo de mais tutoriais por aqui!
    Beijo,
    http://pactoliterario.blogspot.com.br/

    ResponderExcluir
  38. Aprendi esses dias! Tutorias são sempre bem vindos! Nos ajudam muuito!
    Obrigada pelas dicas, bom pra quem tá começando!
    Beeijo

    ResponderExcluir
  39. Adorei
    já tinha tentado mil tutoriais mas nenhum me ajudou e me serviu
    o seu está mega fácil e já instalei no meu layout hahá
    obrigada

    http://www.morenaemoderna.com/

    ResponderExcluir
  40. Olá! Achei o post bem esclarecedor, pois estou procurando um tutorial simples desse há tempos.

    http://www.tudoonlinevirtual.blogspot.com.br/

    ResponderExcluir
  41. Oi Moni!

    Amei o tutorial, uma amiga me pediu um dia desses e já passei teu link :)
    E respondendo sua pergunta: Sim, estou estudando no Unasp-EC! Você é daqui? Me conta tuuuuuuuuuuuuudo! Se quiser falar comigo no tt: @cahinthurn

    Beijos
    www.carolice.com

    ResponderExcluir
  42. Adorei este post, é muito útil!

    MORNING DREAMS

    Sofia Silva, Beijos*

    ResponderExcluir
  43. Ameii, vou tentar fazer :D Ótimo post <3 Amei teu blog tbm, layout é lindo demaais.. Já to seguindo.. beijos
    www.andressaagnel.com

    ResponderExcluir
  44. Parece ser bem fácil!
    Eu nunca quis colocar, mas quem sabe um dia né?!

    www.expectativasreais.com.br

    ResponderExcluir
  45. Não sabia como fazer e adorei esse tutorial. Vou tentar fazer hoje mesmo. Muuuuuito obrigada pelas dicas.

    M&N | Desbrava(dores) de livros - Participe do nosso top comentarista de fevereiro. Você escolhe o livro que quer ganhar!

    ResponderExcluir
  46. Poxa, eu usei um código super grande, dividido em três partes e ainda ficou dividido em abas. Vou tentar tirar esse pra colocar o seu, muito mais simples!

    Zona de Conspiração

    ResponderExcluir
  47. Com esse passo a passo eu consigo manter os dois tipos de comentários no meu blog?

    http://www.carolinapeclat.com

    Beijos
    Carol

    ResponderExcluir
    Respostas
    1. Oi Carol,

      consegue, ele vai ficar igual o meu blog ; D usei o mesmo tutorial.

      Excluir
  48. Ain, é facil mas tenho muito medo de fazer algo errado </3
    Eu queria saber se já fez ou se não, ensina a fazer o tutorial dessas opções de curtir, recomentar e compartilhar esse post em outras redes, eu tinha antes, mais deu um erro e saiu tudo e não sei onde tinha achado .. kk


    Desculpa pela demora.
    Beijinhos =*
    www.eraoutravez.com

    ResponderExcluir
    Respostas
    1. Oi pam,

      Então, o cometário pelo facebook que eu uso aqui, é o mesmo do tutorial, então, se você fizer direitinho não tem erro tá?

      E pode deixar, o próximo tutorial será esse :D
      Beijão.

      Excluir
  49. Aaaah, obrigada pela ajuda!
    Já fiz o tutorial e deu super certo <3
    Beiijos

    minhasecretapoesia.blogspot.com

    ResponderExcluir
    Respostas
    1. Magina Ka, fico muito feliz que tenha dado certo <3 qualquer coisa, estou aqui.

      Beijinhoooos <3

      Excluir
  50. Respostas
    1. De nada Andrea <3 Fico feliz que tenha conseguido. Qualquer coisa é só chamar haha

      Excluir
  51. Parabéns pelo post ajudou a mim e a muitos outros blogueiros também. Seguindo!

    http://meuuniversopeculiar.blogspot.com.br/

    ResponderExcluir
  52. Depois de muito apanhar, consegui colocar no meu blog... mas apareceu duplicado. Tentei tirar mas não consegui, vai ficar assim mesmo hehehehe bjkssss

    ResponderExcluir
    Respostas
    1. poxa, como assim duplicado? Será que sem querer você colocou o código 2x ?
      Mas, que ótimo que deu certo \o/ uhuuuul

      Excluir
  53. Nossa o melhor tutorial que encontrei relacionado a isso, ele quase deu certo no meu blog, mas estou com dificuldades de encaixar ele dentro da área de postagem do blogger, fiz tudo que você ensinou e de fato apareceu lá certinho, mas ele ficou solto entre o fim dos post e o começo dos comentários, eu uso uma imagem de fundo na área dos comentários ele não é como o seu que desce todo branco sabe ? ai ficou bem feio ele fora da área dos comentarios, o que será que aconteceu, você poderia me ajudar ? eu criei o blog recentemente mas eu sei alguma coisas de html por causa do tumblr que uso bastante. Fico agradecida se puder me ajudar e parabéns pelo blog, continue nos ajudando com dicas tão boas. Beijo

    ResponderExcluir
    Respostas
    1. Oi Mari,

      qual é o link do seu blog pra eu ver como está?

      Excluir
  54. Nossa demorei um tempão mas consegui resolver o problema, centralizei ele e ficou melhor, coloquei o fundo branco também que ajuda a melhorar a aparência. Agora o que ta dando trabalho é o rodapé, eu já baguncei os códigos todos, mas não consigo consegui até sumir com a fan page do face, agora ela só aparece nas postagens e não na página inicial kkk. Eu usei o tuto do Go imagine e da Nah Médice pra personalizar o rodapé mas não deu. Se você souber de algum blog que tenha um tutorial que você tenha testado e puder ajudar eu agradeço.

    O meu blog é esse www.paradefrescura1.blogspot.com.br, mas não repara na bagunça pq ele ta novinho ainda, nem fez uma semana rsrs

    ResponderExcluir
    Respostas
    1. Oi mary, entrei no seu blog haha, mas fiquei com uma dúvida. Você está falando do rodapé das postagens ou do rodapé do blog?

      Sobre a fan page, você conseguiu colocar?
      Qualquer coisa, tente esse tutorial - http://www.1001julietas.com/2015/05/tutorial-caixinha-de-curtir-do-facebook.html ! :D

      Excluir
  55. Nossa, esse post salvou a minha vida! Tentei de inúmeras formas e não tinha conseguido até ler o seu tutorial. Muito obrigada pela ajuda, adorei seu blog e já estou seguindo! Se quiser dar uma olhadinha no meu será mais que bem vinda ;)


    Twitter: twitter.com/nostalgiacinza
    http://nostalgiacinza.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. ebaaaaaaaaaa \o/ Feliz que você tenha conseguido e também, gostado do blog ;**
      E claro, vou passar ctz ;D

      Excluir
  56. Oi! Eu quero te dar um beijo, um abraço e um buquê de flores!!!! hihihihihhi
    Menina você me salvou! Fiz tantas pesquisas e ninguém conseguiu resolver.
    Então... Apareceu você meu anjo! Iluminou meu blog! hihihihihih
    Agora eu tenho a tão sonhada cx. de comentários, vinculando com o face!
    Muito obrigada! Vou te seguir em tudooooo! hihihihi
    Bj harmonioso!
    www.lenefeminina.blogspot.com.br

    ResponderExcluir
  57. Obrigado!!! Muito bem explicado e me ajudou bastante!

    ResponderExcluir
  58. Obrigadaaaa! Foi A Unica Que Me Ajudou!

    ResponderExcluir
  59. aqui no meu template não tem class='post-footer-line post-footer-line-3'> nem 1 nem a 2...ja tinha feito antes em um template antigo mas essa taiga não tem em meu template eu consigo com a configuração antiga mas os comentarios não chega no App

    ResponderExcluir
    Respostas
    1. Fabio, qual o seu template?
      Você usa blogger ou Wordpress?
      Modelo Viagem ou mínima?

      Excluir
  60. Olá! Eu uso no meu blog um template que não tem a linha post-footer-line post-footer-line-3. Tenho a 1 e a 2, mas a três, não. Como faço?

    ResponderExcluir
  61. Oi, eu não encontrei aquela primeira tag que você colocou, e agora? :[

    ResponderExcluir
  62. Oi, eu não encontrei aquela primeira tag que você colocou, e agora? :[

    ResponderExcluir
  63. Seu tutorial é perfeito. Nunca tinha achado algo tão bem explicado. Obrigada!
    www.vivaessamoda.blogspot.com.br

    ResponderExcluir
  64. Obg deu certo \0/
    tayressoares.blogspot.com.br

    ResponderExcluir
  65. Merda acabou com o codigo do meu blog ja tentei todos os metodos não funciona nem a pau

    ResponderExcluir
  66. Obrigada!!! deu certinho,porem a caixa de comentarios ficou cortada,tipo muito grande,ja ajustei no html mas nao diminui um cm,pode me ajudar?

    ResponderExcluir
  67. Quer Aumentar visitas em seu Blog de graça e também para seus vídeos do youtube?
    Use em seu(s) Blog(s) ou seus vídeos no YouTube:Você entra com meu convite abaixo se cadastra baixa o software gerador,depois é só usar o software dar start e pronto seus minutos estão contando e com eles as vistas,Note que no youtube vai parar por alguns dias em 301 é a analise deles por isso o ideal é colocar mais de 18 segundos em cada visita, depois de algum tempo recomeça a contagens do youtube,pode ser usado grátis até 3 URL ou pague e tenha mais divulgação,com mais slots .Totalmente seguro e você mesmo pode escolher de onde estão vindo as visitas (disponível em conta Premium).Você pode minimizá-lo enquanto gera visitas,NUNCA ESQUEÇA DE APERTAR START ANTES, irá ganhando minutos,e visitas por cada minuto que o software ficar ativo minimizado em seu PC..saiba mais em: http://www.lucraremcasa.net/aumentar-visitas

    ResponderExcluir
  68. Quer Aumentar visitas em seu Blog de graça e também para seus vídeos do youtube?
    Use em seu(s) Blog(s) ou seus vídeos no YouTube:Você entra com meu convite abaixo se cadastra baixa o software gerador,depois é só usar o software dar start e pronto seus minutos estão contando e com eles as vistas,Note que no youtube vai parar por alguns dias em 301 é a analise deles por isso o ideal é colocar mais de 18 segundos em cada visita, depois de algum tempo recomeça a contagens do youtube,pode ser usado grátis até 3 URL ou pague e tenha mais divulgação,com mais slots .Totalmente seguro e você mesmo pode escolher de onde estão vindo as visitas (disponível em conta Premium).Você pode minimizá-lo enquanto gera visitas,NUNCA ESQUEÇA DE APERTAR START ANTES, irá ganhando minutos,e visitas por cada minuto que o software ficar ativo minimizado em seu PC..saiba mais em: http://www.lucraremcasa.net/aumentar-visitas

    ResponderExcluir
  69. MEU DEEEEUS, como isso foi útil! Tava louca atrás de um tutorial simples. <3
    http://lisadorme.blogspot.com.br/

    ResponderExcluir
  70. Nossa até que enfim consegui um post decente, muito obrigada. Esse post foi o único que entendi até agora fiz e deus super certo. Sempre grata. Visite o blog e veja como ficou.

    abraços | taynara mello
    www.indicarlivros.com

    ResponderExcluir
  71. Muito Bom! Me ajudou bastante com o blog. Eu tentei fazer outro, mas esse foi o único que deu certo.
    Amei seu blog, muito bonito. Beijos <3

    ResponderExcluir
  72. Muito obrigada! Achei que não daria certo, mas deu tudo certinho.
    http://sefosseprimavera.blogspot.com.br/

    ResponderExcluir
  73. gostei das dicas
    eu tenho um empresa de criacão de sites:
    https://www.companiaweb.com/

    ResponderExcluir

Postar um comentário