facebook fb:login-button for mobile web

Question

I'm trying to fb:login-button work for mobile web, a la: http://developers.facebook.com/docs/guides/mobile/

However, I'm not sure where to add this code: &display=touch

My FBML is the standard:

<fb:login-button autologoutlink='true' perms='user_about_me,email'></fb:login-button>

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({ appId: 'XXXXXXX', status: true, cookie: true, xfbml: true });
        FB.Event.subscribe('auth.login', function() {
            location.href = "....";
        });
    };
    (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    } ());
</script>

Any ideas?

Answer 1

I'm pretty certain you're not able to use the FBML tags for mobile web applications. At least, they won't accept the display=touch argument.

It means you'll need to use the slightly more complex OAuth implementation that they describe on http://developers.facebook.com/docs/guides/mobile/

It kinda makes sense if you think about it. The FBML tags generally rely on popups or overlays, which you can't really be certain will be compatible with all mobile browsers. The OAuth implementation takes you off to a FB page and returns you back to your host site for authentication and authorisation.