Geek Answers Handbook

Facebook comment block inside UIWebView does not have correct height

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 the browser, it correctly displays the comment window, and FB.Canvas.setSize () resizes the height accordingly (without it, the iframe interval height is set to 160).

This setSize () function does nothing inside the UIWebView, probably because the URL scheme is not http or https. I cannot verify this because the Safari debugger does not show me the message "Unsafe Javascript attempt".

I load UIWebView with loadHTMLString: baseURL:

How can I get facebook comment box for corresponding height?

Side notes:

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

Facebook cheat all.js I found this code inside the comment function (if you are looking for "sdk.XFBML.Comments") which sets the height

 getSize: function() { if (this._attr.mobile) return { width: '100%', height: 160 }; return { width: this._attr.width, height: 160 };
0
source share
3 answers

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

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

instead:

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

I have not yet discovered why there is a difference in the layout when the file is on the server, but when it is a local file, the height of my view of Facebook comments was always reduced to "height: 160".

+2
source

You are right, the problem is that the scheme is not http or https. The SDK does not support other schemes and, therefore, will not be able to initialize and setSize () will do nothing. Unfortunately, you will need to find another solution to get this functionality.

+2
source

I ran into this problem, but due to internal requirements we had to load the webview from the html line. We found that if you change the value for viewing Facebook comments to “auto,” it will display as expected.

Wait for the web view to complete the download, then run:

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

This fixed the problem for us.

0
source

More articles:


All Articles