Botón de compartir en Facebook

En este artículo vamos a mostrar varias maneras de crear el típico botón de compartir un enlace en tu cuenta Facebook, con el que los visitantes de tu página web pueden enviar tus contenidos a sus perfiles dentro de esta red social y así promocionar tus contenidos.

Existen varias maneras de conseguir esto y la más sencilla sería utilizar los scripts que Facebook ofrece para crear estos botones casi de manera instantánea. Sin embargo, algunos desarrolladores preferirán personalizar estos botones, por medio de imágenes o iconos propios y provocar comportamientos distintos al habitual al pulsar el botón para enviar a Facebook.

Básicamente, para enviar un contenido a Facebook tenemos que generar un enlace a una dirección del sitio de Facebook, enviando la URL que queremos compartir. Esa URL tendrá esta forma simplificada:

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

Si accedemos a esa URL con nuestro navegador veremos la página de Facebook para compartir ese enlace y publicarlo en el muro de nuestro usuario. Si tu navegador guarda la sesión de Facebook (es decir, si solicitaste a Facebook que recordase tu usuario cuando accedes a la red social) aparecerá directamente la página para compartir. En caso contrario verás una página para introducir tus datos de acceso (login) de tu usuario.

Facebook se encarga solito de recuperar el título del artículo o página a compartir, así como las imágenes asociadas, etc. Por lo que, en principio no hace falta indicar nada más para que esto funcione.

Una vez ya conocemos este comportamiento básico, veamos algunas maneras sencillas que podemos implementar en nuestro sitio web.

1.- Utilizar un botón/script de Facebook

Facebook tiene una cosa que le llaman el "Share Button", que crea este botón por su propia cuenta al insertar un enlace y un script en tu página web. Esta manera de actuar es interesante, pues estos botones son bastante "inteligentes" y proveen de un contador de personas que enviaron tu enlace a la red social, aparte de la propia funcionalidad de compartir. Además, el servicio se puede configurar para que muestre distintos tipos de botones, que podemos elegir en función del aspecto que tenga nuestra página.

Es quizás la manera más adecuada de colocar el botón, pero tiene el inconveniente de no permitir personalizar la imagen o botón que se va a utilizar (o por lo menos en el momento de escribir este artículo no existe esta opción). Por ello, si queremos utilizar un botón con aspecto personalizado, tendremos que buscar otra solución.

Todas las instrucciones para conseguir implementar este botón en tu web están en la Wiki de desarrolladores de Facebook, en la página que trata sobre Facebook Share.

El código HTML para insertar un botón de los que provee Facebook tendrá esta forma:

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

Además, podemos seleccionar el tipo de botón a utilizar entre varias posibilidades, con el atributo "type" en el enlace.

<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>

El atributo del enlace "share_url" es opcional y sirve para indicar la URL que queremos que se comparta. Pero si no indicamos nada en ese atributo se enviará a Facebook la URL de la página donde se ha colocado el botón.

Además, si queremos que dentro del botón esté escrito un mensaje personalizado, podemos poner texto en el enlace, algo así como:

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

2.- Enlace simple de enviar a Facebook

Otra variante que podemos implementar, si es que deseamos personalizar el botón de enviar a Facebook es crear un enlace normal, dirigido a la URL para compartir en Facebook.

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

En este caso se crearía un enlace y en el texto aparecería "Compartir FB", y claro, si queremos utilizar nuestro propio icono en vez de ese texto, dentro pondríamos la imagen que deseamos.

<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.- Enlace que se abra en un popop

Este código se podría alterar un poco para que este enlace se abra en una ventana secundaria o popup. Para ello tenemos que utilizar un poco de Javascript por nuestra cuenta.

<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');">Compartir con popup</a>

Consideraciones adicionales al crear el botón para compartir en Facebook

Comento un par de detalles que son importantes y que podremos experimentar a la hora de hacer estos enlaces para compartir contenidos en Facebook.

Indicar también el título del recurso:
Una cosa que he visto hacer en varios sitios es el envío de una cadena como titular de lo que se va a compartir. En el enlace para enviar un contenido a Facebook podemos indicar, además de la URL a compartir, el título que queremos se asigne a esta entrada dentro del muro de nuestro usuario. Esto lo señalamos enviando un parámetro adicional al crear la URL para enviar un enlace.

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

Ahora bien, según parece, Facebook recibe el título, pero luego al interpretar la página enviada lo cambia por el título real que tenga, con lo que parece que este contenido no sirve de mucho. Quizás sirva para algo en el caso que la página no tenga título o Facebook no lo pueda interpretar.

Convertir los datos a formato URL:
La otra cosa que quería comentar es la posibilidad de enviar los datos en la URL codificados en formato de URL. Este detalle en principio no es necesario en la mayoría de los casos, puesto que los navegadores ya hacen ese trabajo de manera transparente para los usuarios, pero sí sería recomendable.

Por ejemplo, este enlace tiene la URL a compartir codificada en el formato que, en principio, sería el adecuado:

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

Ya digo que, si esto nos suena a chino, podemos olvidarnos de ello y en la gran mayoría de los casos, (al menos en todos los navegadores actuales) no habrá problemas.

Si queremos convertir una cadena a formato URL podemos utilizar un lenguaje de programación como PHP, con la función urlencode():

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

O incluso Javascript:

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

Si además estas interesado en crearte un botón similar para Twitter te recomiendo que te leas el artículo "Botón de compartir en Twitter".