Seguro que muchos de vosotros habrá compartido algún link por Facebook donde seguidamente se había generado una miniatura (que seguro habéis dejado) para así hacer el post de una manera un poco más “elegante” en vuestro muro, y si habéis llegado a manipular esa miniatura, sabréis además que podéis cambiar el título, descripción o incluso la imagen que viene adjunta a la misma.

Pues bien. Esto no es algo que hace Facebook de por sí, si no que además habría primeramente que integrar unas etiquetas META en vuestra página web para que así Facebook pueda conectarse con vuestra página web y así obtener todos los datos necesarios para generar automáticamente esta miniatura, y ahí es cuando actúa el protocolo Open Graph. EL protocolo Open Graph no es más que una que una API de Facebook que se utilizan para extraer datos de una aplicación o web.

Para integrar estas etiquetas META habría que modificar cierta parte del código que dispone nuestra página web, pero como a mi aún me falta bastante por aprender en Drupal y WordPress, he empezado claramente por los más básico y con lo que considero que os podría ayudar: Buscando los plugins correspondientes para integrarlo a mi web.

Así que, vayamos al lío.

Para integrarlo a WordPress

WordPress, en diferencia de Drupal, es que es una plantilla CMS muy muy básica y muy facil de manejar por lo que al integrar cualquier plugin dudo que os sea complicado, porque de hecho, no lo es.

En mi caso, he estado buscando exactamente el plugin correspondiente para integrar este Open Graph sin problemas y lo encontré:

Open Graph Metatags for Facebook para WordPress

Justo cuando os hayáis descargado el plugin, tendríais que iros al apartado de Plugins de vuestro panel de WordPress y después clickar en Añadir nuevo.

Cuando estéis dentro, clickais en Subir, Seleccionar archivo, buscais el plugin que os habéis descargando a priori y activáis. Supongo que no tendréis ningún problema al respecto.

A continuación tendríais que iros al artículo que en cuestión vais a compartir, editarlo, y abajo del todo veréis una opción nueva llamada Imagen destacada (justo debajo de Etiquetas) donde ahí tendríais que marcar la imagen que queréis mostrar en la miniatura, guardáis y ¡Plash plash! ¡Pan comido!.

En mi caso lo he probado nada más activarlo y me ha funcionado a la primera. Si por lo que sea no os funciona, tendríais que hacerlo de nuevo o me temo que el plugin ha dejado de funcionar porque las APIs de Facebook han cambiado y el plugin no se actualizó.

Hay que tener en cuenta que siempre hay que tener todos los plugins al día para evitar problemas.

Para integrarlo a Drupal

Como todo lo que le quiero hacer a Drupal se me complica ya que aún no estoy acostumbrado a él (y lo veo todo como WordPress: Facil y cómodo), tras rebuscar por Internet durante un ratazo he llegado a ver este plugin para Drupal  el cual es más completo que el de WordPress. Ahora veréis por qué.

Como todo proceso, sería descargando el plugin que en este caso he utilizado el siguiente:

Open Graph meta tags para Drupal

Tras descargarse el plugin necesario, tendríamos que instalarlo como Módulo yéndonos a Módulos y posteriormente a Instalar un nuevo módulo.

Tras estar en dicho apartado, procedemos a subir el módulo para posteriormente activarlo.

Una vez que lo hayamos instalado y, a su vez, activado, procederemos a trastearlo un poco porque como bien dije, este plugin ofrece más funcionalidades que el de WordPress.

Ahora, nos vamos a escribir un nuevo artículo o editar cualquiera que tengamos para irnos a las opciones del mismo que se encuentran abajo del todo:

Cómo vemos subrayado en la imagen anterior, nos aparece una nueva configuración para nuestro artículo para así integrar los metadatos necesarios para que nuestra página pueda comunicarse con el protocolo Open Graph de Facebook y así  generar dicha miniatura al compartir la URL de nuestro artículo específico. Dentro de esta nueva opción nos aparece:

• Título: Colocamos el título a mostrar en la miniatura generada. Si se deja en blanco, por defecto coge el título del artículo que queremos compartir.
• Resumen: Colocamos una pequeña introducción o incluso un resumen que se colocará en la miniatura. Si se deja en blanco, por defecto coge las primeras lineas del artículo que queremos compartir.
• Tipo: Aquí asignamos el tipo de la miniatura. Si se deja en blanco, se generará NULO. Más información en la página de Facebook.
• Thumbnail Image: Aquí clickamos la imagen que queremos que se genere en la miniatura donde nos mostrará todas las imagenes cargadas en nuestro artículo. La imagen que se generará tendrá una resolución 50pxx50px con un formato 3:1.
• Otros datos (Contact y Location): Este apartado es opcional para este plugin. Podremos colocar ciertos metadatos que no afectará a la miniatura generada.

Justo después cuando hayamos configurado nuestro plugin o módulo, guardamos y lo probamos cogiendo la URL correspondiente a nuestro artículo y lo pegamos en nuestro muro.. ¡Voilà!

¡Ya estamos listos para compartir nuestros artículos mucho más atractivos por Facebook!

No obstante, si estás en el caso que no estemos utilizando Drupal o WordPress, os dejaré los metadatos necesarios para integrarlos a vuestra página web por si lo estáis programando en HTML o PHP:

<head>
  ...
  <meta property="og:title" content="Título de la miniatura" />
  <meta property="og:description" content="Descripción miniatura" />
  <meta property="og:image" content="http://dominio.com/imagen_fb.jpg" /> 
  <meta property="og:url" content="http://dominio.com" />
</head>

Para obtener más metadatos, os proporciono la web oficial que proporciona todos los metadatos que acepta dicho protocolo.

EXTRA:

Se han dado casos que tras integrar el protocolo Open Graph no se ha generado la miniatura deseada por lo que Facebook ha realizado un herramienta llamada Facebook Debugger para comprobar que los metadatos estén correctos y además darte consejos para mejorarlos.

Esta herramienta está pensada para testear que el título, la descripción y la imagen a mostrar de la página o post que queremos colocar es la correcta.

Facebook Debugger