domingo, 8 de maio de 2011

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 paratrue, 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. 
Assine o feed deste blog ou receba todos os artigos por email.

6 Comentários:

Vivaraizes disse...

tenha q lhe agradecer, pela sua bondade e capricho..boa sorte ! Guerreiro ;)

Crazy Meme's disse...

bom dia, o que tenho de alterar no codigo para que o gosto apareça no facebook que eu quero?

Mimus da Mônica disse...

Muito bom a explicação, consegui fazer perfeitamente.Muito útil...
Obrigada

Ivana disse...

muito bom! Vc me ajudou muito!Te desejo muita sorte e muitos seguidores!rsrsrs!

WindowsDowloand disse...

Pesso que entrem nesse e veja se esta bom http://comandotutoriais.blogspot.com.br/

Spertnez disse...

Estava tentando fazer isso com vários outros tutoriais e não encontrava o código certo.

Sua dica foi perfeita!
Obrigado e parabens.

Postar um comentário

  ©Roox Blogger - Todos os direitos reservados.

Template by Equipe Thauros | Topo