quarta-feira, 25 de maio de 2011

Botão Compartilhar seus posts no Facebook

Você já aprendeu como Colocar Botão Retweet no Blog para que seus leitores compartilhem suas postagens no Twitter, já aprendeu também a colocar um Botão "Enviar postagem para o orkut, para que seus posts sejam divulgados no orkut.
Hoje você verá como instalar um botão para que seus posts sejam divulgados em outra rede social muito importante, o Facebook.
Para quem usa o Facebook já sabe que, além de você criar um perfil, também é possível criar um espaço para seu blog e divulgar seus links por lá.
Existem vários modelos de botões disponíveis, e possuem uma contagem que mostra a quantidade de vezes que alguém enviou seu link para lá(igual ao Retweet).
A instalação desse widget seguirá os mesmos procedimentos que utilizamos na instalação do botão para o Retweet:
1º - escolher o modelo do botão
2º - escolher o local mais adequado para instalar o botão.

1. Opções de botões:



Opção 1:Versão Completa (botão à esquerda do post)

Código:

<div style="float:left;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>


Opção 2: Versão compacta (botão à esquerda do post)

Código:

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>


DICA:
Caso você queira que seu botão fique à direita, basta substituir float:left por float:right, no codigo.

Instalando o Botão:

Agora que você já escolheu o botão que mais lhe agrada, vá em 'design ->Editar HTML' -> marque a caixinha 'Expandir modelo de Widgets' e procure pelo código abaixo:

<div class='post-header-line-1'/>
e cole o código referente ao botão que você escolheu logo ABAIXO deste trecho.

Observação: Dependendo de seu modelo de template, a linha acima pode estar da seguinte maneira: <div class='post-header-line-1'>.


Ou se preferir, veja neste post outras opções de local mais adequado para colar o código.


Fonte:Blogger Plugins

0 comentários:

Postar um comentário