BloggAyuda .:: Tecnologia diaria para la vida ::.

veremos en este articulo crearemos una Fan Badge "Medalla personalizada" para nuestra pagina de facebook el cual nos mostrara el numero de fans de nuestra pagina.
Suena interesante la idea si queremos mostrar la cantidad de seguidores de una manera mas brillante y con mejor diseño, bien para empezar veremos la manera de crearla mediante la herramienta para Desarrolladores de facebook.
Para esto vamos a utilizar e implementar el social graph de facebook para generar un archivo con formato JSON (Javascript Object Notation), el cual combinaremos con la información publica disponible sobre la pagina para crear una Fan Badge con nuestra personalización.

Como empezaremos? bien les mostrare los pasos para diseñarla,veamos:

Primero debemos crear nuestra Fan Page de nuestro blog,sitio web,personal,negocio,grupo o de lo que nos inventemos.

Ya que tenemos creada nuestra Fan page nos dara en la barra del navegador la URL similar a esta:

http://www.facebook.com/BloggAyuda

Esto es si nuestra URL esta personalizada ya que si no es asi nos dara una Url mas larga como esta:

http://www.facebook.com/pages/Bogota-Colombia/Tener-un-buen-IcfesPasar-a-la-Universidad-Nacional-Grupo-oficial/134517074302

Ya que tenemos cualquiera de los 2 codigos anteriores buscamos el identificador unico de nuestra pagina que en los casos anteriores pueden ser (134517074302 o BloggAyuda)

Como ya tenemos lo anterior solo nos faltara utilzar el Social Graph de esta manera:

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

Lo que aremos es cambiar el identificador que esta de color rojo, por nuestra ID de la pagina o nombre que tenemos ya asignado por ejemplo:

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

ya que tenemos cualquiere de las direcciones anteriores facebook nos arrojara un archivo JSON como lo 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
}

Ya que tenemos la informacion anterior podemos crear un pequeño script que nos retorne el numero total de fans de nuestra pagina, asi como la URL y otros datos que eventualmente quisiéramos añadir.

El codigo script que pegariamos a traves de la edicion de HTML de nuestro blog.

caso siguiente seria para blogger.

Antes de la etiqueta </head> pegamos lo siguiente:

<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>

ya que tenemos el código, pasaremos a insertar el script que realizara la llamada para mostrar nuestro numero de fans:

<script src="http://graph.facebook.com/BloggAyuda?callback=fbfans">

Como vimos al insertar nuestro código el numero tendrá una clase llamada Fan_Count a la cual le podemos añadir los estilos que deseemos y a su vez sera un enlace para la pagina en facebook.

A continuación pondré algunos ejemplos de las imágenes que podemos insertar asi como los códigos debajo de cada imagen:

CSS
.contenedorfans {
position:relative;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDaogGGztpong9uMkVfZStwyikwkLyFtRrb21gTS_g0Tf7OMej0JpPk6avm7mbw6El7R7EjKlDsRlGQ0KGmx_RwaeLLLvJiTh9EmFhCv_xxA4UKAuE7ArZTjZeCuw7zqM7KFmkPh2YWUM/) 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>

CSS
.contenedorfans {
position:relative;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifHykiQ7LMVPtN_t6mfWcrSmfX1NSkKX2vln0z1STGKpb0KEzk8Kcyp1tqIQauKseEiwTpTMLG4v0muKIzpw9xKRwhHX1ixtG7j4L1Lx6BqxitA6F2VCJvsvs1lVE3dMOaPKHjlg8XqaM/) 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>

CSS
.contenedorfans {
position:relative;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc8pW5HHWsVSZbVXywxEMBOMfU8vR7JSFCBXku-BMAEkgv1kZ4LpOT1_0VJHfPeN9YmCnkeopE5LnoGezzTUvuIR1db-E-3DPw2uiPzhzEmVLd3kdYt26-65fICLCQdJzC_GiXYHPhS6A/) 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>

estos serian los pasos para crear nuestra medalla con estilo propio si saben algo de HTML podran jugar con ellos, si no conocen tanto de el y solo quieren usar estas como iniciales lo pueden hacer, es un buen principio para nuestra medalla.