Personalizando imagenes mostradas al compartir páginas en sitios sociales

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)

Appeartowork - Enmascarando el uso de Facebook

El día 8 de julio de 2011 a las 21:00 h (apróximadamente ;o) finalmente logré desplegar el sitio web  Appeartowork . Consiste en una idea interesante que radica en mostrar ciertos contenidos de  Facebook de una forma que el usuario aparenta estar trabajando. Actualmente hay tres variantes de camuflaje. La primera le da al sitio un aspecto similar al editor de textos  MS Word, y así parece que se está redactando un documento muuuuuy importante ;o). Otra variante es parecida al  MS Excel . ¡Cualquiera puede pensar que estamos haciendo cuentas bien difíciles! ;o). Finalmente si Usted es un poco geek también puede enmascarar su acceso a  Facebook aparentando que usa una consola :O . En todos los casos, aunque todavía faltan varios detalles por pulir, es una idea muy interesante . Espero que les guste. Si tiene otra idea, no dude en compartirla. Recuerde que todo es posible simelo pide.

Funcionalidades no documentadas de la API de Facebook

Jugando un poco descubrí una funcionalidad no (muy bien) documentada de la API de Facebook conocida como Facebook Graph API. Realmente es un detalle que me hacía falta utilizar en un proyecto para disminuir el número de peticiones que se hacen a los servidores de Facebook. Cuando leí la documentación se aborda la manera en que la API permite hacer este tipo de cosas e incluso se muestran ejemplos de peticiones sencillas. Les invito a leer este artículo y sabrán de una forma de optimizar las peticiones que se realizan a la API de Facebook y, por consiguiente, mejorar el desempeño de las aplicaciones. Si desea estar al tanto de otros artículos similares, Usted puede suscribirse a este blog mediante RSS.

Lo más frecuente, al utilizar la API antes mencionada, es hacer peticiones para obtener los datos de objetos individuales (e.g. usuarios) o de sus conexiones (e.g. las páginas que le gustan a un usuario). En la documentación se puede encontrar información acerca de cómo hacer esto (y por brevedad asumiré que Usted ya está familiarizado con los detalles, pero si no es así, solícitelo en un comentario y le dedicaré otro artículo a esta materia ;). Solo menciono que para lograrlo se utilizan URLs del tipo https://graph.facebook.com/<ID de objeto> (e.g. la información de la página de la Coca-Cola sería estaría disponible en https://graph.facebook.com/cocacola ).

Sin embargo, a veces es necesario solicitar la misma información para múltiples objetos (e.g. los mensajes de estado de un grupo de usuarios). Si se sigue el procedimiento anterior en este caso se necesitaría efectuar varias peticiones. La API permite hacer esto eficientemente. Por ejemplo, si se necesitara obtener los datos de la página antes mencionada y los de Bret Taylor entonces con una única petición a https://graph.facebook.com/?ids=cocacola,btaylor ya se podrían obtener todos estos datos.

Digamos que queremos obtener los mensajes que varios usuarios han publicado en su status. Ya entonces no resulta tan evidente lo que hay que hacer debido a que la URL para obtener el de un solo usuario es e.g. https://graph.facebook.com/btaylor/statuses . La duda entonces consiste en saber donde situar los IDs de los objetos.

Pues bien, digamos que desea obtener los mensajes míos y de Bret Taylor en una sola petición, entonces la URL sería así https://graph.facebook.com/statuses?ids=btaylor,olemis , es decir se mantiene el tipo de conexión al final y se añaden los IDs de los objetos como parámetros.

Ya lo sabe, si antes no le resultaba evidente, aquí tiene los ejemplos que no aparecen en la documentación oficial. Espero que les sea útil el consejo para optimizar sus aplicaciones. Pregunte cualquier duda, siempre podrá contar con mi ayuda, simelo pide.