Been running into an issue lately with Facebook canvas iframe applications. I've set our settings to "auto-resize" and implemented the correct FB JS call to do the resizing of the height (to avoid unwanted scrollbars), but it doesn't seem to be working.
Has anyone else had this issue or come up with a solution?
Thanks!
Erik
Roozbeh is on the right path with his answer. However, his code will most likely produce an error (at least in Firefox), as both the old and new SDKs are being referenced (and they don't play well with each other).
Also, just using the new SDK to adjust the height is super simple:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true });
FB.Canvas.setSize({ height: 890 });
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
Official documentation available here.
Auto-resize doesn't work. It's a major bug that facebook has not fixed yet.
However, here's the code work around for the problem:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<div id='FB_HiddenContainer' style='display:none;position:absolute;left:-100px;top:-100px;width:0;height:0'>
</div>
<script type="text/javascript">
window.onload = function(){
FB_RequireFeatures(['CanvasUtil'], function(){
FB.CanvasClient.setCanvasHeight('1500px');
});
};
</script>