Question

I have this button:

<img src="static/img/facebook_button.png" id="login-fb" onclick="login();" />

I also have this script:

window.fbAsyncInit = function(){
    FB.init({
        appId : 'MY_APP_ID',
        status : true,
        cookie : true,
        xfbml : false
    });
};

Finally, I have this function:

function login()
{
    facebookPerms = [
        'user_photos', 'email', 'offline_access', 'user_relationships', 'read_stream',
        'user_about_me', 'user_birthday', 'user_education_history', //'publish_stream',
        'user_hometown', 'user_interests', 'user_location', 'user_likes',
        'user_religion_politics', 'user_activities', 'user_work_history'
    ];
    //Get the facebook login status
    FB.getLoginStatus(function(response) {
        if (response.session) {
            // logged in and connected user, someone you know
            ajaxLogin();
        } else {
            //Display the facebook login dialog
            FB.login(function(response) {
                if (response.authResponse) {
                    // user is logged in and granted some permissions.
                    // perms is a comma separated list of granted permissions
                    ajaxLogin();
                } else {
                    // user is not logged in, display the error dialog box
                    errorNotLogged();
                }
            }, {
                //Ask for permissions of Facebook
                scope: facebookPerms.join(',')
            });
        }
    });
}

I am following this Facebook rule:

Calling FB.login results in the JS SDK attempting to open a popup
window. As such, this method should only be called after a user click
event, otherwise the popup window will be blocked by most browsers.

And my website still gets its Facebook popup blocked in IE9. Any ideas how to solve this? Any ideas how other people do this without having their scripts being blocked?

Answer 1

Try the following:

• Fetch the user login status.
• If the user is not logged in, show a login button.
• On click call the FB.login function directly.

In your implementation FB.login is not called directly after a user interaction, but as a part of a callback function of FB.getLoginStatus. I guess this causes IE to block the popup.