Esta semana toca nueva entrada técnica y de nuevo le toca el turno a facebook. Hace tiempo escribí un post sobre 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'>
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.
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!
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 == "item"'>
<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 != ""'>
<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
https://www.facebook.com/fbUserName
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!
Tú que sabes manejar todo bien, porque a mí todo me suena a chino jejeje
ResponderEliminarJejeje, parece más difícil de lo que es :)
Eliminarbuffff, no he entendido nada, y lo del post anterior no me funciona.
EliminarQuiero que me salga alguna imagen de la entrada pero me sale una de la columna lateral del blog........me desesperoooooo SOS
PD: muy chulo el blog
cómo mola cuando vienes con soluciones técnicas maravillosas
ResponderEliminarun beso
Me alegro de que te guste jejeje
EliminarMadredelamorrrrrrrrrr me acabas de indigestar mis chococrispis con taantísimo código ¡yo tengo una mejor solución! LE LLAMO A LAURA y ella tiene la solución perfecta :P si quieres te paso su número de móvil y su presu y mira no veas lo majeta que es jajajaja un besote maifriend
ResponderEliminarJajajaja ya sabes que yo te lo hago por amor x-)
EliminarUffffff, demasiados datos técnicos para mies pobrecitas y fritas neuronas, pero ¡¡¡gracias por compartir!!!
ResponderEliminarNO ME FUNCIONA, PEGUE EL CODIGO DEBAJO DE EL HEAD Y SIEMPRE ME APARECE CON LA MISMA IMAGEN SIN IMPORTAR CUAL SEA LA ENTRADA QUE HAGO
ResponderEliminarPREGUNTA: DONDE TENGO QUE INSERTAR EL PRIMER CODIGO QUE APARECE EN ROSA, POR QUE NO TENGO NI IDEA GRAXXX POR FA AYUDAME
ResponderEliminar@Laura M. sabrías decirme porque cuando yo comparto un enlace en mi pagina me aparece la imagen correcta pero cuando alguien, le da a compartir mi publicación les aparece otra imagen como cabecera ???
ResponderEliminarGracias: Tengo una duda. En mi blog, ocurre que algunos posts como el que pondré ahora, llevan una imagen por medio de html que no la he subido yo, sino que corresponde a un post que se encuentra en otro blog. En estos casos, la imagen que asume no es la que realmente quiero. He probado a cambiar el data:blog.postImageThumbnailUrl por el correspondiente al primer snipped, qeu antes tenia blogger con la imagen de 70, pero tampoco funciona. ¿alguna idea de como solucioanrlo?.
ResponderEliminarGracias y de nuevo ¡enhora buena por estos posts!
Este es el posts ejemplo
http://cronicamagazinecultural.blogspot.com.es/2014/06/la-gossa-sorda-publicara-el-seu-nou.html
Muchas Gracias me a servido :)
ResponderEliminarPOR FAVOR. MEJOR HAZ UN TUTORIAL EN YOTUBE Y NOS COMPARTES EL VIDEO. PORQUE NO ENTENDI. TENGO EL MISMO PROBLEMA!!! :(
ResponderEliminarMuchas gracias Laura!
ResponderEliminarme ha venido genial, acabo de hacer una web y justo tenía este problema con el facebook al compartirla.
Un abrazo ;)
Gran aporte!! Es que esto de Facebook y su idioma a veces es un sin Dios.
ResponderEliminarUn artículo muy útil y claro. Enhorabuena, en mi caso me ha servido perfectamente.
ResponderEliminarwww.breoganprego.es
Hola, esta pregunta que voy a hacer no se relaciona con lo q publicaste, pero quiesiera saber como puedo vincular mi blog de blogger con facebook?
ResponderEliminar