Preventing scroll bar in Facebook canvas IFrame applications

If your see a scroll bar in your Facebook IFrame application and want to prevent it, follow the below steps.

1. Go to your application settings, in the Facebook Integration tab of your setting, select Auto-resize for IFrame size.
2. In your app, add the below code after the body tag.

<div id="fb-root"></div>
<script>
	window.fbAsyncInit = function() {
		FB.init({appId: "{your app id}", 
                           status: true, 
                           cookie: true,
                           xfbml: true});
		FB.Canvas.setSize();
	};
	(function() {
		var e = document.createElement('script'); e.async = true;
		e.src = document.location.protocol +
			'//connect.facebook.net/en_US/all.js';
		document.getElementById('fb-root').appendChild(e);
	}());
</script>

FB.Canvas.setSize() is the piece of code that is responsible for removing the scroll bar.

Advertisements

Facebook app, Programming

Facebook app

September 21, 2010

10 Comments