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".
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:
El el caso de usuarios de Blogger, el código quedaría así justo encima de la etiqueta <head>:
Ahora, debemos añadir un boton de
de los plugins sociales de Facebook para que se muestre en las entradas individuales.
Mas información: Vagabundia
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 -en su muro aparecerá un mensaje como el siguiente:
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.
¿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
2. Tipo de Medio. Posibles valores: blog, website, article. Ver lista completa
3. URL del Recurso
4. Imagen Predeterminada
5. Nombre del blog
6. Descripción del recurso
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.
De allí en adelante las posibilidades por explorar son diversas y variadas.
En nuestro caso hemos llegado a algo como esto:
Url para compartir: http://goo.gl/wkwM
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
de los plugins sociales de Facebook para que se muestre en las entradas individuales.Mas información: Vagabundia
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=450&height=60&action=like&font=tahoma&colorscheme=light"' 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
-en su muro aparecerá un mensaje como el siguiente: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.
¿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:
Url para compartir: http://goo.gl/wkwM
|
Publicado por
Felipe Calvo
Ingeniero Industrial y Magíster en Estadística de la Universidad Nacional de Colombia. Consultor en políticas públicas y docente universitario. Conoce más de mi trabajo. Instagram: Felipe CalvoTwitter: @feliperspicuo |
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
Me gusta en cuanto pueda hago la prueba ;)
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
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 : )
:: 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. :)
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!!
:: 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
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)
o sea, estoy conciente que le puse esto ` en vez de esto ' , es que si pongo esto "'" me desaparecen todas las entradas del blog.
:: 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.! :)
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.
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
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!
Un última pregunta, por qué cuando doy clic en el botón automáticamente se crea una página en Fecebook, tengo demasiadas!!
:: 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.
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 :(
:: 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
Gracias.
Y como puede hacerse para que se publique en mas recientes y titulares en lugar de en el muro solo?
:: 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.
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
:: 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.
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.
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.
:: 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 == "item"'>
..aquí pegas el código..
</b:if>
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.
Por cierto, tengo dos etiquetas < head > en la plantilla. ¿Debería insertarlas en las dos o es idiferente?
:: 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.
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! : )
Olvida la parte que te mencioné del administrador, en ambos casos no hace nada :(
:: 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.
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.
Hola, ya te pasé el dato a tu email.
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
:: marrufo ¿Podrías indicarme la URL del blog en el cual estas publicando las frases para examinarlo?
GENIAL GENIAL Y GENIAL. Lo llevaba buscando un buen tiempo y me ha servido un montón. Muchas Gracias
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".
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.