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)
