domingo, 2 de octubre de 2011

Botones para Compartir de Facebook

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:




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






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:



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.

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.


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.

0 comentarios:

Publicar un comentario