El Protocolo Open Graph permite a las páginas web integrarse en la gráfica social. Por ejemplo, si se incluyen las etiquetas de apertura de gráficos, tendrá la capacidad de tratar a su misma página como página de Facebook. Además, si ha agregado el Botón Plus One para Blogger, también puede ayudarte para obtener su página integrada en el gráfico social de Google +.
Para activarlo es necesario agregar etiquetas <meta>. En este tutorial te diré cómo agregar estas meta tags a Blogger para que Facebook, Google + y otros sitios de redes sociales pueden recoger la información estructurada sobre su blog y páginas de entrada.
Antes de empezar, vamos a discutir sobre qué Etiquetas META importantes deben o pueden ser incluídas en Blogger.
og:title
<meta expr:content='data:blog.pageName' property='og:title'/>
Titulo del Objeto, por ejemplo: El titulo de la página o del post.
og:type
<meta content='blog' property='og:type'/>
Tipo de Objeto, por ejemplo: "Blog" para la página principal y "article" para las páginas estáticas y posts. Este en concreto es para la página principal del blog.
<meta content='article' property='og:type'/>
Y este para las páginas estaticas y posts.
og:url
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
La URL de la página donde nos encontramos.
og:image
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='http://www.logo-de-tu-blog.jpg' property='og:image'/>
</b:if>
Hace poco tiempo, Blogger ofrece la posibilidad de incluir una miniatura del post en concreto donde queramos (Si previamente hemos incluido al menos una imagen en el post), con 'data:blog.postImageThumbnailUrl' tenemos una miniatura del post de 72px x 72px. Con esto incluimos una imagen en concreto para cada post. Si piensas que igual el botón "Me gusta" funciona perfectamente y que muestra las imágenes, ya que se agrega al mensaje, entonces no es necesario añadir esta etiqueta. La imagen para esta etiqueta debe tener mas que 50px x 50px, con una relación máxima de aspecto de 3:1 y debe estar en formato JPEG, GIF o PNG.
og:site_name
<meta content='El nombre del blog' property='og:site_name'/>
El nombre del blog, solo tendrás que sustituir "El nombre del blog" en la etiqueta.
og:description
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/><b:else/><meta content='Descripción personalizada' name='og:description'/></b:if>
Descripción del objeto, para mostrarlo correctamente, es necesario habilitar la opción de metadatos de Blogger, en la nueva vista de Blogger ir a Configuración -> Preferencias de búsqueda -> Etiquetas Meta y habilitar la opción indicando una metadescripción general para el blog. Luego en cada edición de posts, en la columna de la derecha, ir a Descripción de búsqueda e indicar una descripción para cada posts que escribas.
fb:admins
<meta content='tu-ID-de-perfil-de-Facebook' property='fb:admins'/>
Es opcional, funciona para el Facebook Open Graph, puedes elegir si incluyes esta etiqueta meta o no. Solo tendrás que sustituir "tu-ID-de-perfil-de-Facebook" por el Número de identificación de tu perfil de Facebook (la manera más fácil de conseguirlo en escribir esta URL en tu navegador (después de haberse logueado en Facebook) https://graph.facebook.com/
tuNombreDeUsuario). Esta meta sirve más para moderar o administrar los comentarios del plugin "Facebook Comments Plugin".
fb:app_id
<meta content='ID-de-la-aplicación-Facebook' property='fb:app_id'/>
Esta también es opcional, ya que es necesario si te has inscrito para aplicaciones de Facebook. Reemplace "ID-de-la-aplicación-Facebook" con el identificador de la aplicación dada por Facebook. También sirve para moderar o administrar los comentarios del plugin "Facebook Comments Plugin" y también para configurar los permisos de publicación de los comentarios, para saber más ver
http://developers.facebook.com/docs/reference/plugins/comments/. Si queréis mas información sobre el plugin de comentarios de Facebook y su configuración, dejarme un comentario (por no adentrarme en otro tema ahora... :P).
Cómo incluir las etiquetas <meta> en Blogger
Paso 1: Ir a la pantalla principal de Blogger, seleccionar el blog en el cual queremos incluir las etiquetas e ir a Plantilla (Diseño en la vista anterior de Blogger) -> Edición de HTML.
Paso 2: Buscar en la etiqueta <html> el atributo marcado en negrita:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Después de esto, agregar este Namespace del protocolo Open Graph:
xmlns:og='http://ogp.me/ns#'
Quedará así:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>
Si ya ha añadido el Namespace para el XFBML Facebook anteriormente, la etiqueta completa se verá así:
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#' xmlns:og='http://ogp.me/ns#'>
Paso 3: Buscar la etiqueta <head> y debajo de ella incluir lo siguiente:
<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='http://www.el-logo-de-tu-blog.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/><b:else/><meta content='Descripción personalizada en caso de no haber indicado la metadescripión del sitio' property='og:description'/>
</b:if>
<meta content='el-id-de-la-aplicación-Facebook' property='fb:app_id'/>
<meta content='tu-id-de-perfil-de-Facebook' property='fb:admins'/>
Para usuarios avanzados
Se crea una cierta controversia sobre cuándo usar la propiedad "blog" de og:type, ya que como lo indica en Facebook, debe ser usado en la raíz de un dominio y el "article" se debe utilizar cuando se representa un artículo de noticias, blog, fotos, video, etc . Así que las etiquetas META que se pueden agregar son (con precaución):
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<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='http://www.el-logo-de-tu-blog.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/><b:else/><meta content='Descripción personalizada en caso de no haber indicado la metadescripión del sitio' property='og:description'/>
</b:if>
<meta content='ID-de-tu-aplicación-Facebook' property='fb:app_id'/>
<meta content='ID-de-tu-perfil-Facebook' property='fb:admins'/>
Paso 4: Guardar las modificaciones de la plantilla.
Verificar si están correctas las <meta> que has introducido en Blogger en este enlace
http://developers.facebook.com/tools/debug.
Lo tengo hecho y funcionando en este blog y en otros, para cualquier duda, dejar un comentario y si os ha servido de ayuda este tutorial, Twittear o "Me gustear" este post o este blog :).
