Esta semana toca nueva entrada técnica y de nuevo le toca el turno a facebook. Hace tiempo escribí un post sobre cómo elegir la imagen al compartir nuestras entradas en facebook y aún hoy es una de las entradas más visitadas de este blog (por no decir la que más…). Y es que se ve que no era la única a la que le sentaba como una patada en el culo eso de compartir una entrada y que saliese como imagen destacada cualquier cosa, hasta un anuncio!

Esta solución ha probado ser efectiva en muchos casos, sin embargo no es válida en todos. Durante mucho tiempo he estado investigando y recorriendo el bloggerespacio en busca de otras alternativas y/o soluciones a este dichoso problema y he aprendido mucho sobre facebook y también sobre blogger.

Facebook  evoluciona con el paso del tiempo (para bien o para mal…). En el caso de las páginas personales ha añadido la funcionalidad de subir una imagen alternativa, lo cual en mi caso ha resuelto casi todos los problemas, pero para el resto de casos en que esto no es posible, o la opción no es visible todavía, hay esperanza.

Si queremos que facebook interprete bien nuestras entradas del blog y que al compartir contenidos no nos llevemos sorpresas por la imagen o descripciones que aparecen, tenemos que hablar su propio idioma, y sí, facebook tiene un idioma propio: Facebook Open Graph Meta Data que usa
The Open Graph protocol para poder interpretar la información de cualquier web.

Lo primero que tenemos que hacer es decirle a facebook que hablamos su idioma ¿Cómo? añadiendo el código resaltado en rosa a la etiqueta <html … > de nuestro blog
<HTML xmlns:og=’http://ogp.me/ns#’ … xmlns:expr=’http://www.google.com/2005/gml/expr’>

A continuación, para que facebook encuentre correctamente los contenidos de nuestro blog tenemos que añadir ciertos metadatos o etiquetas a la cabecera (Entre las etiquetas <head>…</head>).
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<meta expr:content=’data:blog.pageName‘ property=’og:title’/>
<meta expr:content=’data:blog.canonicalUrl‘ property=’og:url’/>
<meta content=’article‘ property=’og:type’/>
</b:if>
<meta expr:content=’data:blog.title‘ property=’og:site_name’/>
<b:if cond=’data:blog.postImageThumbnailUrl‘>
<meta expr:content=’data:blog.postImageThumbnailUrl’ property=’og:image’/>
<b:else/>
<meta content=’url_imagen_principal_blog’ property=’og:image’/>
</b:if>
<b:if cond=’data:blog.metaDescription != &quot;&quot;’>
<meta expr:content=’data:blog.metaDescription’ name=’og:description’/>
</b:if>

Con este código le estamos diciendo a facebook el tipo de contenido que estamos compartiendo (título de nuestra entrada, descripción, imagen, url, etc), de esta forma facebook será capaz de saber por ejemplo si estamos compartiendo un blog en general o un post en particular. Esta información será la que aparecerá en facebook cuando compartamos un enlace de nuestro blog.

Debemos sustituir el código resaltado en rosa por la url de la imagen que queramos que represente a nuestro sitio web, un avatar, un logo, lo que nosotros queramos.
En el caso de los posts debemos tener en cuenta que la imagen que le proporcionará blogger a facebook para compartir es la imagen destacada y que dicha imagen no se puede elegir manualmente. Hay mucha literatura en Internet acerca de cómo elige blogger exactamente cuál es la agraciada, lo que parece que se ajusta más a la realidad es que se trata de la primera imagen del post alojada en nuestro blog (no vale ni picasa, flikr, instagram etc) y con un tamaño mínimo. Yo recomiendo que sea por lo menos de 200x200px, si la proporción es cuadrada suele quedar mejor, aunque últimamente facebook es más flexible con los layouts.
OPCIONAL: Enlazar nuestro blog directamente con facebook. Con esto lo que hacemos es decirle a facebook que el usuario 111111111 de facebook es además el autor del blog que estamos editando.
<meta content=’111111111′ property=’fb:admins’/>
Para obtener el código fb:admin accedemos a http://graph.facebook.com/fbUserName y nos devolverá una página que contendrá un código parecido a este:

{
   "id": "111111111",
   "name": "Mi nombre en Facebook",
   "first_name": "Nombre",
   "last_name": "Apellidos",
   "gender": "female",
   "locale": "es_LA",
   "username": "fbUserName"
}
fbUserName es el que aparece en la barra de navegación junto a la url de facebook. Podemos verla haciendo click sobre nuestro nombre en la portada, la dirección se tendrá esta estructura:https://www.facebook.com/fbUserName

También se puede integrar la funcionalidad de compartir contenido desde nuestro blog directamente a nuestra página de facebook, pero esto ya es bastante más complicado de explicar y lo dejamos para una próxima entrega.

Para comprobar que todo está OK os recomiendo utilizar la herramienta de debug de facebook:

https://developers.facebook.com/tools/debug/Espero que esta información os haya resultado de utilidad 🙂

Un abrazo!