Facebook user email id using javascript SDK

Question

I am currently using the following code to get the email id of the user using my app

function get_id(cb){
    FB.init({
        appId  : .......,
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true // parse XFBML
    });

    FB.login(function(response) {
        if (response.authResponse) {
            var token = response.authResponse.accessToken;
            alert(token);
            accessToken = token;
            FB.api('/me?access_token=' + token + '', function (response) {

                cb(response.email);

            });

        }

     },{scope: 'email'});

    (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));


}; // ending of get_id()

get_id(function (email) {
    userID=email;
    alert(email);
});

the current code is in a separate javascript file and this function is called when a button is pressed , I have also included <script src="http://connect.facebook.net/en_US/all.js"></script> in the HTML file . my browser (google chrome) gives me the following error each time I try and access it "Uncaught ReferenceError: FB is not defined "

I am relatively new to developing Facebook apps , so all the reference I have is the developers page at facebook , I am sure it is a small error but I just cant wrap my head around it , appreciate it if anybody could point out where I could be going wrong

Answer 1

Your code will not load correctly. This part:

(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));

Should not be inside any function, put this in a script tag, after the body opening. It can't be in a separate file. This only does a async-load of all.js, that is the Facebook's JS SDK. If you are using the async-load, you should not put <script src="http://connect.facebook.net/en_US/all.js"></script> in your document, because this will do a sync-load.

This other part of your code:

FB.init({
    appId  : .......,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true // parse XFBML
});

Also should not be inside the function. This fragment is responsible for starting the FB JS SDK in your page, with your app information, it only have to be called one time for each page, otherwise you will be starting the engine multiple times and it will have a caotic behavior. The "FB" object will only be created after the FB JS SDK loads. You don't know when it's going to happen, because of the async load. So you must assign the FB.init to this window event:

window.fbAsyncInit = function() {
    FB.init({
        appId  : .......,
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true // parse XFBML
    });
};

You want to create a get_id function that uses the Facebook information. You have to be careful with that. With you are sure that this function will be called after the complete load of FB JS SDK, you can create it in any part of your page. BUT I think the most safe way is to create it inside the window.fbAsyncInit. Don't worry about the token, the SDK does it for you:

window.fbAsyncInit = function() {
    FB.init({
        appId  : .......,
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true // parse XFBML
    });

    function get_id(cb){
        FB.login(function(response) {
            if (response.authResponse) {
                FB.api('/me', function (response) {
                    cb(response.email);
                });
            }
        },{scope: 'email'});
    }

};

But when you do that, you will be not sure if your function was already created or not. So when you call it, you will have to test for it's existence:

if(get_id && typeof get_id == 'function') { 
    // It's safe to call your function, go ahead
    get_id(function (email) {
        userID=email;
        alert(email);
    });
} else {
    // Your function does not exists yet, do other stuff
}

Good luck!

Answer 2

You need to put:

(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));

out of get_id function. So it was called before you press the button

PS: you don't need to pass ?access_token= manually - FB JS SDK does that for you