Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?
I have been building a facebook tab using html and css and facebooks javascript SDK.
I having problems with the iframe resizing to the size of the content.
I've managed to get it to work on initial load which is cool, using this below script...
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
-
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '00000000000000', // App ID
channelUrl : '//www.mywebsite.com/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoGrow();
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
and my channel.html looks like this...
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: max-age=".$cache_expire);
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$cache_expire) . ' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
Like I said the initial page load resizing is perfect, but as I navigate around the iframe, it does not autogrow to my content.
Can anyone advise as I'm very new to this facebook iframe biz.
Thanks in advance
Answer
Please check these:
A, Do you have <!DOCTYPE html> at the top of the HTML?
B, Do your app generates valid HTML? Here is the validator tool: http://validator.w3.org/