Son muchas las ocasiones en los que aquellos que administren un blog o una web, se habrán dado cuenta (tanto por observación propia como por las quejas recibidas de los usuarios/visitantes de la web o blog) que al compartir una entrada por facebook, la imagen representativa que aparece no tiene nada que ver con la de la entrada, o dicho de otra forma, que al compartir una entrada/artículo la imagen que sale es una imagen aleatoria, que en la mayoria de los casos no se corresponde con la de la entrada/artículo en cuestión.
Cuando nosotros, como administradores, colocamos en nuestro blog o web los botones de redes sociales (facebook, en el caso que nos ocupa) para que cualquier visitante pueda compartir un determinado artículo, lo que estamos haciendo es permitir a cualquier página web tener la misma funcionalidad que una página de Facebook. Para lograr esto, Facebook creó OGP (Open Graph Protocol), o sea, un protocolo creado con la finalidad de compartir enlaces de forma eficiente, y además, muchas de las características ofrecidas por OGP también son reconocidas, o sea, que funcionan, en Google+ y en Twitter.
¿Cómo funciona OGP?, pues básicamente se trata de una serie de "meta-datos" que se incluyen en la cabecera (head) del código fuente de la web o blog que administramos. Con estos "meta-datos" podemos seleccionar un conjunto de atributos del objeto a compartir: título, tipo de contenido, url, imagen, audio, vídeo... entre otras cosas, aunque dentro de estros atributos ofrecidos por el protocolo OGP, sólo tres son indispensables: og:type, og:image y og:url.
Un ejemplo de cómo quedaría el código fuente con estos "meta-datos" incluidos dentro de la cabecera (head) sería:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Si queréis saber más sobre el protocolo OGP y el conjunto de "meta-datos" que puede utilizar y cómo utilizarlo, podéis consultar una completa documentación en su sitio web oficial.
Bien, hasta aquí la teoría, el saber un poco cómo se comparten las entradas de nuestra web, y además, para el caso de administradores un poquito avanzados, cómo incluirlos en el código fuente, pero ¿cómo podemos hacer esto mismo sin necesidad de tocar directamente el código fuente?, pues bien, deciros que normalmente, sobre todo en el caso y objetivo principal de este artículo, que es el de compartir por Facebook cualquier artículo o entrada de nuestro portal Joomla (que es la situación de los centros educativos de Extremadura, tanto de primaria como de secundaria) colocando su imagen adecuada, existen plugins que con simplemente instalarlos, nos facilitan esta labor, o sea, la de insertar estos "meta-datos" tanto en el código fuente de la cabecera de nuestro portal web como dentro del código fuente de cada artículo que deseamos compartir.
Cómo he dicho, en Joomla podemos encontrar varios plugins para facilitar esta labor, como podéis comprobar en este enlace. Pero igualmente, existen otros para el caso de blogs creados por Wordpress, por ejemplo.
Siguiendo con el caso que nos ocupa, o sea, compartir artículos en Facebook de nuestro portal Joomla, de forma que se obtenga la imagen adecuada y no una aleatoria, podemos instalar uno de estos plugins, y más concrétamente uno que sea libre o que tenga una opción de descarga libre (en este último caso suele coincidir con una versión reducida o 'capada' del plugin, pero que puede ser suficiente para lo que nosotros queremos, como ocurre con éste). Por ejemplo, podemos descargarnos el plugin: "Simple facebook meta" (compatible con la versión Joomla 2.5 y 3.x).
Una vez descargado el plugin, lo instalamos desde la parte de administrador del portal: "Extensiones->Gestor de Extensiones". Una vez llegados a este punto, lo único que tenemos que hacer es decirle donde está en nuestro ordenador el fichero con el plugin que nos hemos descargado anteriormente, y pulsar sobre el botón de "Subir e instalar". El siguiente paso es activar/habilitar dicho plugin, para ello nos vamos a "Extensiones->Gestor de Plugins", y buscamos el que acabos de instalar: "Simple Facebook Meta" y lo activamos haciendo clic sobre su "Estado", y ya lo tenemos todo. A partir de ahora, en cada entrada que creemos en nuestro portal, al compartirla en facebook nos saldrá con la imagen correcta.
Subir e instalar el plugin
Activar el plugin
Nota: Facebook recomienda para su correcta visualización a la hora de compartir un determinado artículo/entrada, un tamaño de imagen de 200x200 pixels y a ser posible que la imagen sea cuadrada (igual ancho que alto).
Resumiendo: En muchos de nuestros portales Joomla de nuestros centros, ya tendremos un plugin o un plugin y un módulo instalado (por ejemplo ÉSTE que ya explicamos en este blog, o cualquier otro como puede ser el "ITPSocial Buttons", o cualquiera de esta lista), donde se visualizarán una serie de botones de redes sociales (configurables para poner/quitar los que nos interesen) para poder compartir nuestros artículos o nuestro portal, pero ocurre que en la mayoría de los casos, al compartir algo por facebook, la imagen que nos sale es una imagen aleatoria que no se corresponde con la imagen del artículo que queremos compartir. Para subsanar esto, tendremos que instalar otro plugin (o también se podría hacer manualmente, manipulando el código fuente de nuestro portal o blog), pero en este caso será un plugin totalmente transparente al usuario o visitante de nuestro portal Joomla, ya que el plugin no visualiza nada en el frontend de nuestro portal, no veremos nada nuevo, porque lo único que hace es incrustar los "meta-datos" adecuados asociados a la entrada a compartir, en el código fuente de nuestro portal o de los artículos.
Una vez instalado nuestro plugin correctamente, es recomendable utilizar la herramienta de debug de facebook (sólo hay que introducir el sitio de la página web y pulsar sobre el botón 'Debug'), para ver posibles errores y sobre todo limpiar la caché de facebook, y ya de paso, podemos también limpiar la caché de nuestro navegador.
Por último, y si después de haber hecho todo lo anterior, hay alguna entrada en la que al compartirla por facebook, no aparece con la imagen correcta, tendremos que revisar esa imagen y ver su tamaño, su tipo de extensión, etc...
Veamos un ejemplo. En la siguiente imagen se muestra un extracto del portal del CPR de Castuera, y al pulsar sobre el botón de "compartir en facebook", del artículo enmarcado en rojo, vemos que nos aparece la imagen adecuada:
Anexo: En el caso de un blog de blogger, para compartir el blog con una imagen fija, o para compartir cualquier entrada del blog con la primera imagen del artículo, recomiendo leer este artículo.
