Adicionar botão "Curtir" (Like) do FaceBook nos artigos do Blog – Blogger e Wordpress

Integrar seu blog e compartilhar informações na redes-sociais é de extrema importância para divulgar o conteúdo de seu blog e atrair mais visitas. As redes-sociais geram visitas consistentes, pois nascem da indicação de outras pessoas, o que aumenta suas chances de conversão. O FaceBook disponibilizou o botão "Curtir" para ser adicionado junto ao seu blog. Veja como integrar isso.

 

Já ensinei aqui algumas opções de botões e links para compartilhar seus artigos nas diversas redes-sociais e recomendo que você dê uma olhada nisso também, inclusive o botão "Compartilhar" do FaceBook:

• Botão para compartilhar links no FaceBook para Blogger
• Topsy Twitter - Botão de Retweet para artigos de seu Blog (Twitter)
• Compartilhar no Google Buzz padrão do Blogger Blogspot

 

Como adicionar botão "Curtir" do Facebook

A novidade veio na página de desenvolvedores do Facebook e você pode acessar direto no link:

• Facebook Developers - Social plugins: Like Button

 

Aparece automaticamente em português identificando a língua do navegador.

 

Ao adicionar em seu blog o efeito é bem simples: o visitante pode marcar que gostou de seu conteúdo que aparecerá na lista dele no mural do Facebook indicando que ele gostou; exatamente como na própria página do serviço, como um voto. E aparecerá no seu blog como esse ícone seguido do número de "votos", como ilustrado na imagem do início desse artigo.

 

Funciona tanto no Blogger (Blogspot) quanto no Wordpress.org (para quem tem hospedagem e domínio próprio), e é bem simples de adicionar. Vou mostrar o modelo básico – como da figura – que ocupa pouco espaço. se quiser outros modelos veja na página deles, citada acima.

 

1. Para o Blogger (Blogspot)

Abra o painel e clique no menu "Layout" ~> "Editar HTML", marcando a caixa "Expandir modelos de widgets". Então procure pela seguinte linha:

 

<div class='post-body entry-content'>

 

Imediatamente ACIMA, cole o seguinte trecho, sem modificar nada:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style='display: inline; float: right; margin-left: 5px'>

 

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

 

</p>
</b:if>

 

Salve o modelo e tudo já estará funcionando. Aparecerá o botão alinhado à direita do primeiro parágrafo de todos os seus posts, ocupando o mínimo de espaço, somente na página do artigo individualmente.

 

2. Para o Wordpress.org

Mas se você tem um blog no Wordpress.org (com hospedagem e domínio), o código é um pouco diferente.

Entre no painel, clique no menu "Aparência" ~> "Editor" e abra o arquivo do tema "Post único (single.php)". Procure pela linha que indica o início do texto e cole o seguinte trecho:

 

<div style="float: right; margin-left: 10px;">

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:80px; height:20px"></iframe>

</div>

 

Salve e já estará funcionando em todos os posts de seu blog. Aparecerá alinhado à direita do primeiro parágrafo de cada página.

 

Observações sobre algumas mudanças:

• Fiz alguma modificações no código original dado na página padrão de Desenvolvedores do Facebook para que funcionasse sem erros no Blogger e no Wordpress e para que o código identificasse a URL de cada página onde está inserido.
• Também mexi nas medidas de altura a largura do espaço ocupado pelo ícone e o contador. No original há uma largura de 460px e 600px de altura, que atrapalhava uma boa integração. Mudei aqui para apenas 80x20.

 

Outras boas opções de compartilhamento:

• Widgets do Facebook - como inserir em seu blog
• Add This! Compartilhar seu blog em todos os lugares
• Como criar menu com ícone de Redes Sociais e outras opções
• Como usar o Twitter de forma eficiente integrado ao Blog