Botão de compartilhamento no Facebook
Autor: Ozivaldo S | Publicado: 2012-05-10T14:35:00-07:00

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:

&lt; a name="fb_share"&gt;&lt;/a&gt; &lt; script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"&gt;&lt;/script&gt; 

Além disso, podemos selecionar o tipo de botão a utilizar entre várias possibilidades, com o atributo 
"type" no link.
&lt; a name="fb_share" type="box_count" share_url="YOUR_URL"&gt;&lt;/a&gt; &lt; a name="fb_share" type="button_count" share_url="YOUR_URL"&gt;&lt;/a&gt; &lt; a name="fb_share" type="button" share_url="YOUR_URL"&gt;&lt;/a&gt; &lt; a name="fb_share" type="icon_link" share_url="YOUR_URL"&gt;Share&lt;/a&gt; &lt; a name="fb_share" type="icon" share_url="YOUR_URL"&gt;&lt;/a&gt; 

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:
&lt; a name="fb_share" type="button_count"&gt;Compartilhar em FB&lt;/a&gt; &lt; script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"&gt;&lt;/script&gt; 


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.

&lt; a target="_blank" href="http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/"&gt;Compartilhar FB&lt;/a&gt;

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.

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


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.

&lt; 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');"&gt;Compartilhar com popup&lt;/a&gt;


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/&amp;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():

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

Ou inclusive Javascript:
&lt; script&gt;document.write('&lt;a target="_blank" href="http://www.facebook.com/sharer.php?u=' + encodeURIComponent('http://www.desarrolloweb.com/php') + '"&gt;Compartilhar em Facebook&lt;/a&gt;');&lt; /script&gt;