Fill form using facebook data

Question

I would like to allow users to press a button on my page that will autofill a form with their first name, last name, and e-mail address, provided that they are logged into Facebook. If they are not, then the Facebook login form should popup, allowing the user to login, and then the auto fill should take place.

I have been messing around with this in the javascript test console. I know I will need to call the first_name, last_name, and email, but I'm not sure how to populate my form fields with this information.

FB.api(
      {
        method: 'fql.query',
        query: 'SELECT first_name, last_name, email FROM user WHERE uid=' + response.authResponse.userID
      },

I would like to do this in javascript. I need to create a function that will populate a form with this information on click. Any ideas?

Vishwesh Shetty · Accepted Answer · 2012-10-30T06:30:26.410

Why don't you use Registration Plugin. It will save you a lot of work https://developers.facebook.com/docs/plugins/registration/

In Case you want to have custom form. You would have to take permission from user and get his details. You can use following Code :

<div id="fb-root"></div> 
<script src="https://connect.facebook.net/en_US/all.js"></script> 
FB.init({appId: 'XXXXXXXXXXXXX',status : true,xfbml  : true, cookie: true ,oauth  : true});


function login(){
        FB.getLoginStatus(function(response) {
        // checks if user already authorized
                    if (response.status === 'connected') {
                            FB.api('me?fields=id,name,email', function(user) {
                                     if(user != null) {
                                                                username  = user.name;
                                                                uid = user.id;
                                                                email = user.email;
                                                            }
                                });

                    } else {
        // If user is not authorized call FB.login for pop up window for authorization  , scope defines list of persmission requested with user
                    FB.login(function(response) {
                            if (response.authResponse.accessToken) {    
                                            FB.api('me?fields=id,name,email', function(user) {
                                                    if(user != null) {
                                                                username  = user.name;
                                                                uid = user.id;
                                                                email = user.email;
                                                            }
                                                        }) 
                                                    } 
                                                }, {scope:'email'});
                    }

                });
    }

You call login() at the press of your button.

I did have a look at this, but i already have a working form in use, so instead of adding another form i would just like to pre-populate this form with facebook data at the press of a button. — nelle-f, Oct 29 '12 at 16:32
I have edited my answer to include code to get user details without registration plugin. — Vishwesh Shetty, Oct 30 '12 at 06:31

score 0 · Answer 2 · answered Oct 29 '12 at 16:59

You can try something like that:

<script>
      FB.api(
      {
        method: 'fql.query',
        query: 'SELECT first_name, last_name, email FROM user WHERE uid= ' + response.authResponse.userID}, function (data) {
        if (data && data[0]) {
            if (data[0].first_name) {
                document.getElementById('user_first_name').value = data[0].first_name;
            }
            if (data[0].last_name) {
                document.getElementById('user_last_name').value = data[0].last_name;
            }
            if (data[0].email) {
                document.getElementById('user_email').value = data[0].email;
            }
        }

      });
</script>

<input id="user_first_name" />
<input id="user_last_name" />
<input id="user_email" />

if "response.authResponse.userID" is a valid user ID. – Tony Gaillard Oct 29 '12 at 17:00 — Tony Gaillard, Oct 29 '12 at 17:00

Fill form using facebook data

2 Answers2