Blogspot Social

2 comentarios

Siendo “social” una de las palabras que más está de moda (ver “g”-trends), me pregunté ¿porque no hacer más social mi blog? Si bien tiene alguna que otra opción para interactuar, la idea de que sea más amigo de Facebook va creciendo a medida que yo voy conociendo más sobre dicha red social.

Tenemos que empezar obligatoriamente por el bendito protocolo Open Graph. Tal como lo afirma Facebook: “El protocolo abierto gráfico le permite integrar sus páginas Web en el gráfico social. En la actualidad está diseñado para páginas web que representan los perfiles de las cosas del mundo real - las cosas, como películas, equipos deportivos, celebridades y restaurantes. Una vez que sus páginas se convierten en objetos en el gráfico, los usuarios pueden establecer conexiones a sus páginas como lo hacen con las páginas de Facebook.” Así que… empecemos a hacer más “gráfica” nuestra experiencia por este blog. =)

Agregando este código antes de la etiqueta </head> (únicamente en blogger):

<!--FB SOCIAL PLUGINS-->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='YOUR-PAGE-TITLE' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR-FACEBOOK-PAGE-ID' property='fb:page_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
<!--FB SOCIAL PLUGINS-->

Una vez que completamos eso, estaríamos en condiciones de ser más sociales si pasamos la prueba de Facebook; colocando nuestro sitio aquí: http://developers.facebook.com/tools/lint/
Lo que tiene que ocurrir es muy simple, se tienen que interpretar correctamente los datos de tu sitio, es decir, el titulo, la descripción, quien es el administrador, alguna imagen (en este caso el logo de blogger).

Algo importante que me llamó la atención; la propiedad “og:type”. No se vayan a equivocar ahí y le quieran poner “blog” porque lo vieron en la lista oficial de tipos ( http://opengraphprotocol.org/#types) … si si, tenes razón está ahi “Websites –> Blog”. Pero NO!, haceme caso, la unica forma en la que podes poner “blog” es si este metatag esta en el root… pero en este caso va a ser para el sitio completo, entonces es SIEMPRE “article”.

Si pensas que me estoy fumando; cito lo que dice la página de Facebook:

Use article for any URL that represents transient content - such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.

Qué sigue ahora?

  • Agregar el botón LIKE (“Me Gusta”) –> Tutorial para Blogger
  • Agregar un box con tu página
  • Agregar un box con las últimas actividades de los usuarios de facebook
  • Adaptar Facebook Connect con tu blog

Uff… se me ha hecho tarde, espero muy pronto hacer un post sobre éstos puntos que he comentado aquí.

Saludos!

2 comentarios:

  1. Muchas Gracias ... busque este codigo todo un año ... Muchas Gracuas Amigo

    ResponderEliminar
  2. y el tutorial para agregar el like box a mi blogger ???..

    ResponderEliminar

Nota importante: aquellos comentarios que tengan spam (o contenido ofensivo) serán ELIMINADOS; no editados... sino que directamente se los elimina.