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

Answer 4

I had the same problem and it kick my head for 3 days. I did stumble on the above mentioned solutions and they worked in Firefox and Edge but in Chrome not matter what ever i did i still got blocked left right and center.The other problem was when i called the function from a button press event the login dialog was not block but it didn't get any responses after the login dialog closes for further actions so i got stuck. So my solution is as follow, but you don't need to press the login in button it will redirect to the FB-login page without a button press event, and on return continue with all the other sdk steps. Just add this to your code and see if it helps, from there adjust according to your need

function statusChangeCallback(response) {
            console.log('statusChangeCallback');
            console.log(response);


            // The response object is returned with a status field that lets the
            // app know the current login status of the person.
            // Full docs on the response object can be found in the documentation
            // for FB.getLoginStatus().
            if (response.status === 'connected') {
                // Logged into your app and Facebook.
                document.getElementById('Image2').style.display = "none";
                document.getElementById('mail').style.display = "in-line";

                testAPI();
            } else {
                // The person is not logged into your app or we are unable to tell.
                window.alert("Faça login no facebook antes de continuar - Obrigado");
                window.location.href = 'https://www.facebook.com/dialog/oauth' +
                '?client_id=55215442252214521548' +
                '&scope=public_profile,email,user_friends' +
                '&redirect_uri=' + encodeURIComponent(document.URL);
                document.getElementById('Image2').style.visibility = "hidden";
                document.getElementById('mail').style.display = "in-line";

            }
        }

        // This function is called when someone finishes with the Login
        // Button.  See the onlogin handler attached to it in the sample
        // code below.
        function checkLoginState() {
            FB.getLoginStatus(function (response) {
                statusChangeCallback(response);

            });
        }