Facebook FB.login works in Safari, but not mobile Safari

Question

The following FB.Login function works fine in desktop Chrome, FF, and Safari. But in mobile Safari (tested on an iPhone 4S), it hangs and does not return to the FB.login callback. I can also see this in the console when I use Safari and set the User Agent to "Safari iOS 4.3.3 - iPhone".

Is it because mobile Safari blocks popups? (FB.login triggers a popup dialog).

How do I fix this? Thanks.

function Login(returnLink) {
        FB.login(function(response) {
                    if(response.status === 'connected') {
                        console.log('User is now FB logged in.');
                        // now log them into my site
                        encodedReturnLink = encodeURIComponent(returnLink);
                        window.location = location.protocol + '//' + location.host + "/login?returnUrl=" + encodedReturnLink;
                    }
                    else {
                        console.log('User did not fully authorize after clicking FB login button.');
                    }
                },
                {scope : 'email, publish_actions, publish_stream'}
        );
}

Answer 1

I was trying to run FB.Login automatically on page load inside window.fbAsyncInit and it wasn't working in Safari on iOS. It turns out Safari was blocking the popup window triggered by the FB.Login call. Safari and Chrome on the desktop worked fine (allowed the popup).

I found the only way to work-around this was to trigger the FB.Login call in response to user interaction (eg. Tap or Click). This worked for me:

HTML

<a href="#" id="fbLogin">Login with Facebook</a>

JavaScript (jQuery)

$('#fbLogin').click(function(){
    FB.login(function(response){
        // Do something...
    });
});

Tested on Safari (iOS 8.0).