my github
english | español
Waldo Urribarri HOME PROJECTS ABOUT ME


Utiliza Open Graph E Insights De Facebook En Tu Página Web: Parte I

ogp logo

Open graph es un protocolo que te ayudará a "integrar" tu página web con Facebook, permitiendote hacer Like, comentar o subscribirte a una URL. Para una lista completa de Plugins sociales puedes hacer click aquí. Utilizando Facebook Insights podrás ver estadísticas por fecha de cuantos Likes o comentarios tienes.

Si les digo la verdad, pienso que todavía no se como utilizarlo completamente, pero esta "guía" de dos partes te puede ayudar con lo básico. Esto te mostrará cómo personalizar la información que será mostrada al compartir en tu Wall una dirección de tu web, y cómo colocar un botón de Like y una caja de comentarios.

Lo primero que debes saber es que para que todo funcion necesitarás utilizar estas metatags en la sección HEAD de tu página (el ejemplo utilizado eswaldou.com así que tendrás que cambiarlo acordemente.

<meta property="fb:admins" content="815916987" />
<meta property="og:title" content="waldou.com" />
<meta property="og:description" content="Personal blog and sandbox of Waldo Urribarri" />
<meta property="og:url" content="http://www.waldou.com/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.waldou.com/images/waldou.jpg"/>

Ok... Algunos de estos datos serán bastante fáciles de llenar.

- fb:admins: El id de las personas que pueden ver los Insights de tu página. Si te quieres incluir a tu mismo, copia y pega esta dirección en tu explorador utilizando tu nombre de usuario de Facebook y utiliza el id que te muestran: http://graph.facebook.com/TUNOMBREDEUSUARIO . Puedes utilizar multiples tags fb:admins. Este tag sólo será útil cuando agregues tu página a Facebook Insights.

- og:title: El título que será mostrado cuando alguien comparta tu enlace en su Wall.

- og:description: La descripción que será mostrada cuando alguien comparta tu enlace en su Wall.

- og:url: Aquí es donde se pone la cosa difícil (por lo menos para mi). Esta es la dirección que será utilizada para hacer Like y comentar cuando agregues estos plugins. Así que, si tienes una og:url como www.mycoolwebsite.com y agregas un botón de Like o una caja de comentarios a tu index.html, cada Like y comentario estará asociado a esa dirección URL. Cómo puedes ver, aquí en mi página tengo un botón de Like y una caja de comentarios por cada entrada, así que cada vez que vez el detalle de cada una, se cambia este parámetro (y otros) acordemente utilizando PHP.

- og:type: Este tag es utilizado para "decirle" a Facebook el tipo de contenido que esta siendo compartido. Sólo coloqué "website", pero para más información puedes entrar en http://ogp.me/.

- og:image: La dirección de la imagen que será mostrada cuando alguien comparta tu página en su Wall. Creo que hay un mímino y máximo para el tamaño de imagen, así que para estar seguros puedes hacerla de 200x200 pixeles.

Ok, magnífico. ¿Funciona ya? Bueno, sí... Pruebalo tu mismo. Sube tu página de prueba con esas metatags y después compartela en tu Facebook. Ahora tienes parte del trabajo hecho. Todavía no has colocado tu botón de Like y caja de comentarios, pero eso vendrá en una segunda entrada.


www.000webhost.com