Search code examples
javascriptfacebookfbmlfbconnect

Showing popup in the new Facebook JavaScript SDK


I used to have an href in my website. When users clicked on it, a multi-friend selector showed so they could invite 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 JavaScript 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?


Solution

  • Yes, finally got the irritating box to resize from the original 964 pixels:

    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 JavaScript library of your choice, that is, 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