Menú personalizado de Páginas estáticas (configuración manual)

Banner Superior

Noticias epoint.es - Porque lu único constante son los cambios. Contacte con nosotros

Redes sociales novedadeseninternet.es

miércoles, 4 de abril de 2012

Añadir etiquetas META para protocolo Open Graph de 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.

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 :).

"Si tiene algún proyecto web que le gustaría desarrollar, si quiere anunciarse gratis en nuestra web o solo para conocer las múltiples posibilidades para mejorar su trafico web, contacte con comercial@epoint.es o visite www.epoint.es"

6 comentarios:

  1. Bueno... ante todo muchas gracias por la información, realmente muy valiosa. En primera medida quiero dejar claro que no soy muy experto en esto del HTML y sus variantes; pero leo mucho.

    Para lo cual tengo una duda... hace algunos días implemente las etiquetas meta tag en mi blog para ser mejor optimizadas por los buscadores como yahoo, google y bin. la pregunta concreta es: ¿Debo reemplazar esas etiquetas por estas de open graph o simplemente adiciono al código estas etiquetas? Muchas gracias...

    ResponderEliminar
    Respuestas
    1. Hola Carlos,
      Las meta open graph las añades, no son un sustitutivo de ninguna otra etiqueta. O sea, incluyes las metas description, keywords, title etc... normales y también las metas og:title, og:description, og:sitename etc...
      Gracias a ti Carlos por tu interés.

      Eliminar
  2. Hola.

    ¿Cómo hago para modificar el tamaño de la miniatura que muestra? Coloque estas etiquetas pero ahora la imagen que muestra es de 72x, y la distorciona. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Pepe,
      Dónde exactamente te la muestra así? Al abrir la cajita de facebook en el botón "me gusta" o en la página misma del facebook al haber compartido el post?
      Por cierto, enhorabuena por la selección mejicana, ya tenéis un nuevo Jorge Campos!

      Eliminar
  3. Hola, tengo un problema con Blogger y Facebook y es que al publicar en FB las url's de Blogger no me aparecen los títulos de las entradas... intenté agregar lo que comentas pero sigo sin poder resolver el problema ¿podrías ayudarme? el blog se encuentra en www.educandoagala.com

    ResponderEliminar
  4. Hola, quiero mostrar una imagen diferente en cada artículo, la que yo señale, no algo aleatorio, ni tampoco la primera por defecto. ¿Cómo se haría?.

    ResponderEliminar

Aporta, opina, pregunta, contamos contigo.