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
};
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".