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.

Facebook Pages: Create a Fan badge - Blog de la Nacho
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(http://lh3.ggpht.com/_PGyBBTv9LYI/TSS2hc6hICI/AAAAAAAABsw/LtocnrL7b_M/Paginas-FB-Badge-1.PNG) 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(http://lh6.ggpht.com/_PGyBBTv9LYI/TSS2hQ3stEI/AAAAAAAABs0/N5I_-JiCO6k/Paginas-FB-Badge-2.PNG) 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(http://lh5.ggpht.com/_PGyBBTv9LYI/TSS2hgEe8jI/AAAAAAAABs8/-lf_f8HeY5o/Paginas-FB-Badge-4-Like-Button.PNG) 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.
El Blog de la Nacho

comment 15 comentarios

Yurika-Chan chevron_right

Y solo funciona con paginas, :O y con grupos, es que tengo un grupo con casi mil miembros y no quiero obligarlos a cambiar :(

Felipe Calvo chevron_right

:: Yurika-Chan Aunque el Graph API de Facebook genera tambien archivos en JSON con información sobre los grupos (mira un ejemplo) no brinda el dato del número de miembros aún si su contenido es público.

En la documentación para grupos hay un parámetro llamado members que se puede construir así:

https://graph.facebook.com/identificador_grupo/members

Y que devuelve los miembros del grupo; y se podría construir un script que contara el número total de miembros, pero veo que es necesaria una autenticación por parte de alguna aplicación para acceder a ese dato. :S

Si encuentro una forma de explicarlo tambien para grupos la comparto. :)

Marketing Online Valencia chevron_right

wow justo es lo que estaba buscando,lo implemento ahora mismo ... me gustaria saber si se puede hacer los mismo con twitter, con las suscripciones de rss, estas plataformas tiene sus gadget pero son los tipicos rectangulos nada visuales, sabrias como hacerlo para que todas mantengan la misma apariencia????

Felipe Calvo chevron_right

:: Lo bueno es que ambos casos que planteas son posibles, tanto obtener el número de seguidores de una cuenta en Twitter como también de suscriptores del feed del blog y las formas de mostrarlos son infinitas segun el diseño que quisieras añadir.

Una de las maneras sencillas de diseñar estos gadgets personalizados es emplear Divs con imágenes de fondo y utilizar la propiedad position para posicionar el texto que es retornado mediante el script.

Puedes ver más información en esta entrada de Vagabundia. :bien:

Marketing Online Valencia chevron_right

Excelente info pero lo que no se es como sacar el numero de readers y followers si lo explicas o me pasas algun enlace te lo agradecere enormemente, un saludo

Fuser Fast chevron_right

No me quede claro donde tiene que ir el

script src="http://graph.facebook.com/BlogdelaNacho?callback=fbfans"

Ayudame por favor :(

Felipe Calvo chevron_right

:: Marketing Online Valencia Regalame unos dias y miro el tema, conozco unos ejemplos en PHP pero no son funcionales en Blogger por obvias razones. :O

:: Fuser Fast El script lo pegas en el lugar donde quieras mostrar la medalla; puede ser en un gadget de tipo HTML/Javascript y lo ubicas en el lugar de la plantilla que gustes. :)

David Ordoñez chevron_right

Hermano quiero saber como hiciste para tener de esta manera tu blog? Con esa plantilla y estetica

Televisión en Vivo chevron_right

Gracias por el aporte hermano me gusto bastante esta idea, saludos hasta pronto..

Felipe Calvo chevron_right

:: David Es un largo trabajo que he realizado por más de 1 año. La plantilla base se llama Simply Minimal pero le modificado muchas cosas.
Podrías pasarte por los blogs de los maestros. :bien:

:: Televisión en Vivo Gracias por tu comentario. :)

Felipe Calvo chevron_right

:: Marketing Online Valencia Puedes mirar esta entrada en Vagabundia donde JMiur explica como lograr un efecto similar a este para las cuentas de Twitter usando JSON. :bien:

Felipe chevron_right

Muchas gracias por poner este tutorial, amigo tocayo. Llevaba tiempo buscando una solución para Facebook como el botón de Twitter de twittercounter.com y tú me lo has dado. Ya lo he puesto en uno de mis blogs, y pronto lo extenderé al otro. Eso sí, he cambiado el botón para ponerlo mucho más simple, y estoy contentísimo con el resultado. De nuevo muchas gracias!

Felipe chevron_right

Hmmm, vaya, como tenemos el mismo nombre pone mi comentario como si fuera tuyo... lo siento. Puedes borrarlo si quieres...
(aunque esto puede solucionarse haciendo la comparación mediante la url del perfil de Blogger en vez del texto del nombre)

Felipe Calvo chevron_right

:: Jajaja gracias por el comentario tocayo, de paso me ayudaste a corregir un error que no imaginé que pasaría. :)
Me alegra que el tutorial te haya resultado útil. Saludos.

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.

Blog de la Nacho