quarta-feira, 29 de setembro de 2010

Como colocar o botão do Facebook no Blogger

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 comentários:

  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. JV, a Url e essa: http://www.wcombr.co.cc/

    ResponderExcluir
  8. 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
  9. JV, obrigado pelo esclarecimento!!!

    Abraço

    ResponderExcluir
  10. 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
  11. obrigada juliana como me ajuda sempre

    ResponderExcluir
  12. 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
  13. Não achei a marca data post no meu template, existe alguns que não têm isso?

    Abraços!

    ResponderExcluir
  14. Juliana, tudo bem?

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

    Um abraço.

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

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

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

    ResponderExcluir
  17. Adorei! Valeu por mais essa dica!

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

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

    ResponderExcluir
  20. 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
  21. Essa dica foi show!! Adorei, já coloquei nos meus Blogs! Vlw msm!!! ;)

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

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

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

    ResponderExcluir
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. Estou montando meu blog, vou aproveitar todas as dicas! Gracias!

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

    ResponderExcluir
  31. 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
  32. 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
  33. Muito bom, funcionou corretamente! Obrigado!!

    ResponderExcluir
  34. 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
  35. 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
  36. Muito obrigado!!!Ficou ótimo!
    Curti muuuito...
    Abs
    Carla

    ResponderExcluir
  37. Eba!!! Consegui. Muito obrigada galera!

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

    ResponderExcluir
  39. 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