viernes, 26 de julio de 2013

Mostrar información del usuario y listar amigos con la APi de Facebook en javascript

Damian 7/26/2013

Anteriormente ya hemos visto como compartir o publicar en el muro del usuario,ahora veremos como mostrar determinados datos como por ejemplo el nombre y foto del usuario y de los amigos,para ello necesito otro tipo de permisos:

read_friendlists:acceder a la lista de amigos
friends_groups: acceder a la lista de amigos de los grupos

el que nos interesa por el momento esread_friendlists con este permiso obtendremos acceso para listar todos los amigos que el usuario posee.

  • Mostrarinformacióndel Usuario
para poder obtener el nombre y la foto del usuario no necesitamos ningún permiso lo hacemos directamente una vez logeado el usuario,luego se llama al método/me este método me retornara por medio delresponse elname(nombre) y el ID del usuario,luego para obtener la foto necesito usar la API Grafi de facebook por medio de una URLhttp://graph.facebook.com/ añadiendo el ID del usuario seguido de/picture.


function muestraInfo(){ FB.login(function(response) { if (response.status=="connected") { FB.api('/me', function(response) { reaUser(response.name,'http://graph.facebook.com/'+response.id+'/picture'); creaAmigos(); }); } else { console.log('NO CONECTADO'); } },{'scope': 'read_friendlists,friends_groups'}); }


dentro de la functionmuestraInfo() tengo la funcion login que permite al usuario logearse y aceptar los permisos si estos son aceptados pasara a activar el método/me donde obtendré por medio delresponse.name(nombre completo del usuario) yresponse.id el ID del usuario que pasara a la URL del API Grafi para obtener la imagen del usuario estos valores son recibidos por una funcion que crea dinamicamente el elementocreaUser(response.name,'http://graph.facebook.com/'+response.id+'/picture');.


  • Listar Amigos del Usuario
ya que el usuario aceptado los permisosread_friendlists , podemos utilizar el método/me/friends este método nos retornara por medio delresponse un array de datos que debemos de recorrerlo con un ciclo for para extraer el ID de cada amigo que posea el usuario para luego hacer lo mismo que los datos del usuario crear los elementos dinamicamente.


function creaAmigos() { FB.api('/me/friends', function(response) { if(response.data) { for(var i=0;iresponse.data.length;i++) { jQuery('#lista_amigos').append('div class="amigos"'+ 'img src="https://graph.facebook.com/'+response.data[i].id+'/picture"/'+ 'h3'+response.data[i].name+'/h3'+ '/div'); } } else { console.log('Error al obtener amigos'); } }); }


con dos simples funciones hemos obtenido informacion basica del usuario, les dejo el codigo fuente completo con todas las funciones y css del ejemplo


DESCARGAR









,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)