JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Controlar la vista previa de Facebook (un par de trucos y una extensión)

Una quinta parte de la población mundial está en Facebook hoy en día. Según datos de la propia empresa, a finales de este año 2014 tienen:

  • 1.350 millones de usuarios activos mensuales en la web (es decir, que entran al menos una vez al mes a la aplicación de esta red social).
  • 1.120 millones de usuarios activos mensuales a través del móvil
  • 864 millones de usuarios activos diarios en promedio.

Las cifras son apabullantes y dan una idea de la importancia que tiene esta red social, más allá de la opinión que nos merezca y de si queremos o no estar en ella.

Por eso es muy importante que nuestras páginas y nuestras aplicaciones web sean fácilmente "compartibles" en esta red social. Es decir, cuando alguien desee compartir una de nuestras páginas en Facebook que estemos seguros de que se va a ver lo que nosotros queremos, y no lo que determine automáticamente un algoritmo.

Etiquetas del grafo social

Por defecto, en una página normal y corriente, sin un marcado especial, lo que hace Google a la hora de compartir es detectar las imágenes que hay en la página, poner el título de la misma y sacar automáticamente una descripción a partir del texto inicial de ésta.

El mayor problema de dejar esto al azar se produce con las imágenes, ya que la mayor parte de la gente no se va a molestar probablemente en elegir la correcta y además muchas veces no se detectan todas o la que nos interesa promover está puesta como fondo o se establece mediante estilos CSS y no con un elemento <img>.

Por ello es conveniente tomar el control sobre lo que se comparte, y para ello Facebook ofrece una serie de etiquetas especiales que podemos añadir a nuestra página y que sirven precisamente para eso.

Estas etiquetas se implementan en forma de elementos <meta> en la cabecera de la página, siguiendo la estela de las tradiciones meta: "title", "description", etc... Sus nombres en este caso se preceden con el prefijo "og:", que deriva de Open Graph.

Open Graph es un protocolo que permite que cualquier página web se convierta en un objeto "rico" dentro del grafo social, de modo que pueda ofrecer la misma funcionalidad que cualquier otro objeto en Facebook.

Esta es la teoría y en el enlace anterior encontrarás mucha información. En la práctica lo que vamos a necesitar es compartir las páginas tal y como comentaba. Para ello debemos implementar las siguientes etiquetas básicas:

  • og:title:el título que queremos que aparezca por defecto en la vista previa al compartir en Facebook. Y digo por defecto porque el usuario, si quiere, puede cambiarlo, al igual que la descripción.
  • og:site-name: el nombre del sitio web al que pertenece la página actual. No es la dirección, sino el nombre corto que le asignamos.
  • og:url: la dirección del recurso que se está compartiendo, esto es, el URL de la página actual.
  • og:description: la descripción corta inicial que queremos ofrecer al compartir.
  • og:image: el elemento más importante puesto que nos permite establecer un URL con una imagen que deseamos que se use como vista previa. Si ofrecemos este elemento ya no le da la opción al usuario de escoger entre varias imágenes: usa esta directamente. El usuario puede optar por quitarla, eso sí.
  • og:type: el tipo de objeto que estamos compartiendo. Por defecto, si no indicamos nada, utiliza "website", pero existen muchos otros tipos y dependiendo del tipo de página/objeto que compartamos pueden ser interesantes (por ejemplo, música o vídeo, pudiendo ser muy específicos).

Como digo, se trata de simples etiquetas <meta> con estos nombres, así que se incorporan en la cabecera con una sintaxis como esta:

<meta property="og:title" content="La API de visibilidad de HTML5 - Cómo detectar si una página está visible o no - JASoft.org" />

Si te fijas en el código fuente de este blog, en cada artículo se introducen estas etiquetas, las cuales se varían para cada artículo o dependiendo de la zona, además de incluir otras similares para otras redes sociales (como Twitter o Google+):

<meta property="og:title" content="La API de visibilidad de HTML5 - Cómo detectar si una página está visible o no - JASoft.org" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="JASoft.org" />
<meta property="og:url" content="http://www.jasoft.org/blog/post/la-api-de-visibilidad-de-html5-como-detectar-si-una-pagina-esta-visible-o-no.aspx" />
<meta property="og:description" content="Una cuesti&oacute;n peliaguda de resolver por medios tradicionales es la que encabeza este art&iacute;culo:  &iquest;C&oacute;mo puedo detectar si el usuario actual tiene nuestra p&aacute;gina oculta " />
<meta name="og:image" content="http://www.jasoft.org/Blog/image.axd?picture=Hombre-Invisible.jpg" />

De esta forma, a la hora de compartir el artículo en Facebook, obtenemos los siguiente en la vista previa:

Facebook-Compartir-Grafo-Social

Como vemos, cada elemento de los anteriores está presente, y aunque es posible cambiar el título y la descripción, en el caso de la fotografía no se da la opción de cambiarla, solo podrán quitarla:

Facebook-Compartir-Grafo-Social-Explicado

Es realmente sencillo.

Caché y posibles problemas

La primera vez que alguien comparte en Facebook una determinada página, identificada por su URL único, el sistema hace una caché de ese objeto del grafo social, de modo que en las siguientes ocasiones utiliza la misma composición.

Esto puede suponer un problema en diversas circunstancias. Por ejemplo, si nos hemos equivocado en el título, la imagen o la descripción y queremos corregirlo. O si estamos haciendo pruebas en un desarrollo y queremos ir probando nuevas versiones de las etiquetas puede llegar a ser muy frustrante el cambiarlas pero ver que no hay cambios cuando intentamos compartirlo.

Para ayudarnos con este problema existe un recurso proporcionado por el propio Facebook, aunque no es muy conocido. Se trata del depurador de objetos del grafo social.

En éste podemos introducir una dirección de Internet (lo más habitual), un testigo de acceso o un identificador del grafo para poder ver cómo lo interpreta la red social

Facebook-Debug-1

Al pulsar en "debug" la página nos da información detallada sobre cómo ha sido convertido en un objeto del grafo social:

Facebook-Debug-2
Pulsa para aumentar

Por ejemplo, en este caso me está diciendo que la página se analizó por primera vez hace 10 días a las 9:50 de la mañana. Si seguimos bajando nos informe de cómo interpreta exactamente las etiquetas:

Facebook-Debug-3
Pulsa para aumentar

De este modo se ven las etiquetas que ha detectado y los valores que ha interpretado en éstas. También nos muestra la vista previa inicial del elemento:

Facebook-Debug-4
Pulsa para aumentar

pudiendo verlo en acción (con el enlace justo debajo) y obtener la información sobre el objeto en formato JSON (Graph API) y el HTML exactamente utilizado para generarlo.

De todos modos lo más interesante de esta página es el botón de la derecha que está arriba de todo: "Fetch new scrape information":

Facebook-Debug-5

Gracias a éste podemos forzar a que Facebook vuelva a procesar la URL y obtenga las nuevas etiquetas y valores. Algo realmente útil en las situaciones descritas antes.

Limitaciones: existen algunas limitaciones en cuánto a modificar el objeto del grafo social asociado a un URL. A partir de que un objeto compartido obtiene 50 "Me gusta" en la red social, sus datos son ya permanentes y no puedes cambiarlos, así que lo anterior solo vale para objetos que todavía no han sido compartidos en un círculo amplio. Si además llega a 10.000 "ME gusta" (¡ojalá!) entonces el tipo de objeto tampoco puede cambiarse más.

Incluirlos en tu blog automáticamente

Por suerte para los principales sistemas de blogging del mercado existen cantidad de plugins por ahí que te permiten añadir las cabeceras sociales de Facebook y otras redes automáticamente.

En el caso concreto de BlogEngine, que es el sistema que uso yo en este blog, lo que había era una única extensión (que ahora creo que está "desaparecida en combate") y que era bastante limitada creada por la gente de AM22 Tech. Así que basándome en ésta construí una mejor que mete todas las cabeceras para facilitar compartir los artículos y áginas del blog en Facebook, Twitter y Google+.

Se llama SocialHeaders y la puedes descargar desde aquí (ZIP-2,29KB).

Para instalarlo lo único que hay que hacer es copiar el archivo .cs que lleva dentro a la carpeta "App_Code/Extensions" de tu instalación de BlogEngine. A partir de ese momento se compilará automáticamente y te aparecerá en la pestaña "Apariencia" de tu BlogEngine. Si te aparece deshabilitado búscalo en el apartado "Disables extensions" y escoge "Habilitar".

A partir de que lo habilites te meterá automáticamente las etiquetas sociales para todas las páginas y posts del blog. Como imagen usará la primera que hayas metido en el artículo o página, así que procura que la primera que metas sea bonita :-)

¡Espero que te sea útil!

José Manuel Alarcón José Manuel Alarcón
Fundador y director de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (2) -

Hola.
Me siento bastante frustrada porque no consigo que aparezca una imagen cuando comparto mi entrada de blogger en Fb.
Lo he intentado todo.
Podrías ayudarme?
Muchas gracias.

Responder

José Manuel Alarcón

Hola Ana:

No he usado nunca Blogger, así que no te puedo ayudar mucho. Por lo que he leído las plantillas de Blogger se pueden personalizar usando etiquetas especiales. De hecho al parecer hace un tiempo tuvieron precisamente un problema con la compartición en FB que no se veía la descripción correcta. En este post te enseñan a arreglarlo:

www.techstext.com/fix-blogger-facebook-thumbnail-description-problem

Quizá te de pistas sobre cómo solucionar tu problema concreto.

Ssaludos.

Responder

Agregar comentario