Neste artigo vamos mostrar várias maneiras de criar o típico botão de compartilhamento de um link em sua conta Facebook, com o qual os visitantes de sua página web podem enviar seus conteúdos a seus perfis dentro desta rede social e assim promover seus conteúdos.

Existem várias maneiras de realizar isto e a mais simples seria utilizar os scripts que Facebook oferece para criar estes botões quase de maneira instantânea. No entanto, alguns desenvolvedores preferirão personalizar estes botões, por meio de imagens ou ícones próprios e provocar comportamentos distintos dos habituais ao apertar o botão para enviar para o Facebook.

Basicamente, para enviar um conteúdo para o Facebook temos que gerar um link a um endereço do site de Facebook, enviando a URL que queremos compartilhar. Essa URL terá esta forma simplificada:

http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/manuales

Se acessamos essa URL com nosso navegador veremos a página do Facebook para compartilhar esse link e publicá-lo no mural de nosso usuário. Se seu navegador guarda a sessão de Facebook (ou seja, se você solicitou ao Facebook que lembrasse seu usuário quando você acessa a rede social) aparecerá diretamente a página para compartilhar. Caso contrário, você verá uma página para introduzir os dados de acesso (login) do usuário.

O Facebook se encarrega sozinho de recuperar o título do artigo ou página a compartilhar, assim como as imagens associadas, etc. Razão pela qual, em principio, não é preciso indicar nada mais para que isto funcione.

Uma vez que já conhecemos este comportamento básico, vejamos algumas maneiras simples que podemos implementar em nosso site web.

1.- Utilizar um botão/script de Facebook

O Facebook possui uma coisa chamada "Share Button", que cria este botão por conta própria ao se introduzir um link e um script em sua página web. Esta maneira de atuar é interessante, pois estes botões são bastante "inteligentes" e dotados de um contador das pessoas que enviaram seu link à rede social, à parte da própria funcionalidade de compartilhamento. Além disso, o serviço pode ser configurado para que mostre distintos tipos de botões, que podemos escolher em função do aspecto que tenha nossa página.

Essa é, talvez, a maneira mais adequada de colocar o botão, mas tem o inconveniente de não permitir personalizar a imagem ou o botão que se vai utilizar (ou pelo menos à hora de escrever este artigo não existia esta opção). Por isso, se queremos utilizar um botão com aspecto personalizado, teremos que buscar outra solução.

Todas as instruções s para conseguir implementar este botão na sua web estão na Wiki de desenvolvedores de Facebook, na página que trata do Facebook Share.

O código HTML para introduzir um botão dos que é dotado Facebook terá esta forma:

<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Além disso, podemos selecionar o tipo de botão a utilizar entre várias possibilidades, com o atributo "type" no link.

<a name="fb_share" type="box_count" share_url="YOUR_URL"></a>
<a name="fb_share" type="button_count" share_url="YOUR_URL"></a>
<a name="fb_share" type="button" share_url="YOUR_URL"></a>
<a name="fb_share" type="icon_link" share_url="YOUR_URL">Share</a>
<a name="fb_share" type="icon" share_url="YOUR_URL"></a>

O atributo do link "share_url" é opcional e serve para indicar a URL que queremos que seja compartilhada. Porém, se não indicamos nada nesse atributo será enviada para o Facebook a URL da página onde se colocou o botão.

Além disso, se queremos que dentro do botão se escreva uma mensagem personalizada, podemos colocar texto no link, algo assim como:

<a name="fb_share" type="button_count">Compartilhar em FB</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

2.- Link simples de enviar ao Facebook

Outra variante que podemos implementar, caso desejemos personalizar o botão de enviar ao Facebook, é criar um link normal, dirigido à URL para compartilhar no Facebook.

<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/">Compartilhar FB</a>

Neste caso se criaria um link e no texto apareceria "Compartilhar FB", e claro, se queremos utilizar nosso próprio ícone, ao invés desse texto, dentro poríamos a imagem que desejamos.

<a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/articulos/1.php"><img src="mi_imagen.gif" border=0 width=100 height=30 /></a>

3.- Link que se abra em um popup

Este código se poderia alterar um pouco para que este link se abra em uma janela secundária ou pop up. Para isso temos que utilizar um pouco de Javascript por nossa conta.

<a href="javascript: void(0);" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.guiarte.com/','ventanacompartir', 'toolbar=0, status=0, width=650, height=450');">Compartilhar com popup</a>

Considerações adicionais ao criar o botão para compartilhar em Facebook

Comento alguns detalhes que são importantes e que poderemos experimentar à hora de fazer estes links para compartilhar conteúdos no Facebook.

Indicar também o título do recurso:
Uma coisa que vi ser feito em vários sites é o envio de uma cadeia como titulo do que vai ser compartilhado. No link para enviar um conteúdo para Facebook podemos indicar, além da URL a compartilhar, o título com que queremos que se designe esta entrada dentro do mural de nosso usuário. Isto é indicado enviando um parâmetro adicional ao criar a URL para mandar um link.

http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/&t=sitio%20interesante%20para%20desarrolladores

Bem, ao que parece, Facebook recebe o título, mas depois, ao interpretar a página enviada, o troca pelo título real que tenha, dando a entender que este conteúdo não serve para muito. Talvez sirva para algo no caso da página não ter título ou se o Facebook não puder interpretá-lo.

Converter os dados em formato URL:
A outra coisa que queria comentar é a possibilidade de enviar os dados na URL codificados em formato de URL. Este detalhe em principio não é necessário na maioria dos casos, uma vez que os navegadores já fazem esse trabalho de maneira transparente para os usuários, contudo seria recomendável.

Por exemplo, este link tem a URL a compartilhar codificada no formato que, em principio, seria o adequado:

http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.desarrolloweb.com%2Fmanuales

Digo que, se isto nos parecer muito complicado, podemos esquecê-lo e na grande maioria dos casos, (ao menos em todos os navegadores atuais) não haverá problemas.

Se queremos converter uma cadeia em formato URL podemos utilizar uma linguagem de programação como PHP, com a função urlencode():

<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode('http://www.desarrolloweb.com/manuales')?>">Compartilhar isto</a>

Ou inclusive Javascript:

<script>
document.write('<a target="_blank" href="http://www.facebook.com/sharer.php?u=' + encodeURIComponent('http://www.desarrolloweb.com/php') + '">Compartilhar em Facebook</a>');
</script>