I’ve written previously on how to build iFrame tabs for Facebook Fan Pages.
And in that article I described how to remove the scroll bar issue that a lot of apps are plagued with.
I also wrote an article called 2 Ways To Remove Scroll Bar from Facebook Page iFrame Tab Apps.
Well, I’ve since learned that code works only part of the time.
And for developers who are trying to get things done, when you have something like a scroll bar issue, and it’s been 5 hours later and you still haven’t fixed it, it’s important to get help wherever you can.
So I found some new code that has, quite honestly, worked 100% of the time for in resolving the scroll bar issue with Facebook Fan Page iFrame tabs.
I’m going to give you just the framework (header and closer) tags of the code – you just need to include your content in between.
If nothing is wrong with your content code, then this should work everytime at removing your scroll bar issues on your iFrame tabs.
Here ya go, and leave comments to let me know how it works for you:
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”><head>
<style type=”text/css”>body {overflow: hidden;}</style>
<Body onLoad=”FB.Canvas.setSize({width: 520, height: 2000})”>.<Div id=”fb-root”></div>
<Script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script>
<Script type=”text/javascript”>
FB.init({
appId: FB_APP_ID,Status: true,Cookie: true,Xfbml: true
});
window.fbAsyncInit = function().{
fb.canvas.setautoresize();
}
</Script>
</head>
<body>
your content goes here
</body>
</html>
** Note: I’ve set the height at 2000px which you’ll have to increase if your iframe tab is especially long and you still see the scroll bar.
View Comments
Robert,
For some reason one of my iFrame Canvas isn't doing it correctly, but the others are. I'm not sure what the issue is. I used the Script as in other iFrame setups, but this particular one is just not working. I have to toggle the show scroll bars for now, to able to see the content (in the edit settings on the iframe app). But when I toggle to show no scroll bars, the canvas page only shows the first 800 px. And only on this one canvas too. Thoughts?
Hi Ed - it sounds like one of your parameters are off within the code of
your canvas page.
The only way for me to see for sure is to see your code.
Can you email me the fan page in question, along with the html file that you
are attempting to use?
I will look at it from there.
Thanks :-)
I... love you.. you know what i mean.
I'm creating a (very simple) iframe page for my company as well, and I'm running into the same problem. I've tried your code but it doesn't seem to be doing anything. I've checked, and none of the content should extend the 520px limit. When added up in vertical direction it's 990 px. I set the height in your script to 1000px, but I still get the scrollbar. Left it at 2000, same result.
Any clue/might I send you the code?
hello!!
I tried it so many times and it just not working for me...can you please help me!?thanks
can't express all my gratitude
is it possible to get a fan page wider than the 520 pixels? I can't find any information on how to do this. Does your code do it?