How to Remove Scrollbars in iFrame based Facebook developer application?

If like every beginner (me too) to Facebook application programming and using iframes to get more dynamic features to your application, you are stuck with the situation where page is showing horizontal and vertical scrolls and you are unable to get rid of them so below steps are for you 🙂 – I hope, it will make you to amuse good once you are through with these steps:

  • Login to your Facebook account
  • Visit Developer application page
  • Select and go to your application
  • Click EDIT to edit the settings for your application
  • Go to “On Facebook” tab to perform settings required for Facebook Integration of the application
    Select application canvas type for auto-resize instead of with scrollbars in facebook developer application options as shown below:
  •  Now go to your coded page (for the application which is being called in the iframe) and enter below code just before closing the head tag
    <script type="text/javascript">
    window.fbAsyncInit = function() {
    FB.Canvas.setSize();
    }
    
    // Do things that will sometimes call sizeChangeCallback()
    function sizeChangeCallback() {
    FB.Canvas.setSize();
    }
    </script>
  • In the same coded page (for the application which is being called in the iframe), enter below code just before closing body tag
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
    FB.init({
    appId : 'YOUR-APP-ID-HERE',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    </script>

That’s all 🙂 – now clear your cache and reload your application page. Hope, all should work as desired. It worked for me and what’s your results – share with everyone here!

Leave a Reply

Your email address will not be published. Required fields are marked *