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.
Exelente amigo, me ha servido de mucho, pero creo que sigo con el problema, me podrías apoyar este es el sitio luisarmandomelgar.mx , instale el plugin pero me sigue sin reconocer la imagen correcta , cargo las imagenes desde "Opciones de imagenes y enlaces"
ResponderEliminarPerdona que no te contestara antes, pero lo único que puedo decir/recomendar es lo que ya pone en este artículo, es decir, que una vez que has instalado el plugin, "limpies la caché de facebook", con la herramienta que facebook pone a tu disposición y donde únicamente tendrás que introducir para la cuenta de facebook que estás tratando, la URL de la página en cuestión y pulsar sobre "Debur" (esto lo puedes hacer aquí: https://developers.facebook.com/tools/debug/ ) y te dirá también, al margen de limpiar la caché de facebook posibles errores.
ResponderEliminarPor otro lado también debes tener en cuenta que: "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 o lo más parecido)" porque imágenes rectangulares seguro que no te las va a coger. Por otro lado, también he detectado problemas con imágenes con formatos distintos al 'jpg', es decir, que con imágenes en 'png' por ejemplo, también he tenido problemas, por eso te recomiendo:
1. Limpiar la cache de tu página web para empezar, utilizando la herramienta que facebook pone a tu disposición.
2. Intentar siempre colocar una imagen con un alto-ancho parecido, lo más similar posible.
3. Utilizar en la medida de lo posible, formato 'jpg'...
Un saludo...
igual me pasa ami en www.zonalternativa.com.ve
ResponderEliminarPrueba los 3 pasos que he puesto en el comentario anterior, o sea:
Eliminar1. Limpiar la cache de tu página web para empezar, utilizando la herramienta que facebook pone a tu disposición.
2. Intentar siempre colocar una imagen con un alto-ancho parecido, lo más similar posible.
3. Utilizar en la medida de lo posible, formato 'jpg'...
Por lo que he visto en tu web, las imágenes de cabecera de los artículos son muy grandes, así que puede ser eso una de las razones...
Estuve mirando el tema y la verdad que a mi no me funciono nada de eso, en cuanto a las imágenes no se pueden poner todas de ese tamaño en la web, estaría limitando la visualización del portal, con o sin el plugin no da pie con bola los artículos con las imágenes, se muestran siempre las mismas o elige de otros artículos al azar, en verdad que desde que deje la versión 1.5 comenzaron todo tipo de problemas, estoy con 2.5.28 pero ni loco paso a la 3 porque es peor, cada modulo, componente p plugin que se instale aparece un nuevo error, por ejemplo tengo también problemas con los artículos destacados que no se pueden posicionar, posiciona los artículos de la categoría que se le da la gana, en fin, estoy empezando a mirar wordpress que por lo que leo es mucho mas practico para los que no son programadores y brinda la misma utilidad prácticamente. Saludos.
ResponderEliminar