En este tutorial vamos a explicar como crear un botón de ‘Compartir en Facebook‘ al que le indicaremos los parámetros que queremos que se muestren en la ventana de Facebook, y posteriormente vamos a comfigurar las cabeceras de nuestra página para que sean mostradas en el muro de Facebook.
1.-Crear botón de compartir en Facebook
Vamos a empezar por el primer paso, que será tener el botón de compartir. Para ello vamos a crear la url a la que va a realizar la petición nuestro botón. La URL de dicho enlace tendrá el siguiente formato:
1 2
Esta url estará formada por los siguientes parámetros:
- Url de facebook con la que interactuar ‘http://www.facebook.com/sharer/sharer.php?‘
- Parámetro con la url que se quiere compartir ‘p[url]‘
- Parámetro con el título ‘p[title]‘
- Url de la imagen que se utilizará como thumbnail ‘p[images][0]‘
- Parámetro con un texto que resuma el contenido que se está compartiendo ‘p[summary]‘
Si unimos todos estos parámetros junto con la url principal de Facebook obtendremos que nuestro enlace para compartir el contenido al que apunta el parámetro ‘url‘ en Facebook sería el siguiente:
Haciendo clic sobre este enlace serás redirigido a Facebook y te dará la opción de compartir el contenido configurado abriéndose una nueva ventana de facebook para compartir el contenido configurado con el siguiente aspecto:
Con lo que se ha configurado hasta el momento, lo que hemos editado es la ventana de ‘compartir‘, el contenido que finalmente va a aparecer en Facebook será el obtenido de las etiquetas ‘meta og’ incluidas en la cabecera de la página a donde apunta la url que estamos compartiendo.
Problemas ‘Custom share button’ en dispositivos móviles
Es importante saber que en el móvil al acceder a la url que hemos creado anteriormente Facebook va a redirigirnos a la versión para móvil que será una url del tipo ‘http://m.facebook.com/…‘ y alguno de los parámetros configurados en la versión del móvil deben ser distintos y por tanto no funcionará correctamente.
Si queremos que el botón también funcione en el móvil, y no redirija a la url de la versión móvil, hay que añadir un nuevo parámetro a la url. Este parámetro es ‘m2w‘, si se lo añadimos a la url anterior podrás comprobar que ahora si accedes a ella desde un dispositivo móvil también funciona correctamente:
2.-Configurar etiquetas meta og con los parámetros a compartir
El último paso es añadir al menos las siguientes etiquetas ‘‘ en la cabecera de nuestro sitio web. Para ello editar el codigo fuente y añadir lo siguiente:
01 <html>02 <head>03 <meta property="og:url" content="http://developando.com" />04 <meta property="og:title" content="Developando Web & Móvil" />05 <meta property="og:description" content="Empresa encarga de desarrollar aplicaciones movil y web con calidad" />06 <meta property="og:image" content="http://developando.com/images/developandoLogo.jpeg" />07 </head>08 <body>09 </body>10 </html>
Este sería el aspecto de la entrada que se incluiría en el muro de los usuarios de Facebook que compartan este contenido:
Cuando edites el código fuente de tu sitio web e incluyas estas etiquetas en la cabecera puede utlizar esta aplicación de Facebook para comprobar que tanto el tamaño de la imágen como el resto de parámetros están correctamente creados. El resultado de la comprobar la dirección de nuestro sitio web ‘http://developando.com’ muestra la siguiente información:
Siguiendo estos dos pasos ya podrás crear tu propio botón de Facebook, darle el estilo que quieras y compartir contenido en Facebook.
Sobre David Otero
David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.
- Find more about me on:
Deja tu comentario