Question

I’m building a GWT application and am trying to dynamically add facebook comment boxes in certain places. This is working fine, except that the facebook SDK isn’t calculating the height correctly. It always sets it at 160px.

This means that only half of the first comment is visible, even if there are multiple comments (i.e. it gets visibly cut in half). If I use the same code outside of GWT it works fine (i.e. the height is calculated correctly).

Does anybody know how the facebook SDK calculates the height of the box? Or what else I can try?

---

The details:

I initialise the facebook SDK as follows:

public static native void initFacebookSDK()
/*-{
    window.fbAsyncInit = function() {
        // init the FB JS SDK
        FB.init({
            appId : '<my-app-id>', // App ID from the App Dashboard
            channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
            status : true, // check the login status upon init?
            cookie : true, // set sessions cookies to allow your server to access the session?
            xfbml : true
        // parse XFBML tags on this page?
        });

        // Additional initialization code such as adding Event Listeners goes here

    };

    // Load the SDK's source Asynchronously
    (function(d, debug) {
        var js, id = 'facebook-jssdk', ref = d
                .getElementsByTagName('script')[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement('script');
        js.id = id;
        js.async = true;
        js.src = "//connect.facebook.net/en_US/all"
                + (debug ? "/debug" : "") + ".js";
        ref.parentNode.insertBefore(js, ref);
    }(document, false));
}-*/;

I add the div as follows:

//_root is a vertical panel
_root.add(new HTML("<div id=\"mydiv\"></div>"));

and then I populate the div like this:

public static native void showComments(String currentUrl_)
/*-{
    var mydiv = $doc.getElementById('mydiv');
    mydiv.innerHTML = "<fb:comments href='" + currentUrl_
            + "' num_posts='5' width='422'></fb:comments>";
    FB.XFBML.parse(mydiv);
}-*/;

The problem is that the facebook SDK always populates the div with the following:

<span style="height: 160px; width: 422px;">
  <iframe ...>...</iframe>
</span>

whereas if I don’t use GWT, the height parameter changes appropriately, e.g:

<span style="height: 1469px; width: 422px;">
  <iframe ...>...</iframe>
</span>

Hope someone can help.

Answer 1

Worked it out.

In JSNI I should be using $doc and $wnd, instead of document and window, respectively. https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI#writing

In my defence I had tried this, but the missing ingredient was that I needed to reference the FB object as $wnd.FB, e.g:

$wnd.FB.init(…) and $wnd.FB.XFBML.parse(…)

Hope this helps someone.