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.
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>
<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>
<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>
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>
![]() | ERRO!!! Por: roullien | 30/7/12 |
![]() | Não funciona no IE Por: chocomix | 14/8/12 |
![]() | Tenho um portal de noticias, mais nao consigo fazer funcionar o link de compartilhar no facebook Por: alissomoreno | 06/9/13 |