microTECHing
23Mar/1110

Agilizando el registro con Facebook Connect

Logo facebook developersVamos a intentar resumir lo que ya se ha hablado en tantos sitios sobre cómo se integra facebook-connect.

1º Documentarse:
Si queremos leer un poco de qué va esto, podemos partir de: http://developers.facebook.com/docs/guides/web/

2º Registrar aplicación:
Vemos que el primer paso es registrar nuestra aplicación y conseguir el famoso APP ID.
Para ello solo tenemos que ir a: http://developers.facebook.com/setup/
Debemos introducir el nombre de nuestra web, la url, y seleccionar el idioma.

Nos saldrá un pantalla diciendo como tenemos que validar nuestro usuario.
El mensaje es bastante mareante. Realmente lo único que tenemos que hacer es abrir una nueva pestaña y poner la url: http://www.facebook.com/confirmphone.php?,&confirm_phone=
Entonces al recibir el sms, ponemos el código que nos dan y listo.

3º Hola Mundo!:
Tras crear la aplicación, nos dará los datos del id y el código secreto (apúntalo!), y tendremos un código de ejemplo que se parecerá a esto:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script type="text/javascript">
    FB.init({appId: '#FB_API_KEY#', status: true, cookie: true, xfbml: true});
</script>
<fb:login-button autologoutlink="true"></fb:login-button>

Con esto, ya tenemos el botón de facebook connect en nuestra página, que podrá usar el usuario para dar permisos a nuestra web a manejar el usuario de la sesión de facebook.

4º A funcionar!:
Ahora tenemos que hacer que si el usuario esta logeado ya mediante facebook, recoja los datos de la sesión, y los ponga en nuestro formulario.
Para ello, usaremos el método 'FB.getLoginStatus' y usaremos el API con el método 'FB.api' para recoger los datos del usuario de facebook conectado.
El código que tendremos que insertar después puede ser algo asi como:

<script type="text/javascript">
FB.getLoginStatus(function(response) { get_fb_user_data(response); });

FB.Event.subscribe('auth.login', function(response) { get_fb_user_data(response); });
</script>

Con esto, añadimos un manejador 'get_fb_user_data' para cuando se produzca el evento de 'login' recoger los datos, y hacemos que al cargar la pagina, compruebe el estado de la sesion y añada los datos del usuario al formulario con esa misma funcion.

Por supuesto, ni que decir cabe, que es más que recomendable, comprobar que exista la propiedad, y que su valor sea distinto de 'undefined'.
El código quedaría como:

<script type="text/javascript">

function get_fb_user_data(response){
    if (response.session) {
        // logged in and connected user, someone you know
        var uid = response.session.uid;

        FB.api(uid, function(response) {
            set_fb(document.forms.WBForm.Name, response.first_name);
            set_fb(document.forms.WBForm.Surname, response.last_name);
            set_fb(document.forms.WBForm.Email, response.email);
            var birthdate = get_fb(response.birthday);
            birthdateSplit = birthdate.split('/');
            set_fb(document.forms.WBForm.BirthDate, birthdateSplit[1]+'/'+birthdateSplit[0]+'/'+birthdateSplit[2]);
        });
    } else {
        // no user session available, someone you dont know
    }
}


function set_fb(elem, fb_elem){
    if (elem){
            if (elem.value == '' || (elem.value == '01/01/0001')){
                elem.value = get_fb(fb_elem);
            }
    }
}

function get_fb(elem){
    if (elem){
        if (typeof(elem) != 'undefined'){
            if (elem != 'undefined') {
            return elem;
            }
        }
    }

    return '';
}


</script>

Como veréis en la documentación, para recoger ciertos campos del usuario, son necesarios algunos permisos especiales.
Para solicitarlos, solo tenéis que añadir el atributo 'perm' al botón de login de facebook. Como:
<p><fb:login-button autologoutlink="true" perms="email,user_birthday,user_hometown,user_location,user_website"></fb:login-button></p>

Pues nada... Eso es todo.
Solo avisaros de que si queréis recoger datos como el teléfono, o la dirección de contacto, va a estar un poco difícil por ahora (23/03/2011), tal y como podemos ver en este hilo de meneame.

Happy coding!

Si te ha sido útil el post y no te importa animar a que sigamos escribiendo, solo son unos segundillos invitarnos a un café ;-)
Gracias de antebrazo!
Comentarios (10) Trackbacks (0)
  1. Hola, la verdad que es muy interesante tu post… mira yo tengo una aplicacion que la baje de internet y no me funciona, no me dice que tengo que hacer absolutamente nada de eso, sera que tengo que cargar estos codigos tuyos en la aplicacion? gracias – desde ya estas invitado a visitar el sitio si te interesa…

  2. Hola Oscar,
    Dinos que aplicación es la que te has bajado y no te funciona, a ver si te podemos ayudar.
    En principio, este post, seria como una guía básica para programarlo a mano.

  3. Ama la vida que es hermosa, es una sola y no tiene repuestos, vivela hasta el último segundo. Vivela y deja vivir, que los problemas son parte de la vida.
    El que no tiene problemas ni quiere tenerlos, es por que está vajo tierra.
    Vida, si tuviera más vida después de la vida, te seguiría amando con toda mi vida.
    Carlos Manuel Valverde.

  4. hola, yo estoy en lo mismo quiero recoger los datos del logín del FB en mi formulario para ahorrar tiempo a los usuarios. Utilizo esto:

    1. Código de facebook.php:

    2.-Luego tengo que guardar los datos que me muestran en facabook.php en mi formulario:
    http://www.ecommerceconsultores.com/forms/Body_Form_Txt_PEREmp.php

    ¿ que tengo que hacer? el punto uno, funciona el problema lo tengo en la vuelta de resultados a Body_Form_Txt_PEREmp.php para luego poder guardarlos datos en BD

  5. Hola amigo, ya me conecta pero no se como hacer para que me muestre o como poder manipular los datos del usuario?

    • Todos los datos los puedes manejar en el javascript, con el objeto response.
      En mi caso lo que hago es con esos datos, relleno los inputs del formulario de registro, pero podemos hacer lo que queramos… (como guardar cualquier dato en BD por ajax)

      Saludos.

  6. Hola, estoy intentando crear la aplicación facebook connect para implementarla en mi sitio web, pero no lo consigo, cuando intento registrar la aplicación en (https://developers.facebook.com/apps/?action=create) me da este aviso “Debido a los requisitos impuestos por la ley de los Estados Unidos, estamos obligados a restringir a los usuarios de su país en la creación o la gestión de aplicaciones en Facebook Platform.”, yo estoy en España y he visto varias web de aqui que la tienen, no se que pasa??


Leave a comment

Aún no hay trackbacks.