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?

What I tried is I redirecting the page after the user logs in and then in the redirected page I tried to use FB.api() to get the information because I assumed that it was managed by the Facebook Javascript SDK? — derekdt
@derekdt Any luck figuring this out? I'm having the same problem myself now — bks

Vinod Louis Vinod Louis · Accepted Answer · 2013-08-23T10:00:16

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

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

1 Answers