How do I get back to the iPhone web app after havi

Question

I have a mobile web site built using jQuery Mobile. I often run it in full screen/mobile web app mode on my iPhone (I have added the web app to my iPhone home screen).

On one of the pages, the user is required to log in to Facebook using the Facebook Connect JavaScript API. If the user is not already logged in, this is done by clicking a login button. The event handler for this button looks like this:

("#fbLogin").click(function () {
      FB.login(handleStatusChange(response), 
      { scope: "publish_stream", 
        connect_display: "touch" });
});

In the above code I have inserted some line breaks for better readability, but the values are like in the example. The callback function (handleStatusChange) takes care of the response from the login request.

When I click this, the Facebook login page is opened in my web app window. If I haven't already accepted the Facebook App, I have to give it permissions as well. All this seems to work fine. But after I have given permissions/logged in I'm left hanging on a totally blank screen.

I have also tried another approach to logging in, by putting this inside the login button event handler:

window.location = "https://www.facebook.com/login.php
?api_key=MY_API_KEY
&cancel_url=http%3A%2F%2Fwww.mywebsiteurl.com%3A8081
&fbconnect=1
&next=http%3A%2F%2Fwww.mywebsiteurl.com%3A8081
&return_session=1
&session_version=3
&v=1.0
&req_perms=publish_stream
&connect_display=touch";

Again, line breaks have been inserted for better readability. When used it's just one long string.

The URL used in the cancel_url and next parameters is the one I have registered with the Facebook Application. If I try using a different URL (like http://www.google.com) I get an error so the this seems to be correct. As you can see I use a different port on my development server (port 8081). Could this be a problem?

The result is similar to the previous example. I get the login/permissions pages but I'm left with a blank screen after everything is done. I tried this after reading this post on the old Facebook Developer forum.

If I, on the other hand, try running this in Safari (not as a full page iPhone web app) the login works great.

Is there anything else I can try? Does anyone have a JavaScript API Facebook Connect login working while running in full screen/web app mode on an iPhone?

Thanks in advance!

Answer 1

Not sure if this helps you, but I found that adding the iOS Safari link fix, also allowed Facebook login to work in my fullscreen web app without opening up the page i "regular" Safari:

// Make links work in iOS fullscreen web app
function disableSafariLinks() {
    $("a").click(function (event) {
        event.preventDefault();
        window.location = $(this).attr("href");
    });
}

See also iPhone Safari Web App opens links in new window