Facebook Comment box inside UIWebView doesn't have the right height

StackOverflow https://stackoverflow.com/questions/18775771

Question

I am trying to load the following html inside a UIWebView.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <div id="fb-root"></div>
        <script>
           window.fbAsyncInit = function() {
            FB.init({
              appId      : 'myAppId',
              status     : true,
              xfbml      : true
            });
            FB.Event.subscribe("xfbml.render", function(response) {          
                FB.Canvas.setSize();
            });
          };

          (function(d, s, id){
             var js, fjs = d.getElementsByTagName(s)[0];
             if (d.getElementById(id)) {return;}
             js = d.createElement(s); js.id = id;
             js.src = "http://connect.facebook.net/en_US/all.js";
             fjs.parentNode.insertBefore(js, fjs);
           }(document, 'script', 'facebook-jssdk'));

        </script>

        <div class="fb-comments" data-href="http://www.google.com/" data-num-posts="10"></div>
    </body>
</html>

In a browser it displays the comments box correctly and FB.Canvas.setSize() resizing the height appropriately (without it the iframe's span height is set to 160).

This setSize() function appears to do nothing inside of a UIWebView, probably because the scheme of the url is not http or https. I cannot verify this because the Safari debugger doesn't show me the 'Unsafe Javascript attempt' message.

I am loading the UIWebView with loadHTMLString:baseURL:

How can I get the facebook comments box to have the appropriate height?

Side notes:

Similar question: Unable to load full Facebook comment plugins inside an iOS UIWebView

Mucking around in facebook's all.js I found this code inside the comments function (if you're looking look for 'sdk.XFBML.Comments') that sets the height

getSize: function() {
if (this._attr.mobile) return {
    width: '100%',
    height: 160
};
return {
    width: this._attr.width,
    height: 160
};
Was it helpful?

Solution

Same problem here. The solution was not to use a local HTML file (or HTML string). Upload the HTML file to an server and use:

NSURL *url = [NSURL URLWithString:@"http://www.blablblab.com/yourfile.html"]; 
[self.webview loadRequest:[NSURLRequest requestWithURL:url]];

instead of:

[self.webview loadHTMLString:localString baseURL:nil];

I didn't discovered yet why there is a difference in the layout when the file is on a server, but when it is a local file, the height of my Facebook Comments View was always reduced to "height:160".

OTHER TIPS

You're correct, the problem is that the scheme isn't http or https. The SDK doesn't support other schemes and thus will fail to initialize and setSize() will do nothing. Unfortunately, you'll need to find some other workaround to get this functionality.

I came across this problem as well, but due to internal requirements we had to load the webview from an html string. We found that if you change the value of the Facebook Comments view to 'auto' it would display as expected.

Wait for the webview to completely finish loading, then run:

[self.webview stringByEvaluatingJavaScriptFromString: @"$(\".fb-comments span > iframe\").css(\"height\",\"auto\");"];

This fixed the problem for us.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top