How to do FB.ui({ method: 'auth.login' ...) with display: 'iframe' instead of 'popup'?

Question

I'm working on a login for a simple Facebook app. I'm able to use the JavaScript SDK to successfully present a login / extended permissions dialog in a popup window with either FB.login or the following code:

FB.ui({ method: 'auth.login',
    perms: 'read_stream,publish_stream',
    display: 'popup' },
    function (rsp) {
        fg_log('on login');                             
        if(rsp.session) { 
            if(rsp.perms) {
                fg_log('PERMS: ',rsp.perms);
            } else {
                fg_log('Hmm. No permissions');
            }
        } else {
            fg_log('Hmm. No login');
        }
    }
);

The problem is... I don't like popup windows much. From a UI standpoint, I think they feel off, like they don't belong to the rest of the app. And getting them to show up via JavaScript also require an extra click from the user for no reason -- in order to get around popup blockers, the user has to click on something like a login button (largely pointless, given that by the time the app knows it needs to display a login button, it already knows the user needs to log in and may as well just present the permissions dialog).

So, I thought, why not an iframe instead? No issues with popup blockers, embedded nicely in the page, and Facebook seems to love 'em.

A little digging in the recent (2.1.2) JavaScript SDK source and various other posts on the Facebook developers forum seems to indicate one can pass "display: 'iframe'" as part of the options to FB.ui.

But when I try it, though the iframe does come up, instead of getting the permissions dialog, I get:

"An error occurred with . Please try again later."

(Note: trying again later produces the same results.)

is there a trick to get this to work, or is it forbidden for some reason?

Answer 1

Try using FB.login instead of FB..ui. If the user is already logged in, and granted the permissions you are asking for via FB.login, then there is no dialog. Otherwise an "inline" one is displayed requesting the extra permissions/login.

It's a little counterintuitive to use a login function to get more permissions when the user is already logged in. But it works.

Answer 2

Not possible anymore (Jul 2014), but you always could and still can create your own iframe and fill it with a page that redirects from your server to a full page FB login.

See https://developers.facebook.com/docs/reference/dialogs/oauth/ :

If you are using the URL redirect dialog implementation, then this will be a full page display, shown within Facebook.com. This display type is called page.

The FB iframe worked at the time the question was asked by either using display: 'iframe' with FB.ui() as Mustafa suggested or using FB.login() (at some points in time it defaulted to 'dialog' mode if FB was properly inited, other times you had to display mode as well).

This was turned off, most likely early 2014 & due to clickjacking. From the reference linked above:

If you are using the JavaScript SDK, this will default to a popup window. You can also force the popup or page types when using the JavaScript SDK, if necessary. iframe and async types are not valid for the Login Dialog for security reasons.