Como colocar a caixa de curtir do Facebook no blog?

em 17 de março de 2015

Como colocar a caixa de curtir do Facebook no blog?

Em 2013 eu publiquei um tutorial que é o mais visto do blog de todos os tempos.
Este:
Como colocar o box de curtir do Facebook no meu blog?

Ele funcionou muito bem até que o Facebook alterou sua página Facebook Developers e muita gente se viu perdida pois a opção de incorporação com código iframe deixou de aparecer.
Então vou atualizar o tutorial com 2 outras formas de ter em seu blog a caixa de curtir do Facebook.
A primeira opção deixará sua caixa de curtir exatamente assim:



Caixa de curtir do Facebook para blog -primeira opção

Caso sua fanpage tenha um endereço simples como a minha, sem números no final, essa opção é ideal pra você!

Para começar vá ao seu painel do blog e clique em Layout. Clique em Adicionar um gadget e dentre as opções que aparecerem escolha HTML/JAVASCRIPT.
Na caixa que expandir cole este código:



Copiar o código



E faça as seguintes modificações:
Onde marquei em azul você altera colocando o nome de sua fanpage, aquele que aparece ao final do endereço dela.
Por exemplo, o endereço da minha fanpage: https://www.facebook.com/ElaineGaspareto
Então eu coloco no campo destacado em azul exatamente o final do endereço, que é ElaineGaspareto.
Ficará assim:

<center>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FElaineGaspareto&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23ffffff&amp;header=false&amp;appId=568733679822116" style="border: none; height: 258px; overflow: hidden; width: 300px;"></iframe></center>


Entendeu?
Caso queira alterar a largura troque os valores expressos em width (aparece em 2 lugares no código) e para alterar a altura troque os valores expressos em height (também aparece em 2 lugares no código).
Mas eu sugiro não mexer se não souber o que está fazendo, ok?





Daí, com o código já alterado salve seu gadget, arraste para onde deseja que fique e salve a organização de seu blog.
Simples e rápido.

Caixa de curtir do Facebook- segunda opção

Esta segunda opção é a que eu prefiro pois dá mais liberdade de personalização.
Vamos à página do Facebook para desenvolvedores, aqui:
Facebook Developers
Lá você verá esta página:

página inicial do facebook developers

Agora vamos começar!
No campo Facebook Page URL apague o endereço do próprio Facebook e coloque o endereço completo de sua fanpage, exatamente como o copia de seu navegador;
No campo Width coloque a largura que deseja para sua caixa (considere a largura de sua sidebar para fazer essa escolha);
No campo Height defina a altura de sua caixa. Eu em geral não mexo nessa parte;
No campo Color Scheme defina se prefere light ou dark, sendo que este só se aplica se seu blog tiver fundo escuro;
Marque ou desmarque as caixinhas que definem se quer que os rostinhos das pessoas que curtem a fanpage apareçam, se quer header e borda e se quer que seus posts na fanpage sejam mostrados..
Faça testes e vá vendo como fica.
Veja como configurei a minha caixa de curtir:

como configurar a caixa de curtir do facebook

Depois de pronto clique no botão azul Get Code.
Vai abrir esta janela:

código da caixa de curtir do facebook

Copie o primeiro código, deixe essa janela aberta, vá ao seu painel do blog, clique em Layout/Adicionar um gadget e escolha HTML/JAVASCRIPT.
Cole a primeira parte do código copiado, volte à página do Facebook Developers e copie a parte final do código.
Cole-a imediatamente abaixo da primeira parte, no mesmo gadget.
Ficará assim (claro que com seu código):

códigos da caixa de curtir do facebook

Coloque título se desejar, salve, arraste para onde deseja que fique e salve o arranjo em seu layout.
Está pronto!
Viu que simples que é?

Quer ficar por dentro de todas as novidades, ter acesso rápido a todos os tutoriais e dicas do blog?
Para isso você pode:

→ Seguir o blog via gadget Seguidores: basta clicar em Participar deste site ali na lateral do blog e concluir o processo;

→ Pode curtir nossa fanpage: todos os posts têm seu link enviados pra lá no momento em que são postados. Basta clicar em Curtir!


→ Cadastre seu email e receba a atualização direto nele, assim que for postada.
Digite seu endereço de email:


Posso pedir uma coisa?
Compartilha o post?
Hein?
Diz que sim... é só um clique... não custa nada e ajuda quem está ajudando você.
Não é?


Importante

À partir de 23 de junho de 2015 esta caixa de curtir não serã mais usada, o Facebook vai descontinuar o serviço.
Mas calma, a novidade é boa e já tem tutorial novíssimo e atualizado no blog:
http://www.elainegaspareto.com/2015/04/nova-caixa-de-curtir-do-facebook.html

Vai lá!

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.

94 comentários , comente também!

  1. Oi Elaine,eu exclui meu antigo Facebook. Criei outro e vi que estava diferente mas não tive dificuldades de criar minha fã page,pesquisei na ajuda do Facebook mesmo.
    Na net em geral tudo se modifica rápido demais.
    Parabéns pelo tutorial com certeza vai ajudar muita gente,bjs

    ResponderExcluir
  2. Elaine eu acho hilário:Gostou do blog?Então que tal curtir nossa página no Facebook?
    Não tenho certeza mas acho que já te curti umas 50 vezes....rsrs......,beijão querida para você e Edirlan,bjs

    ResponderExcluir
  3. Obrigado me ajudou muitooo

    te amo kkkkkkk

    ResponderExcluir
    Respostas
    1. rsrsrs que bom, é bom ser amada rsrsrsr

      Excluir
    2. A minha tinha ficado um tanto em um tamanho não muito legal. Fiz as devidas diminuições, agora ficou legal! Obrigada pelas dicas.

      http://umpoucodetudojapao.blogspot.jp/

      Excluir
  4. Oi Elaine,
    Mais uma vez, tudo explicadinho e (assim) fácil. Já instalei lá no blog, que por sinal está cheio de gadgets ensinados por você.
    E mais uma vez, obrigada por compartilhar conosco.

    Beijos

    ResponderExcluir
  5. Elaine the best forever!!!
    Matou a pau esse post. Massss vou pedir pra vc atualizar nas coisinhas que preciso.
    Profissional das profissionais.
    Bjo

    ResponderExcluir
  6. Muito obrigada, seu post foi de muita ajuda ^^

    ResponderExcluir
  7. Adorei, mas como eu faço para vincular meu face ao meu blog. Quando abri o face já tinha o blog.
    Tem como?
    Beijo beijo beijo

    ResponderExcluir
    Respostas
    1. Carolina, como assim, vincular?
      Não entendi a pergunta... :)

      Excluir
  8. Estava atrás e achei rs, obrigada Elaine, deu certinho.
    Bjs

    ResponderExcluir
  9. Oii... eu fiz tudo direitinho como vc explico
    mas quando eu entro no blog nao aparece nada. Pq sera??

    ResponderExcluir
  10. Elaine, eu já arrumei tudo.. Obrigado pelo tutorial!

    ResponderExcluir
  11. Olá Elaine! Estou começando a desenvolver web sites a pouco tempo. Segui a sua orientação com o iframe fazendo a substituição e colando-o na área da minha homepage onde queria que aparecesse a box do facebook, porem, apareceu uma caixa(no tamanho que especifiquei) informando: "Não foi possível encontrar o arquivo ou diretório". Como se não tivesse encontrado meu perfil no face. No developers colo os códigos conforme eles orientam e nada aparece. Pode me ajudar? Obrigado!

    ResponderExcluir
    Respostas
    1. Erick, não pode ser perfil, tem que ser fanpage.

      Excluir
  12. MUITO BOM o tutorial! Obrigada por compartilhar! Fiz e deu certinho!!!

    http://www.lindaepratica.com.br/

    ResponderExcluir
  13. Obrigado, Consegui colocar em meu site!
    http://www.hianimesonline.com/

    ResponderExcluir
  14. a sua primeira opção não funcionou , não aparece nada. Só o titulo
    na segunda opção
    na caixa de curtir da segunda opção , https://developers.facebook.com/docs/plugins/page-plugin
    NA CAIXA Facebook Page URL
    quando eu coloco o url da minha fan page do facebook: https://www.facebook.com/Fernandodetal
    aparece uma mensagem : Not a valid facebook page url

    Mesmo assim eu faço todo o procedimento descrito na sua segunda opção mas no meu blog
    tambem a mesma mensagem Not a valid facebook page url
    como faço para resolver isso ?

    fernando

    ResponderExcluir
    Respostas
    1. Você nunca conseguirá pois o box de curtir só se aplica à fanpages, e o seu é um perfil...

      Excluir
    2. Boa Tarde Elaine, adorei seu blog e ja estou fazendo uso no meu blogger so fiquei triste pois t eu tentei as duas opções mas nao deu certo. so fica o titulo .e quado vou na opçao
      Facebook Developers. coloco o final da minha url e clico no botao GET da uma mensagem que minha url do facebook nao e valida . mas esta tudo correto . pode me ajudar? ficarei grata.

      Excluir
    3. será que estou colocado a url do meu perfil do facebook por isso nao tem dado certo , mas o que é fanpage? como acha-la no meu facebook.

      Excluir
  15. valew Eleaine!!
    eu prefiro o primeiro codigo, pois carrega muito mais rápido!
    [http://hdgamesdownload.blogspot.com/]

    ResponderExcluir
  16. QUAL A diferença eleaine entre uma fanpage e uma de perfil ?
    grato
    fernando

    ResponderExcluir
  17. Elaine...não sei o que estou fazendo de errado...no meu só aparece lá um link para ir para a fan page, não aparece o box nem nada...aquele da segunda opção, ME AJUDAAAAAAA

    ResponderExcluir
  18. Ok, apareceu o segundo código mas não gostei dai quis colocar o primeiro só que, fica aparecendo as bordas nele sei lá por que....eu posso usar o código antigo? por que não vi diferença..é o mesmo né??? desse primeiro que você usa?
    O código antigo que disse que vai deixar de funcionar...acho estranho por que o seu parece igual ao antigo código do facebook...qual a diferença?

    ResponderExcluir
  19. Eu ADOREI minha amiga me passou seu blog e eu consegui por, muito obrigada, beijos :*

    ResponderExcluir
  20. Valew! Eu sempre esqueço como que faz. Tenho pesquisar e dessa vez cheguei aqui ;)

    ResponderExcluir
  21. poxa tentei de tudo mais o meu nao deu certo.

    ResponderExcluir
  22. Elaine como sempre salvando minha vida <3 muuuito obrigado

    www.lorenaaraujo.com

    ResponderExcluir
  23. Elaine, tem como mudar o cor das letras, porque meu tem um template que é preto e quase não dá para ler o que tem escrito, obrigado!

    ResponderExcluir
  24. Nossa! Muito obrigada mesmo! Me ajudou bastantee! Um beijo, que Deus te abençoe!

    ResponderExcluir
  25. Maravilhoso o seu post, ajudou muito e agora meu blog tem mais um detalhe bem legal... obrigada por nos ensinar, pessoas como vc ajudam o mundo a ser bem melhor. beijos

    ResponderExcluir
  26. Muito obrigada! Deu certinho! Não estava dando certo para mim porque não sabia que era para colar os dois códigos. Pensei que fosse para escolher apenas um. Valeu!

    ResponderExcluir
  27. Oiie, Muitooo obrigada, me ajudou muito, foi a unica que conseguiu me explicar. Obrigada mesmo s2

    ResponderExcluir
  28. Olá Elaine querida, tudo bem? Sabia que havia mudado mais vim no seu blog porque vc sempre mostra o caminho rs e deu tudo certo, mto obrigada pelo tutorial, parabéns !1

    Grande beijo e bom final de semana

    Katia Ribeiro
    www.katiaribeiro.com.br

    ResponderExcluir
  29. Amei seu blog...... muito obrigada por compartilhar tanta coisa boa.... beijinhos!!!!

    ResponderExcluir
  30. Muito Obrigado,você foi a unica que conseguiu me ajuda. Passa no meu blog e da uma olhadinha.. http://patysdfg.blogspot.com.br/

    ResponderExcluir
  31. Meninaaaaaaa, como você me ajudou!!!!

    Obrigada :D

    ResponderExcluir
  32. Salvou minha vida!! :)

    Obrigada!

    http://descomplicaporfavor.blogspot.com.br/

    ResponderExcluir
  33. Nossa,muito obrigada!Vi vídeos e tais,precisava muitoo dessa caixinha!!
    Obrigadãão!
    Ah,se der da uma passadinha lá :*

    http://lehamorimblog.blogspot.com.br/

    ResponderExcluir
  34. Olá, gostaria de lhe destacar minha dúvida. Já havia seguido o mesmo processo tempos atrás e tinha dado certo, porém como sem querer (rs) exclui o gadget estou tentando colocar tudo de novo. Mas o problema é que só aparece o link, sem imagem ou caixa do facebook. Poderia me orientar? http://escritoaoamanhecer.blogspot.com/ Muito obrigada, grande beijo

    ResponderExcluir
  35. Obrigado, muito fácil com seu tutorial, valeu mesmo, Seu blog é tudo de bom.

    http://ler-romances.blogspot.com/

    ResponderExcluir
  36. Excelente post.
    Muito obrigado por compartilhar essas informações valiosas conosco.
    Graça e paz.

    ResponderExcluir
  37. Andava aqui há dias a tentar fazer isso. Segui alguns tutoriais, mas só me aparecia o link. Tentei a sua sugestão (logo a primeira) e ficou logo como queria.
    Muito obrigada.

    http://realizatumesmo.blogspot.pt/

    ResponderExcluir
  38. Me ajudou pra caramba! Salvou minha vida na verdade, porque eu não estava conseguindo fazer pelo segundo modo e todas as tutos que via eram desse jeito. Dá primeira forma foi super simples e deu certo. Obrigada!
    Beeeijos!
    http://eusuponho.blogspot.com.br/

    ResponderExcluir
  39. Nao deu certo comigo :( Não sei o que fiz de errado!

    ResponderExcluir
  40. Aaaaaahhhhhh!!!!!!!!!!!!!!!!! Nem acredito que posso ter minha página do Facebook de volta no blog. Há um tempão que tento fazer isso e dá erro. Tentei pela primeira opção que vc deu e funxionaou! Mt obrigada! =)
    Bjks!
    Hanna Carolina.

    http://mundinhodahanna.blogspot.com.br/

    ResponderExcluir
  41. Eu estava quase desistindo, mas vi esse tutorial e consegui! Obrigada. <3

    ResponderExcluir
  42. "The reference to entity "version" must end with the ';' delimiter".

    Se este erro ocorrer com você ao colocar o primeiro código script do Facebook no html do blog, basta fazer o seguinte:

    Procure por: js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version =v2.5";

    A versão atual é 2.5, mas você pode estar com alguma anterior, isso não importa.

    O que se deve fazer é substituir o "&" que está entre "#fbml=1( )version =v2.5" (parênteses apenas para ilustrar o local) por "&", ficando a linha dessa forma:

    js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=&version =v2.5";

    ResponderExcluir
  43. Muito obrigado, somente a primeira opção que voce colocou funcionou pois o Facebook Developers nao funcionou
    Obrigado. by Cuecagamesdown.blogspot.com.br

    ResponderExcluir
  44. Salvou minha vida no antigo post não havia conseguido meu blog ficou show Cheirosa . Obrigada

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

    ResponderExcluir
  46. Muito bom achar um local onde todas minhas duvidas sejam explicadas tão detalhadamente!!!! Obrigada!!!!

    ResponderExcluir
  47. Muiiiito obrigada pelas dicas Elaine! Agora sim consegui deixar meu blog melhor!

    ResponderExcluir
  48. Muito obrigadaaa. O único que deu certo, simples e fácil.
    Continue com esses posts ganhou mais uma fâ.
    Se gostar de ler textos poéticos, crônicas e notícias atuais fica o convite para o meu Blog
    http://maisumtextooficial.blogspot.com.br ou pelo www.uai.com.br/blogs

    Te espero lá flor!

    ResponderExcluir
  49. Muito obrigado. Como disse a Scarleth, o único roteiro que funcionou. Namastê!
    http://www.danporto.com

    ResponderExcluir
  50. Muito bom adorei :) fácil e pratico.

    Meninas de uma passadinha no meu blogger http://umageniosaousada.blogspot.com.br/

    ResponderExcluir
  51. muito obrigada, seu post ajudou muito!!!

    ResponderExcluir
  52. Muito bom Elaine. Ajudou bastante. Está na minha barra de favoritos.

    ResponderExcluir
  53. Nossa, muito bom! Você explicou muito bem, as duas formas funcionaram perfeitamente! Gostaria de umas dicas para conseguir novos seguidores no meu Blog, conseguir novos leitores.

    Vou lhe seguir! Vlw!

    ResponderExcluir
  54. Me ajudou bastante!! Muito obrigada!!

    ResponderExcluir
  55. Oi Elaine! Muito boas as tuas dicas! Estou com um probleminha... gerei o codigo do 'like' no FB, colei a linha desta forma:
    js.src = "http://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.5"; (versao atual).

    Aparece o erro "The reference to entity "version" must end with the ';' delimiter.".....
    js.src = "http://connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.5";
    Se eu tiro o parametro da versao, deixa de acusar o erro, assim:
    js.src = "http://connect.facebook.net/pt_BR/sdk.js#xfbml=1";

    Help !!

    ResponderExcluir
  56. Obrigado pela dica.....funcionou bem
    http://brasil100hipocrisia.blogspot.com.br/
    www.facebook.com/brasil100hipocrisia

    Vlw

    ResponderExcluir
  57. OBRIGADAAAA ELAINE FAZIA TEMPO QUE TENTAVA E NENHUM DAVA CERTO BJSS ESTOU TE SEGUINDO :)

    ResponderExcluir
  58. Oie, nossa me ajudou muito! Estou começando, muito obrigada, beijos!

    ResponderExcluir
  59. A primeira forma é exatamente a que eu estava procurando. Consegui até alterar a largura. Muito obrigada!

    http://livroslapiseafins.blogspot.com.br/

    ResponderExcluir
  60. Olá!
    Graças a Deus encontrei seu post pra me dar uma ajudinha! ahaha
    muito obrigada!

    ResponderExcluir
  61. nossa que fácil kkk

    http://crentetambemsediverte.blogspot.com.br/

    ResponderExcluir
  62. Muito obrigada mais uma vez! Seus posts são sempre completos!

    Grandes beijos.

    Blog Jovens Mães

    ResponderExcluir
  63. Muito obrigada Elaine, você me ajudou muito!

    ResponderExcluir
  64. boa noite valeu gostei muito

    www.tavendooque.blogspot.com.br

    ResponderExcluir
  65. Ajudou super. Obrigado. Confere meu blog pessoal :https://paulaguiimaraes.blogspot.com.br/ bjoss :)

    ResponderExcluir
  66. obrigadaaaa !! ficou otimo <3

    http://blogbycriscalu.blogspot.com.br/

    ResponderExcluir
  67. oi boa noite da uma olhada no meu blog e ve o que acha aceito sugestoes pra melhora-lo obrigado https://menssagensevideosdowhatsapp1.blogspot.com.br/

    ResponderExcluir
  68. Amei seu blog!! Muito obrigada pela dica, funcionou muito bem!!! Aproveito para divulgar meu blog sobre dicas de viagens, minhas experiências e tudo mais... http://triphow.blogspot.com.br/

    Valeu!!

    ResponderExcluir
  69. Elaine, consegui, obrigada !Deus lhe recompense!

    ResponderExcluir
  70. Nossa. Esse ´post me ajudou demais. obrigada1

    ResponderExcluir
  71. Rapaz, ce é professora ? Explicou melhor que mtos por ai. Até pq, comigo tem q ser assim, tudo mastigadinho, pq lerdeza aqui grita e berra !

    Aliás, se vc ver esse comentário e gostar de series, te convido pra conhecer o Sericiado: um blog recém criado com muito sazon e com um pouco de humor.

    http://sericiado.blogspot.com.br/

    Muito obrigado, parabéns e mais sucesso na sua página !

    Um beijo !

    ResponderExcluir
  72. Nossa, me ajudou muito, deu super certo. Obrigada

    ResponderExcluir
  73. GOSTEI DAS RECOMENDAÇÕES E ADOREI O VISU DO SEU BLOG.
    BEM GOMO EU AINDA NÃO TENHO FACE, VOU EXPERIMENTAR AS DICAS DEPOIS, MAS MUITÍSSIMO OBRIGADA!
    poesiaseraridades.blogspot.com

    ResponderExcluir
  74. Muito valeu mesmo,eu estava apanhando para conseguir algo que voce resolveu rapidinho!! Sucesso tudo de bom!!

    ResponderExcluir
  75. Muito obrigado pelo post acabei de economizar 30 reais hahaha

    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…