Botão para compartilhar links no FaceBook para Blogger

Para quem usa o Facebook já viu que é possível criar um espaço para seu blog e divulgar seus links lá, bem como em seu perfil de compartilhar isso com dezenas e até centenas de outros usuários. Isso se torna um potencial local de divulgação do seu blog, e as redes-sociais são muito poderosas em difundir informações, gerando mais visitas para seu blog. Veja como adicionar um botão contados de links compartilhados no Facebook para os artigos de seu blog.


Como adicionar o botão de compartilhar do Facebook.

Vou mostrar como adicionar o código do botão em seu blog, mas o local para isso você vai ter que escolher por si. Claro que o ideal é logo abaixo do título para ficar visível, mas ao final do artigo também é uma boa escolha, pois quando alguém acabar de ler já clica para compartilhar.

Adicione o seguinte código em qualquer parte de seu blog, preferencialmente para aparecer abaixo do título do artigo, junto ao corpo do texto:

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>


Esse é o modelo de caixa com contador de cliques. Os números só aparecem depois que alguém clicar uma primeira vez. Quando é adicionado e ninguém clica, fica apenas o botão mais fino da base.
Não tem como trocar a palavra “Share” (compartilhar) em inglês. Isso é padrão.

Exemplo de uso e onde incorporar ao seu layout.

Você pode adicionar imediatamente abaixo do título de seu artigo, alinha ao primeiro parágrafo do lado direito do texto, como se ficasse incorporado ao artigo, chamando bem a atenção de quem lê. Ficaria como coloquei a imagem alinhada à este parágrafo. É uma boa estratégia e muita gente usa dessa forma. Para isso vamos adicionar uma condicional ao código e colocar ele dentro do código-fonte de seu layout.

1. Abra o painel do Blogger, clique no menu “Layout” ~> “Editar HTML” e marque o “Expandir modelos de widgets” para visualizar todo o código-fonte. Então procure pela seguinte linha:

<div class='post-header-line-1'/>

2. Imediatamente ABAIXO disso cole o trecho, sem modificar nada:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>
</b:if>


3. Salve o modelo e veja o resultado.

Obs:

Para que você posso alinhar o botão do lado esquerdo do primeiro parágrafo, basta você mudar a palavra “right”, em vermelho no código, para “left”.
Se você quiser outras opções de formatos do botão e saber mais detalhes sobre esse serviço do FaceBook e como customizar ainda mais, veja a ajuda oficial:
Previous
Next Post »