Al compartir la página de la documentación del botón like de la API de Facebook en mi wall me llamó la atención que se mostraba una imagen (thumbnail) que no aparecía por ninguna parte en el artículo :O . ¿Cómo es esto posible? En esta entrada brindo una explicación de este fenómeno paranormal (al menos para mí ;o). Si Usted está interesado en controlar la imagen de sus páginas cuando los usuarios lo anuncian en Facebook y otros sitios sociales, le invito a que continúe leyendo este artículo hasta el final. Si está interesado en estar informado sobre temas relacionados con los secretos que esconden las redes, Usted puede también suscribirse mediante RSS.
El caso del botón Share
Recientemente anuncié el lanzamiento de un sitio llamado Appeartowork. Mientras ultimaba los detalles salió a relucir el modo de especificar la imágen que seleccionará Facebook cuando los usuarios compartan el link en lugares como su muro, mensajes, etc. Cualquiera podría pensar que el sitio simplemente se limita a identificar y extraer las imágenes que encuentra en una página, y mostrarlas para su posterior selección, en caso de haber varias opciones. Sin embargo no es del todo así. Como ya les comenté las páginas de la documentación de la Graph API de Facebook son fundamentalmente texto y al compartirlas (al menos todas las que yo he visto ;o) muestran un logotipo que está muy relacionado con la compañía y su imágen de marca.
Comencé a investigar y descubrí que hay una variante del botón Share (XFBML). Hecho esto, al hacer click sobre el botón aparecería un diálogo como el mostrado en la siguiente figura.
Sinceramente ahora no recuerdo cómo logré hacerlo ... los años no perdonan :-/
Preparando páginas para publicación en sitios sociales
Incluso cuando se usa el método anterior (cuando lo recuerde escribiré una nota al respecto), puede que resulte efectivo para insertar estos botones en sus propios sitios, pero no funciona si el usuario inserta el enlace directamente en su muro de Facebook. Afortunadamente existen ciertos metadatos que se pueden insertar en las páginas con el fin de indicarle a Facebook (y otros sitios sociales ;o) los datos que se desean mostrar al compartir el enlace. La tecnología subyacente es conocida como Open Graph Protocol :
Open Graph tags are <meta> tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
No pretendo profundizar mucho en este protocolo, pero sí explicar cómo utilizarlo para lograr lo que nos proponemos. El punto de partida será un documento XHTML con el contenido de la página.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello world example</title> </head> <body> <h1>Hello world!</h1> <p> This simple web page has been used to illustrate how to use meta-data defined by the <a href="http://developers.facebook.com/docs/opengraph">Open Graph Protocol</a> so as to decide/suggest the look and feel of links shared on social sites. </p> <p> Please consult the following pages for further information. </p> <ul> <li><a href="http://simelo-en.blogspot.com/">Facebook Open Graph tutorial (English)</a></li> <li><a href="http://simelo-es.blogspot.com/2011/12/personalizando-imagenes-mostradas-al.html">Facebook Open Graph tutorial (Spanish)</a></li> <li><a href="http://simelo-en.blogspot.com">English blog</a></li> <li><a href="http://simelo-es.blogspot.com">Spanish blog</a></li> <li><a href="http://www.olemix.com">Website</a></li> </ul> </body> </html>
Posteriormente es preciso añadir los metadatos del Open Graph Protocol que son de interés. Para ello se incluye el espacio de nombres http://opengraphprotocol.org/schema/ y se usa el tag meta como se muestra a continuación para especificar por ese orden el título predeterminado del enlace que mostrará Facebook, el tipo de enlace, la URL, la imágen que se mostrará como thumbnail, el nombre del sitio y la descripción asociada al enlace (o sea, la que se muestra bajo el título, no el mensaje que introduce el usuario ;o). Al hacer esto el ejemplo anterior se transformaría y quedaría similar al que se muestra a continuación :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/"> <head> <title>Hello world Open Graph sample by Simelo</title> <meta property="og:title" content="Hello world Open Graph sample by Simelo" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://samples.olemix.com/opengraph/hello.html" /> <meta property="og:image" content="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/187687_1339232608_3437336_n.jpg" /> <meta property="og:image" content="http://img.wonderhowto.com/images/gfx/gallery/634554136690814583.jpg" /> <meta property="og:site_name" content="Simelo's code snippets" /> <meta property="og:description" content="Example illustrating the use of the Open Graph Protocol (by Olemis Lang)" /> </head> <body> <h1>Hello world!</h1> <p> This simple web page has been used to illustrate how to use meta-data defined by the <a href="http://developers.facebook.com/docs/opengraph">Open Graph Protocol</a> so as to decide/suggest the look and feel of links shared on social sites. </p> <p> Please consult the following pages for further information. </p> <ul> <li><a href="http://simelo-en.blogspot.com/">Facebook Open Graph tutorial (English)</a></li> <li><a href="http://simelo-es.blogspot.com/2011/12/personalizando-imagenes-mostradas-al.html">Facebook Open Graph tutorial (Spanish)</a></li> <li><a href="http://simelo-en.blogspot.com">English blog</a></li> <li><a href="http://simelo-es.blogspot.com">Spanish blog</a></li> <li><a href="http://www.olemix.com">Website</a></li> </ul> </body> </html>
Después de publicar esta página en la URL especificada en og:url , se obtiene el siguiente resultado al tratar de compartirla en mi wall de Facebook.
Observaciones
En primer lugar no se puede dejar pasar inadvertido un detalle. En muchos
sitios se menciona que en caso que se especifiquen varias imagenes con el tag og:image el sitio donde se comparte el enlace debe ofrecer cada figura para su selección y posterior inclusión en el post ; pero como ven en la imagen anterior
solo aparece una imagen. Si solo se especifica una figura, generalmente no queda
otra opción para los usuarios que comparten el enlace. En caso de que no se
inserte ningun tag og:image entonces, en el caso de
Facebook, se recurre al método antiguo. El mismo
consiste en utilizar la URL mencionada en un tag como el siguiente.
<link rel="image_src" href="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/187687_1339232608_3437336_n.jpg"/>
Si no hubiera tampoco un tag <link> de este tipo, entonces se recurre a buscar todas las imágenes que aparecen en el documento y cumplen los requisitos de previsualización, que hasta donde sé son :
- Las dimensiones deben ser al menos 50px X 50px .
- Relación 3:1 como máximo .
- Formato PNG, GIF, JPEG .
Es preciso mencionar que hay que ser cuidadoso a la hora de hacer todo esto porque Facebook utiliza un mecanismo de cache para los thumbnails. Una vez que la URL ha sido compartida el crawler de Facebook, que se identifica con el encabezamiento User-Agent con el valor facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), accede a la página y mantiene una copia local de la información. Razón por la cual si se comparte el enlace antes de tener todo esto listo, puede que la imagen especificada con el Open Graph Protocol no aparezca, ya que se utiliza la primera opción que permanece en el cache. Todas las imágenes deben ser públicas y accessibles por el crawler de Facebook .
Las buenas noticias son que se puede actualizar el cache y corregir los tags utilizando la herramienta Facebook Linter . Los detalles de su puesta en funcionamiento en Junio de 2010 pueden serles de interés, en caso que quieran saber un poco más al respecto.
Espero que esta nota les haya resultado útil. No olvide suscribirse mediante RSS si está interesado en temas similares. Cualquier duda u observación, espero sus comentarios. Recuerde que todo es posible simelo pide ... ;o)
