miércoles, 7 de diciembre de 2011

Personalizando imagenes mostradas al compartir páginas en sitios sociales

Logotipo de la Graph API -Facebook-

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.

Imagen al compartir enlace en 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)

martes, 6 de diciembre de 2011

@Wandisco propone Bloodhound, un fork de Trac

Trac podría ser Apache Bloodhound link=http://wiki.apache.org/incubator/BloodhoundProposal

En  artículos anteriores les he hablado de  Trac , un sistema de administración de proyectos que me gusta mucho debido la calidad de su diseño. Soy el autor o contribuyo con  varios plugins. Me atrevería a decir que  Trac es el sistema de este tipo con más instalaciones funcionando en línea. Muchos projectos de software libre lo utilizan, e.g.  Pidgin,  PyAMF,  OForge ... muchos en realidad. También sucede que compañías como  Sourceforge también lo ofrecen en su paquete de  hosted apps .

Estado actual de la comunidad de Trac

Sin embargo en los últimos tiempos el desarrollo de la herramienta no ha sido lo suficientemente acelerado como algunos querrían. Hay algunas razones para haber llegado a este punto. En primer lugar ya  Edgewall (la compañía que gestó el proyecto) no es lo que solía ser unos años atrás. Además  el sitio de la comunidad necesita una actualización desde hace mucho tiempo ya. Todavía funciona con la versión 0.10, en un momento en que ya se está desarrollando la versión 0.13. Hay una buena distancia entre las dos, créanme. En mi opinión también sería muy conveniente que migraran el  repositorio actual basado en  Subversion para utilizar otro sistema distribuido, e.g.  Mercurial o  Git (me inclino por el primero pero todo parece indicar que ya hay una  propuesta de espejos para Git y  otra propuesta para Bitbucket).

Teniendo en cuenta mi experiencia personal también me inclino a pensar que los desarrolladores de los plugin puede que no tengan el apoyo necesario como para dedicarse a tiempo completo a realizar sus ideas. Por tal razón se dedican a hacer otras cosas mejor remuneradas.

Nuevos horizontes para Trac

Recientemente me ha llegado  una agradable noticia. Hay un fuerte interés en el desarrollo y mejora de  Trac. Todo comenzó meses atrás cuando un mensaje fue enviado a las listas  trac-users y  trac-dev. En estos momentos, gracias fundamentalmente a la compañía  Wandisco, esta petición a tomado vuelo y se concreta en una  propuesta llamada Bloodhound. La idea subyacente es integrar el desarrollo bajo la égida de la  ASF en el sistema  Apache Incubator. Esta fundación se destaca por dar vida a comunidades relacionadas con el código abierto. Entre las más destacadas se encuentran los proyectos  Subversion y el servidor  Apache httpd, ambos estrechamente relacionados con  Trac.

La idea que se maneja es clonar el código existente y comenzar una rama de desarrollo independiente , o sea que el proyecto anterior no muere. Por tales razones supongo que lograr una interoperabilidad entre ambos proyectos, al menos en un futuro cercano, es algo que beneficie a ambas partes. En el caso  plugins útiles y exitosos para ofrecer una solución llave en mano. del naciente Bloodhound la idea consiste también en empaquetar varios

Conclusiones

En pocas palabras , estoy muy contento al saber que todo esto está ocurriendo. Espero que la idea dé frutos y pueda salir a flote esta nueva herramienta. Habrá que seguir  la evolución de esta idea para ver qué resulta. Gracias a todos los que la han hecho posible.