How To Remove The Scrollbars From Facebook iFrame Custom Facebook Page

Switching from Static FBML to iFrames sounds like fun for Custom Facebook Pages.  But now you have those annoying scrollbars going vertically and horizontally.  Here’s how to remove it in 3 easy steps:

1) Add Facebook Javascript SDK to your code, right before the closing body tag “” as follows:

<script src="http://connect.facebook.net/en_US/all.js"></script> <script type="text/javascript">// <![CDATA[
FB.init({
appId : 'YOUR ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// ]]></script>

Replace YOUR ID HERE with the Facebook App ID found in the Application Settings of the iFrame App you created.

2) Call the Facebook set.size parameter by placing the following code in between ” and “:

<script type="text/javascript">// <![CDATA[
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1500});
}
function sizeChangeCallback() {
FB.Canvas.setSize({ width: 520, height: 1500});
}
// ]]></script>
<script type="text/javascript">// <![CDATA[
window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 1500});}
function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 1500});}
// ]]></script>

3) Change your settings inside the Application Settings –> Facebook Integration. Select the option for Canvas Type: iFrame and iFrame Size: Auto-resize

Thats it, you’re done! If your page extends further than 1500px in height, change the parameters in step 2 accordingly.

Further Reading: Learn how to link to other iFrame apps within a custom Facebook Page