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:
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&width=300&height=258&show_faces=true&colorscheme=light&stream=false&border_color=%23ffffff&header=false&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:
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:
Depois de pronto clique no botão azul Get Code.
Vai abrir esta janela:
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):
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 é?
Para isso você pode:
→ 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.
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 é?
À 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á!
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.
ResponderExcluirNa net em geral tudo se modifica rápido demais.
Parabéns pelo tutorial com certeza vai ajudar muita gente,bjs
Elaine eu acho hilário:Gostou do blog?Então que tal curtir nossa página no Facebook?
ResponderExcluirNão tenho certeza mas acho que já te curti umas 50 vezes....rsrs......,beijão querida para você e Edirlan,bjs
Obrigado me ajudou muitooo
ResponderExcluirte amo kkkkkkk
rsrsrs que bom, é bom ser amada rsrsrsr
ExcluirA minha tinha ficado um tanto em um tamanho não muito legal. Fiz as devidas diminuições, agora ficou legal! Obrigada pelas dicas.
Excluirhttp://umpoucodetudojapao.blogspot.jp/
Oi Elaine,
ResponderExcluirMais 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
Elaine the best forever!!!
ResponderExcluirMatou a pau esse post. Massss vou pedir pra vc atualizar nas coisinhas que preciso.
Profissional das profissionais.
Bjo
Muito obrigada, seu post foi de muita ajuda ^^
ResponderExcluirAdorei, mas como eu faço para vincular meu face ao meu blog. Quando abri o face já tinha o blog.
ResponderExcluirTem como?
Beijo beijo beijo
Carolina, como assim, vincular?
ExcluirNão entendi a pergunta... :)
Estava atrás e achei rs, obrigada Elaine, deu certinho.
ResponderExcluirBjs
Oii... eu fiz tudo direitinho como vc explico
ResponderExcluirmas quando eu entro no blog nao aparece nada. Pq sera??
Elaine, eu já arrumei tudo.. Obrigado pelo tutorial!
ResponderExcluirOlá 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!
ResponderExcluirErick, não pode ser perfil, tem que ser fanpage.
ExcluirMUITO BOM o tutorial! Obrigada por compartilhar! Fiz e deu certinho!!!
ResponderExcluirhttp://www.lindaepratica.com.br/
gostaria muito de aprender...
ResponderExcluirObrigado, Consegui colocar em meu site!
ResponderExcluirhttp://www.hianimesonline.com/
a sua primeira opção não funcionou , não aparece nada. Só o titulo
ResponderExcluirna 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
Você nunca conseguirá pois o box de curtir só se aplica à fanpages, e o seu é um perfil...
ExcluirBoa 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
ExcluirFacebook 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.
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.
Excluirvalew Eleaine!!
ResponderExcluireu prefiro o primeiro codigo, pois carrega muito mais rápido!
[http://hdgamesdownload.blogspot.com/]
QUAL A diferença eleaine entre uma fanpage e uma de perfil ?
ResponderExcluirgrato
fernando
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
ResponderExcluirOk, 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?
ResponderExcluirO 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?
Eu ADOREI minha amiga me passou seu blog e eu consegui por, muito obrigada, beijos :*
ResponderExcluirValew! Eu sempre esqueço como que faz. Tenho pesquisar e dessa vez cheguei aqui ;)
ResponderExcluirpoxa tentei de tudo mais o meu nao deu certo.
ResponderExcluirElaine como sempre salvando minha vida <3 muuuito obrigado
ResponderExcluirwww.lorenaaraujo.com
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!
ResponderExcluirNossa! Muito obrigada mesmo! Me ajudou bastantee! Um beijo, que Deus te abençoe!
ResponderExcluirObrigaaaaaaaaaaaaada
ResponderExcluirMaravilhoso 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
ResponderExcluiroowwwwwwwwwww valeuuuuuuuuuuuuuuu
ResponderExcluirMuito 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!
ResponderExcluirOiie, Muitooo obrigada, me ajudou muito, foi a unica que conseguiu me explicar. Obrigada mesmo s2
ResponderExcluirOlá 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
ResponderExcluirGrande beijo e bom final de semana
Katia Ribeiro
www.katiaribeiro.com.br
Deu certo! Obrigado.
ResponderExcluirAmei seu blog...... muito obrigada por compartilhar tanta coisa boa.... beijinhos!!!!
ResponderExcluirVocê é a Maior!!!
ResponderExcluirMuito Obrigado,você foi a unica que conseguiu me ajuda. Passa no meu blog e da uma olhadinha.. http://patysdfg.blogspot.com.br/
ResponderExcluirMeninaaaaaaa, como você me ajudou!!!!
ResponderExcluirObrigada :D
Salvou minha vida!! :)
ResponderExcluirObrigada!
http://descomplicaporfavor.blogspot.com.br/
Nossa,muito obrigada!Vi vídeos e tais,precisava muitoo dessa caixinha!!
ResponderExcluirObrigadãão!
Ah,se der da uma passadinha lá :*
http://lehamorimblog.blogspot.com.br/
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
ResponderExcluirEu olhei seu blog e pra mim o box apareceu :)
ExcluirObrigado, muito fácil com seu tutorial, valeu mesmo, Seu blog é tudo de bom.
ResponderExcluirhttp://ler-romances.blogspot.com/
Excelente post.
ResponderExcluirMuito obrigado por compartilhar essas informações valiosas conosco.
Graça e paz.
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.
ResponderExcluirMuito obrigada.
http://realizatumesmo.blogspot.pt/
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!
ResponderExcluirBeeeijos!
http://eusuponho.blogspot.com.br/
Nao deu certo comigo :( Não sei o que fiz de errado!
ResponderExcluirAaaaaahhhhhh!!!!!!!!!!!!!!!!! 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! =)
ResponderExcluirBjks!
Hanna Carolina.
http://mundinhodahanna.blogspot.com.br/
Eu estava quase desistindo, mas vi esse tutorial e consegui! Obrigada. <3
ResponderExcluir"The reference to entity "version" must end with the ';' delimiter".
ResponderExcluirSe 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";
Muito obrigado, somente a primeira opção que voce colocou funcionou pois o Facebook Developers nao funcionou
ResponderExcluirObrigado. by Cuecagamesdown.blogspot.com.br
Salvou minha vida no antigo post não havia conseguido meu blog ficou show Cheirosa . Obrigada
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirMuito bom achar um local onde todas minhas duvidas sejam explicadas tão detalhadamente!!!! Obrigada!!!!
ResponderExcluirMuiiiito obrigada pelas dicas Elaine! Agora sim consegui deixar meu blog melhor!
ResponderExcluirMuito obrigadaaa. O único que deu certo, simples e fácil.
ResponderExcluirContinue 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!
Muito obrigado. Como disse a Scarleth, o único roteiro que funcionou. Namastê!
ResponderExcluirhttp://www.danporto.com
Muito bom adorei :) fácil e pratico.
ResponderExcluirMeninas de uma passadinha no meu blogger http://umageniosaousada.blogspot.com.br/
muito obrigada, seu post ajudou muito!!!
ResponderExcluirObrigadoo ♥
ResponderExcluirMuito bom Elaine. Ajudou bastante. Está na minha barra de favoritos.
ResponderExcluirNossa, 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.
ResponderExcluirVou lhe seguir! Vlw!
Me ajudou bastante!! Muito obrigada!!
ResponderExcluirElaine, muito obrigada! Deu super certo!
ResponderExcluirobrigado funcionou aqui
ResponderExcluirOi Elaine! Muito boas as tuas dicas! Estou com um probleminha... gerei o codigo do 'like' no FB, colei a linha desta forma:
ResponderExcluirjs.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 !!
Obrigado pela dica.....funcionou bem
ResponderExcluirhttp://brasil100hipocrisia.blogspot.com.br/
www.facebook.com/brasil100hipocrisia
Vlw
Obrigada, me ajudou muito.
ResponderExcluirOBRIGADAAAA ELAINE FAZIA TEMPO QUE TENTAVA E NENHUM DAVA CERTO BJSS ESTOU TE SEGUINDO :)
ResponderExcluirOie, nossa me ajudou muito! Estou começando, muito obrigada, beijos!
ResponderExcluirA primeira forma é exatamente a que eu estava procurando. Consegui até alterar a largura. Muito obrigada!
ResponderExcluirhttp://livroslapiseafins.blogspot.com.br/
Olá!
ResponderExcluirGraças a Deus encontrei seu post pra me dar uma ajudinha! ahaha
muito obrigada!
nossa que fácil kkk
ResponderExcluirhttp://crentetambemsediverte.blogspot.com.br/
Muito obrigada mais uma vez! Seus posts são sempre completos!
ResponderExcluirGrandes beijos.
Blog Jovens Mães
Muito obrigada Elaine, você me ajudou muito!
ResponderExcluirboa noite valeu gostei muito
ResponderExcluirwww.tavendooque.blogspot.com.br
Ajudou super. Obrigado. Confere meu blog pessoal :https://paulaguiimaraes.blogspot.com.br/ bjoss :)
ResponderExcluirobrigadaaaa !! ficou otimo <3
ResponderExcluirhttp://blogbycriscalu.blogspot.com.br/
Te amo pra toda Vida!!! Valeeeeu
ResponderExcluiroi boa noite da uma olhada no meu blog e ve o que acha aceito sugestoes pra melhora-lo obrigado https://menssagensevideosdowhatsapp1.blogspot.com.br/
ResponderExcluirAmei 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/
ResponderExcluirValeu!!
Elaine, consegui, obrigada !Deus lhe recompense!
ResponderExcluirNossa. Esse ´post me ajudou demais. obrigada1
ResponderExcluirRapaz, ce é professora ? Explicou melhor que mtos por ai. Até pq, comigo tem q ser assim, tudo mastigadinho, pq lerdeza aqui grita e berra !
ResponderExcluirAliá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 !
Nossa, me ajudou muito, deu super certo. Obrigada
ResponderExcluirGOSTEI DAS RECOMENDAÇÕES E ADOREI O VISU DO SEU BLOG.
ResponderExcluirBEM GOMO EU AINDA NÃO TENHO FACE, VOU EXPERIMENTAR AS DICAS DEPOIS, MAS MUITÍSSIMO OBRIGADA!
poesiaseraridades.blogspot.com
Muito valeu mesmo,eu estava apanhando para conseguir algo que voce resolveu rapidinho!! Sucesso tudo de bom!!
ResponderExcluirMuito obrigado pelo post acabei de economizar 30 reais hahaha
ResponderExcluirObrigada pelas dicas! Acabei de fazer a segunda opção e deu certo!
ResponderExcluirOlá, gostei muito do tutorial, ajudou muito. Obrigada.
ResponderExcluirFiz um blog recentemente, sou bem novata nisso, pois é meu primeiro blog, gostaria de uma opinião sobre ele. Se puder dar uma olhadinha agradeço.
Meu e-mail é Medodefalar19@hotmail.com
medodefalar19.blogspot.com.br
Muito obrigado vlw mmesmo!!!!
ResponderExcluirOlá, eu entrei no link que ela disponibilizou, mas, está bem diferente. Pode me explicar como devo fazer?
Excluirobrigadaa!!! ajudou muito!
ResponderExcluirObrigado!!!
ResponderExcluirQuero agradecer pelo brilhante trabalho e desde já convidá-los a conhecer meu blog de OPORTUNIDADE DE TRABALHO, vejam como está ficando! http://bit.ly/2lmtFnj
ResponderExcluirMuito, muito obrigada, ajudo pra caramba hahahaha...eu nunca conseguia colocar por conta dos tutoriais super difíceis que eu encontrava, porem o seu foi super simples mais bem explicadinho o que ajudo e facilito muito...obrigada de coração <3
ResponderExcluirhttps://maddiirusta.blogspot.com.br/
Sempre com ótimas dicas. Obrigada e sucesso!
ResponderExcluirAdoreiii...que show!
ResponderExcluirSempre quis colocar e nunca dei conta..
Achei a dica prática e simples...Utilizei a 1ª Opção...
Muito obrigado e sucessos..bjão
Me ajudou muito, obrigado.
ResponderExcluirhttp://acaneca-de-cafe.blogspot.com/
Gostei da sua explicação, bem simples e fácil. Deu certo para mim! :)
ResponderExcluirMuito obrigado. Ajudou muito.
ResponderExcluirMuito obrigada, acabei de criar um blog e sou leiga nesses assuntos, me ajudou muito!!!
ResponderExcluirNão tem a tag body no meu html o que faço?
ResponderExcluirOi Elaine, muito obrigada por compartilha, segui os passos deu super certo no meu blog, muito Obrigada , amei aqui :)
ResponderExcluirAG ♡
Amo suas dicas
ResponderExcluirAdoro suas dicas!!me ajudam muito!
ResponderExcluirOlá! Muito bom o seu blog e as dicas. Obrigada. Já curti e me inscrevi.
ResponderExcluir