Thursday, February 24, 2011

How To Resize iFrame & Remove Scrollbar From Your iFrame Facebook App?

If you are looking for PHP SDK Click Here to download it.

Code I used to remove the scrollbar from facebook application is this:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
function framesetsize(w,h){
    var obj = new Object;
    obj.width=w;
    obj.height=h;
    FB.Canvas.setSize(obj);
}
</script>
<body onload="framesetsize(500,2100)">
    <div id="fb-root"></div>
    <div style="height: 2000px">
    </div>
</body> 

Make sure you set the facebook application setting to AutoResize, to do so follow this instructions:
  1. Login to your Facebook account
  2. Go to Developer panel
  3. Go to your application
  4. Click on Edit Setting
  5. Click on Facebook Integration Tab
  6. Select IFrame size to Auto-resize
Hope this help you to get rid of scrollbars :)

4 comments:

Anonymous said...

Of all the code samples out there, this one worked. Thank you.

Magento Themes said...

Really helpful codes for the Web designers.I am also starting my career as Web Designer.So it helped me a lot.Thanks for sharing.

Matus said...

works for me with one adjustment, at the bottom of the script wright height 100% instead of 2000px

Ravi said...

Good to hear that :)

Post a Comment