FB Social Graph: Crea una Fan Badge personalizada para tu página en Facebook

Jugando de nuevo un poco con las herramientas para desarrolladores que ofrece Facebook vamos a crear una medalla personalizada que muestre el número de fans de nuestra página en Facebook.

La idea es emplear el Social Graph de Facebook para generar un archivo en formato JSON (Javascript Object Notation) con la información pública disponible sobre la página y luego emplear esos datos en la construcción de una "fan badge" más personalizada.

En primer lugar, debemos asegurar de haber creado ya la página de fans para nuestro blog, sitio web, personalidad, negocio o lo que queramos. Más información en El Escaparate

Una vez la hayamos creado tendremos una URL similar a esta La estructura de la URL puede diferir según el tipo de página que hayas creado.:

http://www.facebook.com/pages/Bogota-Colombia/Tener-un-buen-IcfesPasar-a-la-Universidad-Nacional-Grupo-oficial/134517074302
O si la tenemos con una URL personalizada (Vanity URL) Más Información en El Escaparate

http://www.facebook.com/BlogdelaNacho
En cualquiera de los 2 casos necesitamos o el identificador único de la página (en nuestro caso 134517074302) ó el username (en nuestro caso BlogdelaNacho) para hacer la llamada al Social Graph de esta manera:

http://graph.facebook.com/identificador/

cambiando "identificador" o por la ID de la página o su username, por ejemplo:

- http://graph.facebook.com/BlogdelaNacho/
- http://graph.facebook.com/134517074302/

Con cualquiera de las 2 direcciones veremos que Facebook nos arroja un archivo JSON como el siguiente:

{
   "id": "134517074302",
   "name": "\u00bfTener un buen Icfes?\u00bfPasar a la Universidad Nacional? \u00a1Grupo oficial!",
   "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs478.snc4/50552_134517074302_4160320_s.jpg",
   "link": "http://www.facebook.com/BlogdelaNacho",
   "category": "Local business",
   "website": "http://www.pasaralaunacional.com\nhttp://www.foro.pasaralaunacional.com\nhttp://www.universidades.pasaralaunacional.com\nhttp://www.descargas.pasaralaunacional.com",
   "username": "BlogdelaNacho",
   "location": {
      "city": "Bogot\u00e1",
      "country": "Colombia"
   },
   "public_transit": "INFORMACI\u00d3N IMPORTANTE\n\nNosotros no guardamos ningun tipo de relaci\u00f3n formal ni comercial con la Universidad Nacional de Colombia ni con el Instituto Colombiano para la Evaluaci\u00f3n de la Educaci\u00f3n Icfes Mejor Saber.\n\nCualquier comentario adicional o pregunta sirvase libre de ponerse en contacto con nosotros por alguno de los siguientes medios:\n\u2192 El muro aqu\u00ed en Facebook\n\u2192 Los comentarios de nuestras p\u00e1ginas y blogs\n\u2192 El correo electr\u00f3nico contacto[arroba]pasaralaunacional.com\n\u2192 El n\u00famero celular 314 756 42 29\n\n\u00a92010 Blog de la Nacho. Ningun derecho reservado. =D",
   "likes": 4853
}

Con esa información podemos crear un pequeño script que nos retorne el número total de fans de nuestra página, así como la url y otros datos que eventualmente quisieramos añadir.

El código del script, que pegaríamos a través de la Edición HTML de nuestros blogs (en el caso de Blogger) antes de la etiqueta </head> sería este:

<script type='text/javascript'>
//<![CDATA[
  function fbfans(json) {
    var losfans = json.likes;
    var pagelink = json.link;
    document.write("<a href='" + pagelink + "' target='_blank'>
    <span class='fan_count'>" + losfans + "</span></a>");
  }
//--><!]]>
</script>

Y luego el script que realizará la llamada para mostrar el número de fans:

<script src="http://graph.facebook.com/BlogdelaNacho?callback=fbfans">
El número tendrá una clase llamada fan_count a la cual le podemos añadir los estilos que deseemos y su vez será un enlace para la página en Facebook.

Fans

Código Fuente de los Ejemplos

Medalla 1

CSS
.contenedorfans {
position:relative;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmXffO80W0ukXlPMFZU25UdZbgJq5xkZWoHtvmVea6mufuF0s2nHB6bamnsZmyI0izpZuniHBjvP2SYZF0Mu_iUFMgRJlnQQ1w2mlEwU-kX4jIWPW9AapJKnwsnARYoLANeJyoh70g6Dg/) no-repeat;
width:62px;
height:93px;}
/* Propiedades del número de fans */
#fan_count {font-size:18px;}
HTML
<div class='contenedorfans'>
<span style='position:absolute;top:64px;left:12px;'>
<script src="http://graph.facebook.com/BlogdelaNacho?callback=fbfans">
</script>
</span>
</div>

Medalla 2

CSS
.contenedorfans {
position:relative;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0HcCScgOx9NtNfzHGCOdaWn9G-JSjDSHYj-Je3dySwid0p5RPvM__Vp-7g-PeQ_0fCiVrt1Xu9EFFsyx2MN6VLmtWUun82MEyfwtpWa8cyASkZvA9bdPX7WdVoRgoGPfY7yff7dhAZ6g/) no-repeat;
width:110px;
height:78px;}
/* Como es un enlace forzamos el color */
#fb_count1 a {color:white !important;}
/* Propiedades del número de fans */
#fan_count {font-size:18px;}
HTML
<div class='contenedorfans'>
<span id='fb_count1' style='position:absolute;top:35px;left:62px;'>
<script src="http://graph.facebook.com/BlogdelaNacho?callback=fbfans">
</script>
</span>
</div>

Medalla 3

CSS
.contenedorfans {
position:relative;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswuM0vb1SigjtWG2fOqQ9KwOxRxRC-NHm1WcD9q6jKsEdEjVD__qEAKh4JfwghxB511Vfya5nh5skLE0rrun9WrNNnhS9eKlX8F9fL6vntCYFUcSUF3-w7-sScjb5HDcM-rVu-XwutPo/) no-repeat;
width:190px;
height:58px;}
/* Forzamos el color del enlace y el texto */
#fb_count a,#fb_count {color:#4682B4 !important;}
/* Propiedades del número de fans */
#fan_count {font-size:18px;}
HTML
<div class='contenedorfans'>
<span id='fb_count' style='position:absolute;top:18px;left:106px;'>
<script src="http://graph.facebook.com/BlogdelaNacho?callback=fbfans">
</script> Fans</span>
</div>

Se podría jugar un poco más con los datos que brinda públicamente Facebook y personalizar aún más el modo en que los mostramos, pero esta sería una buena idea inicial.