Agilizando el registro con Facebook Connect

Vamos 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="https://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!