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.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
lo he intentado y me da éste error "Se ha encontrado más de un artilugio con el ID: HTML5. Los ID de artilugio deben ser exclusivos"
ResponderEliminarA ver si me puedes decir en que he fallado .
Gracias!!!
Administrador: Hola ok pon el codigo otra ves y le das a guardar cuando te salga el error prueba Ctrl+f y escribe HTML5 vas a tener dos HTML5 entonces a uno quitale el 5 y ponle el numero que quieras esos son los gadget que tienes en la plantilla y no se pueden repetir tambiem si no quieres tocar tu plantilla colocalo en un gadget ves a diseño añadir un gadget y en HTML/Javascript Añadir pegas el codigo guardas y listo recuerda que el primer codigo si lo debes de poner antes de que sierre el /head bueno cualquier duda no dudes en preguntarme
ResponderEliminarAdministrador:hola que bueno ya vi en tu blog que pudistes hacerlo me alegro ya sabes cualquier cosa aquí estamos puedes preguntarme lo que quieras.
ResponderEliminar:-[:-}