Diseño web - Más información
04 abr

Añadir etiquetas META Open Graph Protocol de Facebook en Blogger

Escrito por Pedro Cordeiro en . Publicado en Redes Sociales

OpenGraph Facebook en Blogger

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 != &quot;&quot;'> <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 == &quot;item&quot;'>
<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 != &quot;&quot;'>
<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 != &quot;item&quot;'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <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 != &quot;&quot;'> <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.

para cualquier duda, dejar un comentario y si os ha servido de ayuda este tutorial, Twittear o “Me gustear” este post o este blog :).

¿A qué estás esperando?

Etiquetas: , , , ,

Trackback desde su página web.

Sin publicaciones relacionadas.

" Servicios epoint.es: Diseño Web | CRM | Marketing online | Casos de éxito
Hacemos rentable tu negocio online. Consúltenos "

Responsable del desarrollo de proyectos web. Diseñador Gráfico y web. Técnico en Joomla!, Wordpress, Typo3 y Blogger. Social media web integrator. Google Maps integrator. Programador HTML5 y CSS3. Adobe Photoshop Professional.

Comentários (4)

  • Ramon

    |

    Interesante Gracias

    Responder

  • diego

    |

    hola pedro, que debo poner en el argumento que esta en “article”(que esta en nefgrita) de esta linea:

    que debo poner? o debo dejarlo asi?
    porque nada aclaras que hay que poner alli.

    espero tu respuesta
    saludos

    Responder

    • Pedro Cordeiro

      |

      Hola diego, la meta content=’blog’ property=’og:type’ es para la página inicial del blog (home) y la meta content=’article’ property=’og:type’ es para las demás páginas del blog.
      En tu comentario no ha salido la línea en la que tienes la duda. Si lo que dije no te lo ha solucionado, intenta hacer que salga la linea de tu duda escribiéndola como he escrito aquí las dos metas.

      Un saludo y gracias por tu comentario.

      Responder

Déjenos un comentário

He leído y acepto la política de privacidad

Featuring Recent Posts WordPress Widget development by YD

Sin publicaciones relacionadas.

Close