Facebook Open Graph: Personaliza la presentación de tu blog en Facebook

Una de las herramientas más interesantes de Facebook para los propietarios de blogs y páginas web que complementa muy bien la integración de sus plugins sociales , es el denominado Protocolo Open Graph, el cual "define la forma en la cual el sitio se presenta dentro de Facebook".

Facebook Open Graph Protocol for Web Site Owners and Developers
Lo que hace el Open Graph es considerar cada página del blog o de la página web como una Página de Facebook, es decir que por ejemplo, esta entrada pasa a hacer parte de las páginas de mi cuenta y por tanto tendrá en Facebook la misma estructura y opciones de una página cualquiera, permitiendo así enviar actualizaciones a los usuarios que les gusta esto (dicese fans), tener su propio Muro e incluso un foro de debate o una galería de imagenes dedicada.

¿Y para que sirve todo esto? En verdad, para muy poco, pero ese poquito es bastante interesante.

Antes que nada, debemos asegurarnos de haber añadido los schemas del protocolo de Facebook Markup Language y del Open Graph al código HTML de nuestros blogs:

xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/"
El el caso de usuarios de Blogger, el código quedaría así justo encima de la etiqueta <head>:

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://opengraphprotocol.org/schema/' xmlns:fb='http://www.facebook.com/2008/fbml'>
Ahora, debemos añadir un boton de Me Gusta de los plugins sociales de Facebook para que se muestre en las entradas individuales.
Mas información: Vagabundia

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'/>
Ahora, cada vez que un lector que tenga cuenta de Facebook y que haya iniciado sesión entre a un post y haga click en Me Gusta -en su muro aparecerá un mensaje como el siguiente:

Open Graph de Facebook para un Blog de Blogger

La gran opción que brinda el Open Graph es la de poder personalizar el modo en el cual aparece ese mensaje en el entorno de Facebook, permitiendo así personalizar entre otros:

El título de la página
El nombre del blog o del sitio
La URL del blog
Una imagen personalizada por cada entrada individual o para todo el blog
La descripción del tipo de contenido que se enlaza

Para ello, Facebook rastrea en el código fuente de la página metaetiquetas que podemos agregar y personalizar según nos apetezca.
Por ejemplo, añadiendo la metaetiqueta con la propiedad og:site_name podemos cambiar el nombre de nuestro sitio.

Open Graph de Facebook para un Blog de Blogger

¿Notan la diferencia?

Hay una gran variedad de metaetiquetas que podemos añadir en nuestras plantillas justo debajo de la etiqueta <head> para indicarle al rastreador de Facebook todas las caracteristicas que queremos resaltar del contenido que le gusta a los lectores, pero en principio podríamos echarle un ojito las siguientes:

1. Título del contenido

<meta property="og:title" content="Facebook Open Graph: ¿Cómo se ve tu blog en Facebook?"/>
2. Tipo de Medio. Posibles valores: blog, website, article. Ver lista completa

<meta property="og:type" content="blog"/>
3. URL del Recurso

<meta property="og:url" content="http://www.pasaralaunacional.com/2010/10/facebook-open-graph-blogs-y-webs.html"/>
4. Imagen Predeterminada

<meta property="og:image" content="http://bit.ly/d8QxtM"/>
5. Nombre del blog

<meta property="og:site_name" content="Blog de la Nacho"/>
6. Descripción del recurso

<meta property="og:description" content="Personaliza la forma en que se ve tu blog en el entorno de Facebook: Blog de la Nacho"/>
En el caso de la etiqueta og:title para Blogger, lo ideal sería utilizar la etiqueta data data:blog.pageName para asegurarnos que en el entorno de Facebook cada post sea mostrado con el título que le hemos definido desde el editor.

<meta expr:content='data:blog.pageName' property='og:title'/>
De allí en adelante las posibilidades por explorar son diversas y variadas.
En nuestro caso hemos llegado a algo como esto:

Facebook Open Graph para el Blog de la Nacho

Url para compartir: http://goo.gl/wkwM
El Blog de la Nacho

comment 37 comentarios

Juan Pablo chevron_right

felipe te pido por favor que me digas el nombre de un preuniversitario para pasar en la unal en 2011-2....no pregunto si es bueno o si es malo hacer un preuniversitario...solo dime el nombre de uno que sea bueno y confiable, o bueno que tu consideres confiable...pues no vivo en bogota y me mudare alla solo a realizarlo para poder pasar...y no te preocupes que no tendras ninguna reponsabilidad. MUCHAS GRACIAS

Anónimo chevron_right

por lo que he leido les fue muy bien en matematicas cosa contraria paso conmigo hasta la pregunta 100 iba re bien me habia parecido facil con relacion a los anteriores examenes que habia visto en internet en el icfes nunca baje de 80 en matematicas por lo que pense que ya estaba muy cerca de pasar pero desafortunadamente solo me quedaba 35 minutos para resolver matematicas y unas cuantas que habia dejado sin responder atras, en la de los dados y el cuadro se me fueron como quince minutos y paila en el icfes casi no preguntan eso de funciones ecuaciones derivadas o geometria analitica cosa que si le pegan mucho en el examen de la unal este fue el acabose me toco responder al azar matematicas no lo podia creer despues que creia que matematicas era mi fuerte por lo que me acuerdo ya la embarre en varias de matematicas ojala esto no afecte mi puntaje final

Anónimo chevron_right

Lo bueno es ya aparece la actualización en mi muro, pero no aparece en el muro de noticias de mis amigos ni en el mio, así no tendría gracia ya que quiero que todos se enteren cuando alguien pulse el botón en alguna de mis entradas. Esa es mi inquietud, sabes que podría estar pasando? Saludos : )

Felipe Calvo chevron_right

:: Daniel Fernández Verifica que Facebook esté rastreando bien tu blog. Ingresa a la herramienta Facebook URL Linter http://developers.facebook.com/tools/lint/ escribiendo la dirección de tu blog o de alguna de tus publicaciones y mira si no marca ningun error. :)

Lucke chevron_right

Hola yo agregue el boton "me gusta" pero tengo el problea de que solo en una entrada puedo hacerle clic, en los demás sale este error:

"Este mensaje incluye contenido bloqueado que anteriormente se denunció como ofensivo o correo no deseado. Ponte en contacto con nosotros si crees que se trata de un error."

comprobalo en mi blog: http://www.locosmuyalpedo.com.ar

Por favor necesito ayuda u.u.

Gracias!!

Felipe Calvo chevron_right

:: He revisado tu codigo del Iframe y de tu plantilla y está bien colocado, no se qué pueda estar saliendo mal. :S
En todo caso prueba lo siguiente:
En el código original para pegar el Iframe, modificalo para que el atributo src quede así: Ver imagen

Lucke chevron_right

Bueno gracias, ahora al menos se puede poner "me gusta" en todos pero sale un nuevo error: La página de http://www.locosmuyalpedo.com.ar/2010/02/una-tarde-lluviosa-al-pedo.html’ no puede ser alcanzada.

y en el muro aparece asi : A Lucas Leonel Francioni le gusta http://www.locosmuyalpedo.com.ar/2010/02/una-tarde-lluviosa-al-pedo.html.’ (obviamente si hago click ahi, blogger me dice que no existe la web)

Lucke chevron_right

o sea, estoy conciente que le puse esto ` en vez de esto ' , es que si pongo esto "'" me desaparecen todas las entradas del blog.

Felipe Calvo chevron_right

:: Acabo de corregir un error que había en el código de la entrada; vuelve a copiar el código del Iframe que inserta el plugin del "Me Gusta" y me cuentas a ver si ya todo sale bien. Saludos.! :)

Lucke chevron_right

Hola OOTRA VEZ GRACIAS (PERDON POR TANTA MOLESTIA) use el nuevo codigo ahora me tira solo el error : La página de http://locosmuyalpedo.com.ar/ no puede ser alcanzada.

Lucke chevron_right

y en los nuevas entradas que creo me sigue apareciendo el error del "Este mensaje incluye contenido bloqueado que anteriormente se denunció como ofensivo o correo no deseado. Ponte en contacto con nosotros si crees que se trata de un error." Lo raro que solo en la entrada ¿Volvemos?¿Volvimos? Anda todo bien xD. Lo demás mal u.u

Anónimo chevron_right

Gracias Felipe! De hecho marcaba cuatro errores, ya los corregí, pero aún así no las publica en el inicio (Noticias) Alguna idea¿?

Te dejo el blog que tiene los botones http://frasesdelaweb.blogspot.com/

Saludos!

Anónimo chevron_right

Un última pregunta, por qué cuando doy clic en el botón automáticamente se crea una página en Fecebook, tengo demasiadas!!

Felipe Calvo chevron_right

:: Lucke Asegurate de escribir en todos los códigos el www. Creo que en la configuración de tu blog via Herramientas para Webmasters seleccionaron como dominio preferido el dominio con el www antepuesto.
Verifica y me cuentas. [Ver Rastreo]

:: Daniel No sabria que decirte, yo lo veo todo bien.
Lo de las paginas por cada entrada que publicas es algo por defecto que no se puede cambiar.

admin chevron_right

Como puedo hacer para que solo aparezca A fulanito le gusta NOMBRE DE LA ENTRADA en mipagina en lugar de NOMBRE DEL BLOG + NOMBRE DE LA ENTRADA, no soy capaz de conseguirlo :(

Felipe Calvo chevron_right

:: Carlos No creo que sea posible y en tu caso, si lo piensas implementar en el blog de las frases de Facebook, lo que hacen generalmente en poner como título de la página (tu blog en este caso) un caracter, un smiley o un texto que incite a los usuarios de Facebook a ver más frases de tu página, por ejemplo:

- A Fulanito le gusta 'Nombre de la Frase' en =D
- A Fulanito le gusta 'Nombre de la Frase' en Ver Más

admin chevron_right

Gracias.
Y como puede hacerse para que se publique en mas recientes y titulares en lugar de en el muro solo?

Felipe Calvo chevron_right

:: Carlos He visto que luego de implementar plugins de Facebook y añadir el protocolo Open Graph salen publicadas en ocasiones esas "mininoticias", mas son aspectos de la interfáz de Facebook sobre los que no hay control.

admin chevron_right

Pero yo creo que he puesto más o menos lo mismo que tú, y cuand hago me gusta en tu página si aparece en ultimas noticias y en la mia no. Supongo que estaré haciendo algo mal no?
http://like-of-facebook.blogspot.com

Felipe Calvo chevron_right

:: En este punto llegamos a cosas que estan fuera de nuestro alcance y no se en que medida tenga que ver en algo la "antiguedad" del sitio, pues el protocolo en mi caso lo he utilizado por más de 6 meses; creo que lo mejor, una vez todo haya sido agregado correctamente, es esperar que el rastreo de Facebook a tu blog haga lo suyo y eventualmente permita una mejor integración de tus blogs en FB.

Panto chevron_right

Hola, muchas gracias por compartir la información.

Es la primera vez que voy a intentar editar el código de mi blog y ando un poco perdido. ¿Dónde debería insertar en el código para blogger el iframe del botón "Me gusta"? Ya he insertado las dos primeras líneas antes de la etiqueta head, pero ahora me queda insertar el botón.

Gracias.

Panto chevron_right

Además, me dejaba otra pregunta. Todas esas metaetiquetas de personalización, ¿dónde debería añadirlas?

Me temo que como empiece a tocar el código hundo la web.

Felipe Calvo chevron_right

:: Almorro Tanto código del Iframe como las metaetiquetas para Facebook los debes insertar desde la Edición HTML marcando la opción de "Expandir Plantillas de Artilugios".

En el caso de las metaetiquetas, las debes añadir justo en la parte superior de la plantilla despues de la etiqueta <head> y antes de la etiqueta <b:skin>

La ubicación del código del Iframe depende del sitio donde lo quieras añadir; podría ser debajo del título del post (como en este blog) pegándolo debajo de un código como este:

<div class='post-header-line-1'>
..aquí pegas el código...

o en el footer de las entradas debajo de un código como este:
<div class='post-footer'>

Eventualmente podrías condicionar el código para que solo se ejecute en las entradas individuales de este modo:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
..aquí pegas el código..
</b:if>

Panto chevron_right

Ok. Gracias.

Las metaetiquetas sirven para el anuncio que se hace en el perfil de facebook, y deben estar relacionadas con las dos primeras líneas que recoges en el artículo (xmlns:og='http://opengraphprotocol.org/schema/' xmlns:fb='http://www.facebook.com/2008/fbml'), cierto?

Para que en lugar de salir una casilla con el número de clics, se recoja un texto como en el ejemplo de vagabundia que enlazas, qué deberíamos hacer?

De momento he introducido tan sólo el botón de "Me gusta", sin utilizar ninguna metaetiqueta. Sale en el pie de la entrada un poco descuadrado del resto de footers. En teoría, tal y cómo lo tengo insertado, sólo me sirve para las entradas individuales, ¿qué diferencia hay con la sugerencia que haces en tu post?

Muchas gracias, Felipe.

Panto chevron_right

Por cierto, tengo dos etiquetas < head > en la plantilla. ¿Debería insertarlas en las dos o es idiferente?

Felipe Calvo chevron_right

:: Una vez hayas colocado los schemas en la parte superior de tu plantilla y el boton de "Me Gusta" pegas las metaetiquetas; estaría bien con añadir las metaetiquetas de
- og:site_name /* Nombre del sitio */
- og:title /* Titulo de cada enrada */
- og:type /* Tipo de recurso, por ejemplo "website" */
- og:image /* La imagen por defecto */

y en el caso de la metaetiqueta del título recuerda ponerla de este modo:
<meta expr:content='data:blog.pageName' property='og:title'/>

Por lo de tener 2 etiquetas head en la plantilla supongo que te refieres a la de apertura <head> y la de cierre </head> y las metaetiquetas las pegas justo en la parte superior de la plantilla luego de la etiqueta head de apertura.

Anónimo chevron_right

Cuando presiono el botón funciona a la perfección, se publica el enlace en el muro normal y como yo quiero, el contador se incrementa como de costumbre, todo está normal.

Pero cuando es alguien diferente a mi, todos los botones tienen sus contadores en 0, y cuando se presiona pareciera que se registrara el conteo, pero luego se echa para atrás y queda como si nada. No se publica nada en ningún muro porque sencillamente no funciona!

Lo más raro es que en algunas entradas si funciona normal, pero en otras tiene el problema que te menciono.

Puedes probarlo tú mismo, haz clic en 'Me gusta' en este post y luego en este otro.

Conclusión: Como administrador funciona, pero como otra cuenta nada de nada.

Estoy desesperado, no hallo qué hacer con esta situación. Agradecería tu ayuda.

Este es mi blog

Saludos! : )

Anónimo chevron_right

Olvida la parte que te mencioné del administrador, en ambos casos no hace nada :(

Felipe Calvo chevron_right

:: Daniel Por lo que veo empleando la herramienta de depuración URL Linter tienes mal condicionadas las metaetiquetas que has añadido a tu blog (y no solo las de Facebook, tambien las de Blogger); puedes ver por ejemplo escribiendo primero en ese formulario la URL de tu blog y luego escribiendo la URL de una entrada como "Red Social" y verás que está arrojando un problema de privacidad.

Si lo deseas, enviame por correo el encabezado de tu blog [ desde <head> hasta <b:skin> ] y miramos el problema.

Panto chevron_right

Felipe, reconozco mi incompetencia. Sigo viendo dos encabezados head en la plantilla. No soy capaz de incorporar las metaetiquetas o de que en lugar del recuadro con el número de clicks, aparezca un texto invitando a clicar.

Un desastre es poco lo que soy.

Anónimo chevron_right

Hola, ya te pasé el dato a tu email.

marrufo chevron_right

Disculpa no logro hacer que, el boton "me gusta", que al darle click, aparesca en el muro asi...a fulanito le gusta (entrada) en (xD), y me sale asi...a fulanito le gusta (entrada) en (url del blog).
Ya puse las metaetiquetas y el opengraph y todo creo yo pero no sale.
No sabes que podria estar pasando, uso blogger.

Gracias salu2

Felipe Calvo chevron_right

:: marrufo ¿Podrías indicarme la URL del blog en el cual estas publicando las frases para examinarlo?

Administrador chevron_right

GENIAL GENIAL Y GENIAL. Lo llevaba buscando un buen tiempo y me ha servido un montón. Muchas Gracias

Diego Alejandro Garcia chevron_right

hay un problema en todo lo que has hecho. tu codigo no reconoce si lo que le estas poniendo es un "home" o si es un "articulo";
en el debugger https://developers.facebook.com:
pon tu url de un post por ejemplo:

http://www.pasaralaunacional.com/2010/10/facebook-open-graph-blogs-y-webs.html#comment-form


supuestamente en el apartado "object properties" deberia decir:

og:type: website

pero esta mal, deberia decir "article" ya que esta url es un post de tu blog. Osea que para todo va a mostrar "website".

Respuesta
Diego Alejandro Garcia call_missed_outgoing

perdon escribi mal... ahi donde dice:


"deberia decir:og:type: website"
quise decir "dice:og:type: website"

Publicar un comentario...

Deje su comentario empleando su ¿Qué es esto? Si utiliza servicios de Google como Gmail, Blogger, Youtube, Google Drive, entre otros, usted ya dispone de una cuenta de Google.
Haciendo click en la opción de 'Notificarme' puedes estar pendiente desde tu correo de las respuestas a tu comentario.

Blog de la Nacho