fb login popup block

Question

I am making using fb login feature but problem comming to me is that whenever I click on the fb login button before page media loading is completed, it blocks the popup for fb login but if I click on fblogin after a second passed to loading event it works

Here is the function I am using:

function fb_login() {
var email='';
console.log(loginClassbackQueue);
// console.log('user wants to login with fb');
FB.getLoginStatus(function(response) {
    if(response.status!='connected'){
        FB.login(function(response) {
            // console.log(response);
            if (response.authResponse) {
                // console.log('user logged in successfully');
                // console.log(response);
                email = update_f_data_login(response);
                $('#fb_login_popup, #popup_overlay').hide();
                // loginme(email);
                } 
            else {
                    loginClassbackQueue = [];
                // console.log('user failed to login');
                }
                // console.log('fb login completed successfully');
            }, {scope:"email,user_birthday,user_likes,user_location,friends_likes,publish_actions"}
        );
        }
    else{
    // console.log('logged in and connected');
    email = update_f_data_login(response);
    $('#fb_login_popup, #popup_overlay').hide();
    }

});

}

The same action when I do on this site http://fab.com/ it open popups always never block a popup.

Answer 1

You cannot call FB.login from the callback of FB.getLoginStatus.

Browsers tend to block popup windows of the popup is not spawned as an immediate result of a user's click action.

Because FB.getLoginStatus does an ajax call and you call FB.login on it's response, the popup that would open as a result of this call is blocked.

A solution to your problem would be to call FB.getLoginStatus on page load and use the response inside your fb_login() method.

Answer 2

It's perfectly fine to call FB.login from the callback of FB.getLoginStatus, as long as you are confident that the login status has already been loaded internally. To do this, use one of these:

• FB.init({..., status: true, ... }).
• FB.getLoginStatus(...)
• FB.login(...)
• FB.ui(...)

Technically all of these options use FB.ui. The async process has to complete, which could take a few seconds. As long as you have already used one of the methods above to make a cross-domain call with FB, and that async process has completed, getting the login status will not make an async call, and the popup will not be blocked.

You should also make sure not to specify true for the second parameter, as in FB.getLoginStatus(..., true);.

Answer 3

Make sure you set status to true, this will fixed popup blocker issue.

window.fbAsyncInit = function() {
  FB.init({
    appId      : '{your-app-id}',
    cookie     : true,  // enable cookies to allow the server to access 
                        // the session
    xfbml      : true,  // parse social plugins on this page
    version    : 'v2.5', // use graph api version 2.5
    status     : true // set this status to true, this will fixed popup blocker issue
  });