Adicionando botão Like ao seu blog

Este post é mais um da série "Site aos Pedaços" mostrando mais um "gadeject" que você pode "pendurilhar" no seu blog ou site.

Faz parte da política de boa vizinhança citar a fonte. No caso minhas fontes foram o Blog Mamanunes e o Vagabundia mas acredito que a própria documentação das api's do facebook deve ser bem rica em dicas desse tipo.

Primeiro de tudo você deve saber que a edição do template do seu blog se dá em XML e não em HTML. Isso quer dizer que certos caracteres especiais devem ser substituidos por HTML entities para que funcione. Além disso algumas expressões vistas aqui serão comandos próprios do XML do blogger, que ele interpreta e substitui a sua maneira. Por isso é diferente colocar o  botão like no Blogspot e colocar no Wordpress ou mesmo no HTML puro.

Para HTML puro o código deveria ser esse:

(...)
<iframe src="http://www.facebook.com/plugins/like.php?href=http://vitorrubio.blogspot.com/2010/08/busca-de-cep-com-o-lazarus-parte-1.html&layout=button_count&show_faces=false&width=450&height=60&action=like&font=tahoma&colorscheme=dark" allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'/>
(...)

Com o seguinte resultado:



Agora para funcionar no blogger, devemos primeiro encontrar onde publicar. Clique em design e edição do HTML no seu blog e no código procure pela linha:

<div class="post-footer-line post-footer-line-1">

Abaixo dessa linha você já pode colar  o código acima com algumas modificações:
1) Na URL você deverá colocar data:post.url. Este é um comando que diz ao Blogger para usar a url para o post correspondente.
2) Substituir caracteres especiais por Entities, por exemplo substituir < por < e > por >
3) Como o atributo src será validado e concatenado pelo blog, sendo uma "expressão" a ser "calculada" via programação, todo  o atributo src deve ser precedido de expr:

O comando ficará assim:

(...)
<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=dark&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'/>
(...)

Pronto! Agora você pode "pendurilhar" mais essa ferramenta para integração com mídias sociais.

Have Fun ;)