FB.ui dialog (iframe) is invisible

Question

i am trying to add the stream.publish functionality to my web app, but i'm having a problem with the 'feed' dialog.

My code is the following:

        var obj = {
            method: 'feed',
            display: 'iframe',
            name: data.name,
            link: data.link,
            picture: data.picture,
            caption: data.name,
            description: data.description,
            message: data.message,
            actions: [{
                name: data.actions.name,
                link: data.actions.link
            }],
            user_message_prompt: ''
        }

        var resp = FB.ui(obj, function(response) {
            alert("DONE");
        });

I can make it work if i use 'popup' instead of 'iframe' but that's not what i want.

Any ideas why the feed is just not appearing in my screen???

Thanks!

Answer 1

As described in Dialogs documentation

If you specify iframe, you must have a valid access_token. To get a valid access_token, please see the Authentication guide

Update:
Seems there is couple of other statements that may lead to this behaviour:

iframe: Display the dialog in a lightbox iframe on the current page. Because of the risk of clickjacking, this is only allowed for some certain dialogs, and requires you to pass a valid access_token.

And this one.

On Facebook canvas pages, Dialogs are supported only for iframe applications

There is also open BUG #246637628719849 about "Send Dialog" not working with as iframe in Page Tabs (which may, or may not be related).

Update2:
Actually in all my applications I've user FB.ui without specifying display since at the time of implementation of Dialogs iframe wasn't working well in most cases, and without it Facebook JS-SDK trying to use most appropriate display mode...

Update3:
OP had fb-root within other DOM element which was hidden, causing Dialog to be invisible (as he stated in comment)