Botón de compartir en Facebook

  • Por
Veremos varias maneras de crear un botón de compartir un enlace en Facebook o enviar un artículo a 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>

Referencia: El botón me gusta de Facebook es otra buena solución para añadir a tu artículo un toque social basado en las herramientas de Facebook. Si has encontrado algún problema con ese botón consulta el artículo Problema y solución sobre el Me Gusta de Facebook.

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

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

jolie

15/5/2010
perfecto gracias!
mil gracias , estaba haciendo lo de facebook/sharer.php?u=
y nose porque no se agregaba bien salian errores o no se ponia el titulo que era, pero con el boton inteligente se soluciono todo ojala sigan poniendo mas cosas de facebook para programadores gracias

Margarita

22/5/2010
bien!
Lo he probado y me ha quedado super bien.
tengo un espacio de interés cultural para mi pueblo en el que es fundamental la participación de mis paisanos. Esta posibilidad me ayuda a cumplir con los objetivos del grupo que he creado en FAcebook.
Muchas gracias.

margarita

22/5/2010
una duda
Por cierto, cuando se ve el enlace en el muro de facebook aparece el título (lo que he puesto entre las etiquetas <title>) pero no se ve la foto en miniatura. A qué se debe esto? cómo puedo solucionarlo?
Muchas gracias

Martin

15/6/2010
Potenciando el Share
En este enlace se explica como podemos insertar una imagen, un titulo y una descripcion del enlace que recomendamos:

http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags

Espero que les sirva!

Saludos

Jonathan Ohanian

01/7/2010
Consulta
Buenas, ante todo gracias por compartir siempre buena informacion. Con respecto a este articulo la unica duda que me quedo, es que por ejemplo si en vez de compartir la url, supongamos que http://www.mipagina.com.ar/seccion

Yo quisera compartir solo una nota de la pagina seccion, por ejemplo: http://www.mipagina.com.ar/seccion#nota3

Lo he probado de esta forma pero sigue tomandome la pagina entera (seccion). Existe alguna forma de enviar ese articulo.

Muchas gracias y sigan asi!!

sarahi

23/11/2010
Muy útil!
Está perfecto el articulo! muy útil, lo andaba buscando y aquí está super explicado, mil gracias =)

Damian

07/1/2011
Comentario
En mi caso yo poseo el siguiente sitio http://www.glosarioit.com pero me gustaría que cuando alguien busque un término aparezca abajo de la definición el boton de "me gusta" "se el primero que le gusta esto" y en facebook aparesca el termino en cuestión como titulo y el link de mi sitio claro.
Estuve probando pero nada de nada, espero su ayuda.

salva-navas

07/1/2011
En el sitio de developers de facebook enseñan a hacer un like button
este es el link que debes seguir para ver los plugins para sitios web que tienen en facebook: http://developers.facebook.com/docs/guides/web

obdc

19/1/2011
boton share Y LUEGO
UNA PREGUNTA Y LUEGO COMO SE QUIEN SIGUE EL BOTON DIGAMOS ES INTERESANTE VER CIENTOS COMPARTIENDO EL MISMO BOTON PERO QUIENES SON O COMO DARLE SEGUIMIENTO, EXISTE ALGUNA FORMA

Fernando

22/1/2011
boton en mi web
Hola, muy bueno todo lo que compartíste, gracias.
La cuestión es que mi web la hice con Flash CS3 y no se cómo poner esas acciones... o sea, dentro de un evento, variable, o funciones de botón??

tomy

09/3/2011
Falla...
No entiendo el motivo del error:

No funciona:
http://www.facebook.com/sharer.php?u=http://www.desarrolloweb.com/index.html

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


En mi caso:
http://www.facebook.com/sharer.php?u=http://www.blackpeppercorp.com/index.html (NO FUNCIONA)

http://www.facebook.com/sharer.php?u=http://www.blackpeppercorp.com/ (FUNCIONA)

Alguien sabe el motivo?

juan_francisco_mndez_santos-331220

31/3/2011
Un poquito de ayuda.
Hola,
he intentado poner un botón de "Compartir en Facebook" en mi blog (Blogger) siguiendo vuestras indicaciones. Pero no consigo dejarlo como lo quiero: como el vuestro. Le he puesto una imagen personalizado, pero no consigo que comparta la URL del artículo/post.

¿Podríais echarme un mano?.

Muchas gracias.

David

10/5/2011
No me funciona el enlace básico
Muy buenas. Antes de nada tengo que darte las gracias por la ayuda.
Ahora te comento el problema: lo que me pasa es que no me funciona el enlace básico que explicas al principio. El código que inserto es el siguiente:
<a href="http://www.facebook.com/sharer.php?u=http://drm-arquitectura.myartsonline.com/" target="_blank"><strong>Me gusta en FB</strong></a>
Como ves la url de mi web es "http://drm-arquitectura.myartsonline.com". He probado con otras direcciones y funciona pero no con mi web. ¿Cual puede ser el problema?

Sergi

13/5/2011
¿Y para cada post?
Yo también quiero lo mismo que juan_fr, que me funcione para cada post, haciendo que el contador actúe para cada post y el contenido que se manda al muro del facebook de cada uno también sea el de cada post... ¿Alguien puede explicarlo detalladamente? Gracias.

augusto

20/5/2011
consulta sobre comentar eventos
hola amigo tengo una consulta que no he encontrado hasta el momento.. si quisiera agregar a mi pagina web el codigo html para poder tener conversacion y directa con todos los que ingresen con su login y asi mismo todos poder visualizar lo comentado al evento referido y se cree un ambiente de debate segun el tema a tocar, claro que se de facebook ...

te envio un link de donde lo he visto:

http://www.hipodromodemonterrico.com/

si sale la directo la primera pagina te vas a la opcion (senal en vivo y alli veras lo que te comento lineas arriba del coversatorio on line de facebook acerca del evento del momento)

espero que me puedas ayudar no creo q sea tan dificil para ustedes, gracias y saludos.

Alberto Luna

27/6/2011
Boton no me funciona
Que tal, el boton funciona correctamente, el detalle que se me presenta es al momento de visualizar la ventana que abre de compartir.

Me muestra titulo, imagenes, link sin problemas.. mas no me muestra la descripcion de la pagina a lo que algunos le llaman el contenido..

poniendo el link directo si me lo muestra incluso como pop up.. pero en cuanto especifico que es un "name="fb_share" type="button_count" no lo muestra.. me gustaria saber que podria mover o modificar o que parametros debo pasar..


Agradezco sus comentarios GRacias

Joel Estrada

23/8/2011
Excelente
Facil, rapido y sin tantos videos complicados... MIL GRACIAS ME SIRVIO MUCHO

Kike

25/10/2011
¿ALGUIEN QUE ME PUEDA AYUDAR?
¡Hola, que tal!
Disculpar las molestias, llevo dos semanas intentando poner botones de compartir de facebook en mi web (www.enriquetalledo.com). Lo cierto es que si logro hacerlo pero sin que me aparezca una foto que represente el enlace.
No sé que es lo que estoy haciendo mal, os voy a poner los códigos que pongo:

<link rel="image_src" href="http://enriquetalledo.com/www.enriquetalledo.com/AUTOR_files/cangrejo.jpg" />

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

La primera frase es la que hace referencia a la foto que quiero que aparezca y la segunda la que corresponde al botón.

Si alguien me puede ayudar lo agradezco, para mi es importante acertar en esto ya que mi página creada con iweb, se basa en imágenes.

Muchas gracias y disculpar las molestias. Un abrazo

Cristina

02/3/2012
cUANDO HABRO MI CUENTA DE FACEBOOK, ME DICE K ESTA PAG PUEDE CONTENER SCRIP Y NO LA TERMINA DE HABRIR
Hola , no entiendo nada de esto, mi problema es que cuando entro a mi cuenta de facebbok, me fijura un cartel que dice , esta pagina puede contener scrip, y es como no termina de habrir la pagina completa.

Christian

06/3/2012
mira que facil
en el sitio www.clickmegusta.com.ar puedes crear botones de facebook facilmente =)

Jose Mariani

11/3/2012
KIKE
kike el link="" ................. tienes que ponerlo dentro de las cabezeras de tu pagina..

es decir despues de <head> o tambien antes de </head>

en definitiva adentro! .. =) espero haberte ayudado.. si alguien sabe como se hace para compartir un video.. :s

Sara Morán

20/3/2012
Ufanbuilder para crear una página web en Facebook
Recomiendo para crear una página web dentro de Facebook con un acabado profesional una aplicación llamada UFANBUILDER. Es sencillo. Primero se instala, y después se elige un diseño y se edita con un completo gestor de contenidos. Además, dispone de otras aplicaciones como una Tienda en Facebook, Gestión Inmobiliaria, etc... Conócelo en: http://www.ufanbuilder.com
Espero sirva de ayuda. Saludos.

victor

19/6/2012
Boton compartir
cual es el codigo de compartir enredes es que tiene el logo de facebook

Guadalupe Vasconcelos Rodriguez

28/6/2012
# Yaa No
Likee! Si te Gustaa Esta Cancion Esta Biieen Lindaa!

mauricio

07/8/2012
varios botones
hola, quisiera saber como agregar varios botones compartir en una misma pagina, actualmente pongo 2 y no funcionan

Vicente

03/11/2012
Enhorabuena
Además de haberme solucinado no en una ocasión sino dos problemas que me han tenido en jaque y en los que despues de buscar y buscar no daba con la solución, me los habeis solucionado de forma inmediata, pero lo que más me ha gustado es la claridad y exactitud como explicais los temas. Es muydificil que los articulos sean pedagogicos, suele uno que tener que entresacar probando para resolver las cuitas. Por eso os doy la enhorabuena, no solo por el fondo, sino por la forma de explicarlo. Asi se construye un mundo mejor.

Cordoba

17/12/2012
Una duda
Hola, antes que nada, muchas gracias por tan valioso articulo.

mi duda -si alguien me puede ayudar-: Coloque este código . </p>
<p align="left"><a name="fb_share" type="button_count">Compartir en Facebook</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</p>

y anda muy bien pero da un error que dice que no se pudo agregar en muro de facebook y en relidad si lo hizo.

Se puede solucionar ese pequeño inconveniente?

gracias a quien responda

Santiago Gimenez

06/8/2013
Ayuda rápida
Buenas, muy buen artículo, pero me quedó una duda.<br />
Yo quiero que el botón de FB comparta la página actual, no una en concreto, entonces, ¿Cómo sería el código?<br />
Sería así:<br />
http://www.facebook.com/sharer.php?u=<br />
o así<br />
http://www.facebook.com/sharer.php?u<br />
<br />
Gracias desde ya por responder

marc_vila_casademont

07/11/2013
Nuevas funciones
Hola,
Hace un tiempo que facebook presenta los enlaces compartidos de manera distinta. Antes salía la imagen en un cuadradito pequeño y la descripción al lado derecho. Ahora, en según qué casos, sale una imagen mas grande ocupando el 100% del post y la información de texto debajo. Por lo que he podido deducir haciendo pruevas eso se diferencia al indicar si la url que estas compartiendo hace referencia al tipo 'articulo' (og:type article). Indicando eso en los meta tags y compartiendo la url directamente en facebook me funciona bien, pero no consigo encontrar la manera de indicarle desde php o desde javascript que es un articulo lo que quiero compartir mediante el botón de share. A ver si me podais hechar un cable que voy perdido.

Gracias.

berck

10/2/2014
Solucionado!
Hola!
El caso es que tengo una tienda online, en la cual al entrar a la pagina de productos carga directamente la categoría y el listado de productos de una base de datos.

Mi idea era poner un botón de compartir en cada producto, quizás alguno se encuentre en la situación en la que quiere compartir algún contenido de su web.

Probé con la solución que hay aquí y cuando le doy al enlace para compartir, en la pagina de Facebook sale todo correctamente, pero al darle al botón compartir, en mi biografía/muro me coge los datos de la web, exceptuando el enlace que si lo pone bien...

Pero al final he dado con la solución!

He hecho un script en PHP muy fácil de configurar y me ha solucionado por completo todo el problema.

Ahora cada botón "share" es independiente y a la hora de compartir un enlace, publica la foto, titulo y descripción que yo quiera.

Aquí pueden comprobar como ha quedado:
http://www.guimac.es/

Para quien este interesado lo puede descargar de:
http://www.guimac.es/FacebookShare.rar

Lupita

20/3/2014
Imagen miniatura
Tengo un problema al compatir de mi Web, uso el boton programado de face y funciona todo perfecto pero al momento de compartir desde mi Web la imagen miniatura no es la que sale cuando comparto desde facebook AYUDAAAA me urge que tengo que hacer.
P.D. Ya hice la depuracion.

carlos

28/3/2014
urgente
al hacer el compartir me sale todo ok, pero no sale la imagen,no sale el titulo, solo sale la imagen y el titulo por defecto y no la que yo le doy, valga decir q las imagenes por defecto como el icono de la pagina y el titulo sale como el www.mipagina.com...ayudaaaaaaaaa

daniel

03/5/2014
parece que ya no funciona
esto fue creado en el 2010, he probado casi todo el codigo de esta pagina y ya no funciona.

Iván García

17/7/2014
Buen Post
Muy bueno el artículo. Me parece muy buena aportación lo voy a poner en mi página www.reparacionportatilesmadrid.es/
Saludos.