How to use Facebook API calls after the initial log in using the Javascript SDK

Question

I just recently started to integrate Facebook onto the website I'm working on currently. What I have so far is that the user can login and I can get their information after the login. What I'm struggling to understand is how do I make FB.api() calls after the initial login html page? I know that the Javascript SDK automatically handles the Access Tokens and stuff but I am unsure of how to make use of it. What I have so far is:

window.fbAsyncInit = function() 
        {
                FB.init({
                    appId      : 'API_KEY', // Set YOUR APP ID
                    channelUrl : 'DOMAIN', // Channel File
                    status     : true, // check login status
                    cookie     : true, // enable cookies to allow the server to access the session
                    xfbml      : true // parse XFBML
                });

            FB.Event.subscribe('auth.authResponseChange', function(response) 
            {
                console.log("Authorization Change");
                if (response.status === 'connected') 
                {

                    console.log("Connected to FaceBook");
                    //SUCCESS
                }    
                else if (response.status === 'not_authorized') 
                {
                    console.log("Logged into Facebook but not us");
                    FacebookLogin();
                    //FAILED
                } 
                else 
                {
                    console.log("Logged out of both");
                    FacebookLogin();
                    //UNKNOWN ERROR
                }
            }); 
        };   
        function FacebookLogin()
        {
            FB.login(function(response) 
            {
                if (response.authResponse) 
                {
                    window.location = "test.php";
                } 
                else 
                {
                    console.log('User cancelled login or did not fully authorize.');
                }
            },{scope: 'email,user_birthday,read_friendlists'});
        }

        // Load the SDK asynchronously
        (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        }(document));

All of this code is inside a script tag at the top of the login html page. What I'm going to do is once the user logs in and is authenticated I'm going to direct them to another page where I will use the FB.api() function to get their information and fill in the registration form for them. Any suggestions or tips?

Answer 1

you can use the following function to get information about user after the user is login successfully and display in any DOM element

 function fqlQuery(){
            FB.api('/me', function(response) {
                 var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where uid={0}', response.id);
                 query.wait(function(rows) {

                   document.getElementById('name').innerHTML =
                     'Your name: ' + rows[0].name + "<br />" +
                     '<img src="' + rows[0].pic_square + '" alt="" />' + "<br />";
                 });
            });
        }

More examples can be found here