miércoles, 23 de marzo de 2011 a las 09:48hs por Gustavo Cantero (The Wolf)
Hoy en día es raro encontrar un sitio que no tenga un enlace a una red social (especialmente a Facebook o Twitter) para compartir páginas, comentar o al menos para poder cliquear en el “me gusta”. En este artículo justamente intento dar una breve explicación sobre cómo hacer, de forma sencilla, para agregar un botón de «compartir en Facebook» en nuestras páginas.
Básicamente para hacer el “compartir” hay que crear un link a la página “http://www.facebook.com/sharer.php” pasándole los textos e imágenes a compartir como parámetros de la URL.
Estos parámetros los detallo a continuación:
| Parámetro | Valor de ejemplo | Descripción |
|---|---|---|
| s | 100 | Este valor es constante y obligatorio |
| p[url] | http://www.scientia.com.ar | Dirección de la página a compartir |
| p[images][0] | http://www.scientia.com.ar/images/Logo.png | Dirección de la imagen a mostrar |
| p[title] | Scientia® Soluciones Informáticas | Título de la página |
| p[summary] | Scientia® ofrece servicios de diseño, desarrollo e implementación de software sobre metodologías agiles de gestión de proyectos | Descripción de la página |
Hay que tener en cuenta que el valor de cada parámetro debe estar codificado para poder enviarse en una URL, sino los & y demás caracteres que pueden haber en estos parámetros se van a confundir con los propios de la página de Facebook.
Esta codificación se puede hacer de distintas maneras dependiendo del lenguaje que estemos utilizando, por ejemplo, en .NET podemos usar el HttpServerUtility.UrlEncode, en Flex/Flash podemos usar la función escape, en PHP usamos urlencode, en Java URLEncoder, en Python cgi.escape(), etc.
Por ejemplo, para armar un link para publicar en Facebook nuestra página con los textos escritos en la tabla anterior deberíamos crear un link que apunte a la siguiente dirección:
http://www.facebook.com/sharer.php?s=100&p[url]=http%3A//www.scientia.com.ar&p[images][0]=http%3A//www.scientia.com.ar/images/Splash3.gif&p[title]=Scientia%C2%AE%20Soluciones%20Inform%C3%A1ticas&p [summary]=Scientia%C2%AE%20ofrece%20servicios%20de%20dise%C3%B1o%2C%20desarrollo%20e%20 implementaci%C3%B3n%20de%20software%20sobre%20metodolog%C3%ADas%20agiles%20de%20gesti%C3%B3n%20de%20proyectos
El siguiente texto tiene un enlace a la dirección anterior para demostrar su funcionamiento: compartir.
Espero que les sea de utilidad.
Suerte!
Gracias,,, creo que había recorrido casi todas las páginas posibles para conseguir esto… Graciasssss me resulto de mucha ayuda,, muy util..
Gracias! simple y eficaz!! excelente!
Gracias buena información
soberbio muy bueno gracias
Eres un duro estuve buscando esto muy buen rato, me faltaría como encapsularlo para que aparezca en una ventana modal que no debe ser muy difícil y listo Muchas gracias….!
Podrías utilizar alguna librería de jQuery como colorbox para «meter» dentro un iframe con el link de facebook.
Otra forma es utilizar los diálogos de facebook, como el «feed» para escribir en el muro del usuario. En este link podés encontrar la documentación: Feed Dialog.
Suerte!
Fat Loss…
Compartir en Facebook desde nuestra aplicación web | Programando a medianoche…
no he encontrado la opción para añadirle titulo o texto al compartir un link en version movil, es posible? gracias
¿Con los parámetros «p[title]» y «p[summary]» no funciona?
Muchas gracias, útil, sencillo y 100% funcional. Saludos.
Gracias por el aporte, me ha gustado tu explicación , ahora solo falta ponerla en marcha . Saludos desde Canarias
Gracias muchisisisisimas gracias
Hola comentar que funciona perfectamente salvo que como en el ejemplo que has dejado arriba la imagen no la lee bien. tienes alguna solucion??
Para evitar estos problemas comunes con las imágenes te recomiendo agregar en la página que estás compartiendo este meta dentro del head:
Suerte!