Question

For our mobile web application using the Facebook Javascript SDK, we want to check the user’s login status, and then display the Facebook login dialog if necessary. The following code is run within a click handler for a given button in our web app:

$('#button').click(function() {
    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            // do something with the logged in and authorized user
        } else if (response.status === 'not authorized') {
            // logged in but has not authorized our app
        } else {
            // not logged in
            FB.login();
        }
    });
});

Ensuring that the user is not logged into Facebook, this works fine and displays the login dialog for desktop web browsers when the button is pressed, but not for the mobile web (at least not for Android on a variety of browsers, I don’t have access to an iPhone currently). Nothing appears on the mobile web app, and when I disable the popup blocker, then I get a prompt asking if I want to allow this popup, which works.

Does anyone know why the behavior is different and/or what the known/standard workarounds are? Thanks!

Answer 1

Your code will not work in all desktop browsers. Some browsers (mobile and desktop) block popups unless they are initiated by a user click. For example,

$('#mybutton').click(function() {
   FB.login();
});

will work because the FB.login() function is only being called in response to the user’s click. So to fix your code, replace the FB.login() call with some code that displays a ‘login’ button and text encouraging the user to click that button.