Como colocar o botão do Facebook no Blogger

Como colocar o botão do Facebook no Blogger

6 10 99
Como colocar o botão do Facebook no Blogger 10 6 99
Com a popularização de aplicativos como o Farmiville e outros jogos online, o Facebook obteve um crescimento explosivo no Brasil. Ficar de fora do Facebook é perder a oportunidade de receber milhares de visitas no seu blog ou site. Vou iniciar uma série de artigos ensinando como integrar um blog ao Facebook, e o primeiro é como colocar um botão do Facebook no Blogger:
A vantagem de utilizar o botão "Gosto" (ou "Like", em inglês e "Curtir", em português de Portugal) é que sempre que alguém clica no botão será feita uma atualização do status no mural do perfil no Facebook com o link do post em questão. Os amigos deste perfil também irão receber esta atualização. Para colocar este botão, tal como o botão do Twitter, não é necessário ter conta no Facebook.

Integrando o botão do Facebook no Blogger:
O botão "Gosto" pode ser inserido em qualquer parte. Recomendo que seja colocado no final do post, é o local onde o leitor irá realizar a próxima ação após a leitura, mas isto não é uma regra. Antes de fazer esta alteração, faça um backup completo do template do blog.

Entre no painel do Blogger, clique em design e, depois, em editar HTML. Marque a caixa expandir modelos de widgets e procure por:
<data:post.body/>
Copie e cole logo abaixo do código anterior:
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
Se deseja que o botão do Facebook apareça na parte superior do post, ao lado do título, coloque o código logo abaixo desta linha:
<div class='post-header-line-1'/>
Otimizar o botão do Facebook:
Para que o botão não apareça na página inicial, somente nos posts, deve inserir o código em verde:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>
Para que apareça as fotos dos utilizadores que gostaram, deve alterar o false para true, e o tamanho do widget de 40px para 80px:
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px;'/>
Outra coisa que pode ser feita é alteração de "Gosto" para "Recomendar", bastando para isto alterar o like (em vermelho, no código acima), por recommend.

A fonte das letras também pode ser alterada, por default vem em Arial, mas é possível utilizar outras fontes.

Salve e veja se ficou tudo correto.

Gostou? Seja fã do Dicas Blogger no Facebook!
50 Comments
Comments
  1. Bom dia, Juliana!
    Eu já tinha o botão, mas ele só aparecia depois que a pessoa entrava no post e eu queria justamente q ele aparecesse sempre, obrigada!

    Só que com a 'novidade', meu Tweet Button endoidou e fica mostrando 35 retweets pra todos os posts, a menos que a pessoa clique no título ou no 'leia mais', daí sim ele mostra o número real...

    Como posso mudar isto?

    Obrigada!

    ResponderExcluir
  2. Muito legal esta dica.
    Assim que puder colocarei no meu blog.
    Agradecida.
    Bom dia.

    ResponderExcluir
  3. Em primeiro lugar parabens pelas dicas, elas ajudam bastante, muito boas msm!

    Agora deixa eu te pergunta, vcs poderiam me ajudar, pois coloquei o cadigo no meu blog mas aparece uma mensagem de "erro" em vermelho logo apos a frase "X pessoas gostam disso".

    Quando clico no erro fala que e impossivel mostrar a pagina pois ela recebeu denuncias de abuso =/

    essas denuncias em questão e referente ao meu blog ou nda a ver? ou oe outra coisa?

    se vcs puderem me ajudar agradeço muito
    Obrigado

    ResponderExcluir
  4. Como faço para colocar essa caixa cinza nos meus códigos Juliana já procurei em todo lugar e não acho me ajuda por favorrrrrrrrrrrr

    ResponderExcluir
  5. Ana Corina, eu coloquei uma tabela com os dois botões, o do Facebook e o do Twitter, funcionou perfeitamente (netdentista.com). Se você não conseguir eu coloco aqui para você tentar colocar igual.

    Ton, qual é a URL do teu blog?

    Abs

    ResponderExcluir
  6. Rafaela, vc só esqueceu de procurar no Dicas Blogger :)
    http://www.dicasblogger.com.br/2010/07/modelos-de-blockquotes-citacao.html

    ResponderExcluir
  7. Ton, os subdominio criados no co.cc são considerados Spam pelo Facebook, os códigos e widgets relacionados com este domínio não funcionam (o Google também considera estes domínios abusivos, raramente indexa um subdominio no co.cc, pondere adquirir domínio próprio, será muito mais vantajoso para o blog).

    Abs

    ResponderExcluir
  8. achei legal o botão... mas vou comentar outra coisa, sempre que venho no seu blog penso preciso aprender com a juliana como usar o twitter rsrs (quase 7 mil seguidores), mas confesso que no twitter não faço por merecer rsrs.

    ResponderExcluir
  9. Olá Fabiano,

    Na verdade já era pra ser uns 9.000 rsss
    Lembra quando sequestraram meu domínio? Exclui cerca de 1800 seguidores.
    O segredo? Vou te contar por email ;)
    Abração

    ResponderExcluir
  10. Não achei a marca data post no meu template, existe alguns que não têm isso?

    Abraços!

    ResponderExcluir
  11. Juliana, tudo bem?

    Coloquei no meu blog, mas quero fazer uma pergunta. O texto pode ser alterado?

    Um abraço.

    ResponderExcluir
  12. Nanda, você marcou "Expandir Widgets"?

    Maria Lucia, o texto pode ser alterado somente para "Recomendar", como foi explicado no post.

    ResponderExcluir
  13. JV - Eu cliquei sim.Esta marca é encontrada no começo, meio ou fim do HTML?

    ResponderExcluir
  14. JV - Eu achei a marca e já coloquei o botão, obrigada!

    ResponderExcluir
  15. Achei esse botão muito útil! Já coloquei no meu blog!

    ResponderExcluir
  16. Esse botão é muito legal! Ótima dica, o meu anterior era SHARE, agora melhorou, pois é Gosto! Parabéns Juliana, ótimo artigo!
    O facebook tá crescendo! ;)

    ResponderExcluir
  17. Essa dica foi show!! Adorei, já coloquei nos meus Blogs! Vlw msm!!! ;)

    ResponderExcluir
  18. Ótima dica! Até eu que sou iniciante consegui fazer!
    Já adicionei no meu blog.

    ResponderExcluir
  19. Muito boa sua dica. Me ajudou muito!!

    queria saber, como faço para alterar a cor da fonte?

    ResponderExcluir
  20. O meu contador (balãozinho com o número) do botão curtir tá cortado que nem o seu aí em cima.
    Vc sabe se tem como acertar isso? xx

    ResponderExcluir
  21. Olá, não estou conseguindo que funcione... segui as regras, mas realmente a coisa não aparece no meu blog... http://tetelog.blogspot.com/
    Tenho que esperar algum tempo ou funciona na hora?
    Obrigado

    ResponderExcluir
  22. Me desculpa, não sei se cheguei a enviar um recado antes desse... deu um bug aqui no envio, só agora que vi.
    Enfim, não consigo fazer funcionar... segui as instruções mas o botão nem sequer aparece... alguém poderia me ajudar?
    Meu blog é o: http://tetelog.blogspot.com/
    Forte abraço!

    ResponderExcluir
  23. Opa, sou eu de novo (sorry).
    Na verdade funcionou, mas em parte. Dentro do blog não aparece o botão. A não ser que você acesse o blog via Facebook pelo Networkblogs. Alguém pode me dizer como resolvo isso?
    Obrigado!

    ResponderExcluir
  24. Quanto a marca data post, eu consegui achar quando digitei letra por letra na caixa de busca.

    Foi uma descoberta sem querer, não sei se funciona para todos, mas comigo funcionou.

    Abraços!

    ResponderExcluir
  25. Estou montando meu blog, vou aproveitar todas as dicas! Gracias!

    ResponderExcluir
  26. Olá, não consigo localizar o data post, já tentei várias vezes.
    obrigado

    ResponderExcluir
  27. consegui adicionar o botão fshare, mas ele fica bem isolado, no canto direito de minha publicação.
    como fazer para mudá-lo de lugar?
    E ainda quando clico nele nada acontece, é normal,por eu ser o proprietario do blog?
    Outra coisa, o botão só aparece em posts individuais, quando abro o blog por inteiro, ele não aparece.
    obrigado e desculpe-me o excesso de palavras....

    ResponderExcluir
  28. Muito boa a dica, uma pergunta como fazer para deixar ambos lado a lado, botão twitter e facebook?

    Já esgotei meus conhecimentos de webdesigner, vontade de rasgar meu diploma rssss

    Já tentei display inline e nada é unica forma que funcionou com display inline foi aplicando direto no post-fooster

    post-footer style='display:inline;'>

    Mas ai os botões ficaram desalinhados e um pouco acimas do post-footer, além de aparecer os um pedaçinho dos artigos relacionados.

    Abs e grato desde já pela ajuda.

    ResponderExcluir
  29. Muito bom, funcionou corretamente! Obrigado!!

    ResponderExcluir
  30. O Botão funcionou perfeitamente. Obrigado! Mas tenho uma pergunta: Gostaria que, ao invés de aparecer "Seja o primeiro de seus amigos a curtir isso." ou "5 pessoas curtiram isso, seja o primeiro entre seus amigos.", aparece apenas o número! Igual aparece no Dicas Blogger. É possivel?

    ResponderExcluir
  31. Prezados,

    Primeiro parabéns pelo Blog, uma excelente fonte de referência.

    Resolvi colocar o código acima no meu Blog (www.NegociaAcao.blogspot.com), mas o botão "Curtir" só aparece quando mando vizualizar o que estou escrevendo. Quando publico o post ele não mais aparece.

    Vocês tem idéia o que pode estar acontecendo?

    Obrigado pela ajuda,

    ResponderExcluir
  32. Muito obrigado!!!Ficou ótimo!
    Curti muuuito...
    Abs
    Carla

    ResponderExcluir
  33. obrigadaa!! abri varios tutoriais e só este funcionou, porém coloquei o "curti" no final do post! thanks

    ResponderExcluir
  34. JV, muito bom, mas nao consegui descobrir quais pessoas LIKEaram o meu post. To ajudando uma amiga, se quiser ver o blog dela... www.bossaclube.com.br abraco!!

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top