Question

I’ve been building out a social gifting platform, and have had an application running for a few months now at: http://egift.me/promos/venue/facebookconnect

There is a simple user flow for the app. Click the Login/Connect facebook button, login &/or authorize the application, and you’re redirected to a ‘thank you/confirmation’ style page.

If I step through this on a standard browser, I have no problems. If I step through this on mobile, I ultimately get the lovely “The page you requested was not found” page.

I don’t have a Mobile Web url configured, I’m simply using Website with Facebook Login. Even when I have tried adding a mobile web url (it’s the same base URL, I’m using View Switching to serve up a desktop vs mobile optimized view), I get the same issue.

Anyone have any idea what’s going on? Is there any additional information I can provide?

[UPDATE]

This works (be sure to change your scope):

//instead of onClick could just as easily use something like jQuery event binding
<button onClick="loginUser();">Login</button>
<script type="text/javascript">
function loginUser() {
    FB.login(function (response) { }, { scope: 'YOUR_SCOPE_HERE' });
}

FB.getLoginStatus(function (response) {
    FB.Event.subscribe('auth.authResponseChange', handleResponse);
});
handleResponse = function (response) {
    document.body.className = response.authResponse ? 'connected' : 'not_connected';
    if (response.status === 'connected') {
        // the user is logged in and has authenticated your
        // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
        // request, and the time the access token 
        // and signed request each expire
    } else if (response.status === 'not_authorized') {
        // the user is logged in to FB, but has not yet authenticated your app
    } else {
        // the user is not logged in to FB
    }
};
</script>

Answer 1

For mobile web apps, I’d recommend to use FB.login via the SDK itself rather than through the use of the login button. If nothing else it gives you greater programmatic control of the user flow & experience.

The canonical “simplest ever social app” snippet is:

FB.login(function(response) {
  if (response.authResponse) {
    console.log('Fetching user info');
    FB.api('/me', function(response) {
      console.log('Hello ' + response.name + '!');
     });
  } else {
     console.log('User cancelled login or did not fully authorize');
  }
});

Also you’re including the JS SDK for the plugin anyway, so there’s no payload overhead. More details on FB.login here: https://developers.facebook.com/docs/reference/javascript/FB.login/