Botão de compartilhamento no Facebook

Veremos várias maneiras de criar um botão de compartilhamento de um link no Facebook ou enviar um artigo para o Facebook.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 05/8/10
Valorize este artigo:
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>





Comentários do artigo
Foram enviados 8 comentários ao artigo
5 comentários não revisados
3 comentários revisados:
ERRO!!!
Por: roullien
30/7/12
Criei tudo como o tutorial manda, estou conseguindo abrir a popoup para compartilhar, porem dah o seguinte erro:

"Desculpe, você não pode publicar isso porque possui um link bloqueado.
O conteúdo que você está tentando compartilhar inclui um link que foi bloqueado por ser considerado spam ou inseguro:

http://wodfit.web44.net/favicon.ico

Para obter mais informações, visite a Central de ajuda. Se você acha que está vendo essa mensagem por engano, informe-nos."

O QUE EU FACOOOOO??? kkkk
Não funciona no IE
Por: chocomix
14/8/12
Olá... esse script funciona perfeitamente no chrome e no firefox, porém não funciona no IE. O que faço?
Tenho um portal de noticias, mais nao consigo fazer funcionar o link de compartilhar no facebook
Por: alissomoreno
06/9/13
Olá amigo, desenvolvi um portal de noticias.
E tenho um probleminha.

Não consigo fazer funcionar o link de compartilhar.

minha url está da seguinte forma:

http://www.matheusramos.com.br/noticias.php?id=60&s=titulo-da-minha-postagem

Por favor alguma solução?

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato