Despues de un rato rompiendome la cabeza porque ya que la idea es Mostrar los seguidores,fans de facebook con imagen y texto me puse a jugar un poco con las herramientas para desarrolladores que ofrece Facebook y encontre la forma personalizada que muestre el número de fans de nuestra página en Facebook.
vamos a emplear el Social Graph de Facebook para generar un archivo en formato JSON (Javascript Object Notation) con la información disponible sobre nuestra página,antes de hacer esto debemos asegurarnos de haber creado ya la página para nuestro blog, sitio web, personalidad, negocio o de lo que queramos. en el sitio de
Francisco pueden ver como se crea una pagina en facebook.
Una vez la hayamos creado nuestra pagina tendremos una URL similar a esta :
http://www.facebook.com/pages/tube-trucos/
161206907309924
La cual podemos personalizar despues
http://www.facebook.com/
tubetrucos
En los dos casos vamos a necesitar el ID de la página (en nuestro caso
161206907309924) ó el username (
tubetrucos) para llamar al Social Graph de esta manera:
http://graph.facebook.com/
tu id/
cambiamos "
tu id" por el ID de la página o su username,como les explique arriba que son los numeros o el nombre que le hayas dado.
ejemplo:
http://graph.facebook.com/161206907309924/
Con cualquier ID de los dos ejemplo ya mencionado vemos que Facebook nos arroja un archivo JSON como el siguiente: que es mi caso
{
"id": "161206907309924",
"name": "tube trucos",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/373096
_161206907309924_1379826980_s.jpg",
"link": "http://www.facebook.com/pages/tube-trucos/161206907309924",
"likes": 1,
"category": "Entertainment",
"website": "tubetrucos.com",
"description": "trucos blogger,web,tube trucos,html,css,
javascript,redes sociales,Slideshows,google,iconos,tecnologia,
twitter,facebook,etiquetas,codificador,widget y mucho mas.",
"can_post": true
}
Con esa información creamos un pequeño script que nos de el
número total de fans de nuestra página.
Entonces nos dirigimos a diseño > Edición de HTML > Expandir plantillas de artilugios
podemos usar Ctrl+F para busqueda mas rapida.
El código que pondriamos antes del </head> sería este:
<script type='text/javascript'>
//<![CDATA[
function fbfans(json) {
var misfans = json.likes;
var pagelink = json.link;
document.write("<span class='fan_count'>" + misfans + "</span></a>");
}
//--><!]]>count facebook
</script>
Una ves puesto el codigo antes del </head> vamos a colocar el codigo que va a hacer el llamado y el cual te va a mostrar el numero de fans este lo podemos colocar en cualquier lugar de su sitio.la mejor opcion y mas rapida es colocarlo en un gadget para eso vamos a:
Diseño> añadir gadget >html-javascript y pegamos el siguiente codigo
<script src="http://graph.facebook.com/
161206907309924?callback=fbfans">
</script>
fans
El codigo tendrá una clase llamada
Fan_count a la cual le podemos añadir los estilos que deseemos cambiar los
numeros por el ID de su pagina.
y donde dice
fans lo pueden modificar por lo que quieran .
Al poner el codigo que hace el llamado asi el resultado seria este ejemplo: 145 fans
entonces vamos a darle un toquesito con una imagen sin tener que tocar nuestra plantilla asi que colocaremos este codigo:
<div style="float:left;padding:8px;">
<img src="http://dl.dropbox.com/u/25944020/facebook_icon.png" style="margin-right: 8px; float:left;" />
<div style="float: left; margin-top:2px;padding:0;font-size:18px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">
<script src="http://graph.facebook.com/
161206907309924?callback=fbfans"></script>
Seguidores en facebook</div>
<!--[if IE]><br /><![endif]-->
<a href="
http://www.facebook.com/pages/tube-trucos/161206907309924"target="_blank">
<div style="text-align:left;margin:0px;padding:0px;font-size: 12px;color:#ffffff;font-family:Arial,Helvetica,sans-serif;">
Sigueme en facebook</div></a></div>
Y asi con este codigo quedaria como se los muestro en la imagen que esta antes del codigo
Lo que esta en
rojo lo cambian por el ID de su pagina
Lo que esta en
naranja pueden escribir el texto que quieran
Lo que esta en
azul es la url completa de su pagina de facebook
Una ves puesto el codigo guardamos y vemos como nos quedo.
Bueno esto es todo espero y les sirva de algo este codigo recuerden que compartir y comentar no cuesta nada denle click a los botoncitos de facebook,twitter,google+ y bitacoras y asi otros que a lo mejor tambien necesitan el código lo podran ver muchas gracias.
