How To Make Facebook Fan Page iFrame App Auto Resize

0
107

Today I was trying to figure out how to make the scroll bars go away on my Facebook App. I wanted the full content of my iFrame app to show on the page automatically. This meant I had to force the iFrame to resize to whatever the content of the page was. Fortunately, this is not very hard at all!First we go to Facebook Developers: http://www.facebook.com/developers/ and select the app we want to work with.

Then we click on “Edit Settings” and then select “Facebook Integration.” Underneath the Canvas settings on the right you’ll choose “auto resize” next to Iframe Size. It probably had “Scroll Bars” set previously. Go ahead and save your work to update the app.

 

In your html file before the </head> tag add the following code:

window.fbAsyncInit = function() {FB.Canvas.setSize();}// Do things that will sometimes call sizeChangeCallback()function sizeChangeCallback() {FB.Canvas.setSize();}

Now, you may think we’re done and your problems are all solved but not yet! We need to place some code before the </body> finish it up:




FB.init({
 appId  : 'your APP ID Goes Here',
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml  : true// parse XFBML
 });

 FB.Canvas.setAutoResize(7);

 

You’ll place that above code right after the <body> tag. Then upload it and refresh your facebook app page and see the results of your handiwork! The scroll bars should be gone and the content should all be showing. Good job!

Are you still having scroll bars? Try this bit of CSS:

<style type=”text/css”>body {width:520px;overflow:hidden;margin:0; padding:0; border:0;}</style>

Want to see an example of how it looks when it’s done right? Click the link for our facebook fan page.

Note: I’ve updated this post a couple of times now. The above code should work correctly in Chrome 10, Firefox 4, and even IE9 with compatibility mode turned off. IE9 will require the CSS snippet to work correctly. Chrome 10 and Firefox 4 don’t require the CSS in my testing.

1 COMMENT

  1. Thank you so much! I have spent countless hours on other blogs and none of them worked…what a waste of time. Your instructions are so clearly written and the code worked perfectly the first time. It took me less than 5 minutes. Keep up the good work Jason. Remember, we are not all experts out here….we need people like you to keep it simple.

  2. Hey, did this, by any chance, just become deprecated? It was working fine until about 1 or two days ago… It was used as a backup to the facebook api’s setSize(width, height) … and it was working flawlessly. now it doesn’t do anything.Thanks,
    -Razvan