Question

I am having a lot of trouble figuring out how to implement Facebook Oauth for mobile web applications. I would like to use the “touch” interface as indicated in the “display” parameter in the following code example on their developer website. Does anyone have experience using this code? I can’t seem to get it working in Javascript. Are there other ways of using getting my users to see the touch enable login interface?

Here is the documentation that I am referring to: http://developers.facebook.com/docs/guides/mobile/

Answer 1

Yes, there is a way to enable your mobile browser users to see the touch-enabled login interface. Instead of using the FB SDK, you need need to use the oauth method as described here:

http://developers.facebook.com/docs/authentication/

I’m using the ‘Server Side Flow’ to do exactly what you’re trying to do and it seems to work great.

First you redirect to the FB oauth page, passing your app ID and your landing page as a callback (NOTE: landing_page MUST be formatted as a directory and cannot be a document!). Pass in display=touch and optional app data if you need it using state.

document.location='http://www.facebook.com/dialog/oauth?client_id=' + appid + 
    '&redirect_uri=http://' + landing_page + '/&display=touch&state=' + 
     optional_app_data;

After the user logs in successfully, your user will be redirected to landing_page with a GET variable of code. You can use this code to get an access_token if you need to query the Open Graph API for user info like this (in PHP):

$response = file_get_contents("https://graph.facebook.com/oauth/access_token?"
    ."client_id=FACEBOOK_ID."&redirect_uri=http://". landing_page
    ."/oauth/&client_secret=".FB_APPSECRET."&code=$authcode"); 

parse_str($response, $params);

$graph_url = "https://graph.facebook.com/me?access_token=".$params['access_token'];