Showing popup in the new FB JS SDK

Question

HI,

I used to have an Href in my website, when users clicked on it, multi friend selector showed so they can incite their friends to my website. That was done using the following code:

 FB.ensureInit(function() {
        var dialog = new FB.UI.FBMLPopupDialog('XXXXXXX', '');
        var fbml = 'Multi-Friend-Selector FBML'
        dialog.setFBMLContent(fbml);
        dialog.setContentWidth(620);
        dialog.setContentHeight(570);
        dialog.show();
    });

Now, I'm using the new JS SDK (http://connect.facebook.net/en_US/all.js), but the old methods are not present... How can I do it with the new SDK ??

Answer 1

Well, after 2 days (because i'm not a JS expert :P ) of reading the open source FB JS SDK, I found a method:

FB.ui({
            method : 'fbml.dialog',
            fbml: '<fb:fbml>' +
                  '<fb:request-form action=......',
        });

It looks simple, yes i know, but now the problem is when i send the invitation, i get a new tab opened leaving the "dialog" (in FB terms, because popup means another thing for them!!) open!! So still struggeling.. but I will get the answer !!!

Answer 2

This works for me..

FB.ui({method:'fbml.dialog', fbml:'<fb:request-form action="URL" method="post" invite="true" type="TYPE" content="THIS IS THE MESSAGE <fb:req-choice url=\'URL\'label=\'Accept\' />" <fb:multi-friend-selector showborder="false" actiontext="REQUEST FORM TITLE" /> </fb:request-form>'})});

Replace the CAPS with your content.

The only problem I'm having is I can't figure out how to resize the dialog to fit the content. It stays at 964px. I've tried many versions of

size:(width:600,height:500),

Any Ideas?

Answer 3

yes, finally got the damn box to resize from original 964px:

for compatibility (let's hope it will get fixed in the future, or documented better) i still say

size:(width:600,height:500),

but then i break out width and height as properties of parent object, so in the end use:

size:(width:600,height:500),width:600,height:500, ...

and now it's also resizable with the JS library of your choice, i.e. here's a sample with jQuery resizing:

FB.ui({
    method: 'fbml.dialog',
    fbml: (
         '<div style="width:480px;border:1px black solid;">A small JavaScript library that allows you to harness ' +
         'the power of Facebook, bringing the user\'s identity, ' +
         'social graph and distribution power to your site.</div>'
       ),
    size: {width:640,height:480}, width:640, height:480
});
$(".FB_UI_Dialog").css('width', $(window).width()*0.8); // 80% of window width
// I'm also sure you could stack this call if you wanted to

Cheers,

Raine

Answer 4

I just do this. FB.ui({ method: 'fbml.dialog', width: 500, height: 300, fbml:......

Answer 5

you can also add display: 'dialog' and it will resize correctly.