*** UPDATE TO THIS ARTICLE ***
I found new code that has resolved the scroll bar issue with Facebook page iFrame tabs 100% of the time for me:
Read my article here where I’ve shared the code
*** End of update ***
Another major problem people are telling me about with their iFrame tab application for Facebook Fan Pages is the scroll bar.
The scroll bar within the iFrame tab Facebook application occurs when one of two parameters are met:
1) If the elements of the Facebook application exceed the maximum width of 520px. And from what I’ve seen, if the width is too far out of line, the app will simply load in a new screen altogether.
2) If the elements of the Facebook application exceed the default height set by the iFrame, which I believe is somewhere around 500px tall.
How to fix the scroll bar in the Facebook iFrame tab apps:
There is only one way, or one piece of code, that I know of that resolve (or resizes) your Facebook application:
The fb.canvas.setsize element goes in the header of your application and tells the canvas what size to adjust to.
Here’s the two ways I’ve been able to successfully remove the scroll bar from applications:
1) Use auto height adjustment – this is where you set the code to adjust automatically to your canvas URL height, and the code you use is this:
<script type="text/javascript">window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}</script> I’m using the auto resize above successfully on my “Videos” tab on my SMSEO Facebook page.
The beginning and ending <script> elements are key here and must be present for the elements to work.
If you visit the Facebook help page where they give you code, they don’t mention that these elements must reside within the <script> beginning and end elements – something I guess Facebook just assumes everyone knows, which is clearly not the case.
So the code above is the auto-adjust element that you’ll use, and should make your canvas adjust to whatever height required – which means the scroll bar should not be showing.
But what about when the scroll bar is still there?
I’ve seen times where the canvas size code above did not auto adjust the height and there was still a scroll bar.
So the fix I found when the auto resize didn’t work is by putting in height and width specifications.
Here’s the code to use to manually adjust the height and width of your iFrame tab Facebook application:
<script type=”text/javascript”>
window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 2000 }); // Live in the past}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 2000 }); // Live in the past}
</script>
You can see that I’ve manually added the size of “width: 520, height: 2000”
This code is being used on the live stream app I built for our church’s Facebook Fan Page here.
With this app, for some reason the auto adjust canvas code did not work and I had to use the manual size code.
Points to remember:
1) From my experience, the canvas size code must always reside in the head element of your page, which means the code looks like this:
<head>
canvas resize code
</head>
2) The FB code must always reside within the <script> elements (and within the head element as stated above) – so the final outcome needs to look as such:
<head>
<script type=”text/javascript”>
canvas resize code
</script>
</head>
Other than that, if the auto resize code doesn’t work then try the manual resize code.
If you find there is still a scroll bar after using the manual resize code then you either have elements within your app that are wider than 520px, or you need to increase your height.
Keep tweaking until you get it resolved.
Let me know how it goes – or if you need any help – in the comments below!
View Comments
Thank you so much. Writing this up is much appreciated for those of us (like me) that want to know more...Very cool.
Glad it helped Nathan - thanks for stopping by...
Thanks for the information. Unfortunately, I am only able to remove the scroll bars when the page is less than 800 pixel. When I paste the manual code above, I receive an error. When I paste the auto adjustment code, I do not receive an error, but the scroll bars still appear.
The error for the manual code is as follows:
Could not parse your site header code. Are you inserting invalid XML? Error: Error on line 1 of document : Open quote is expected for attribute "{1}" associated with an element type "type". Nested exception: Open quote is expected for attribute "{1}" associated with an element type "type".
Any ideas as to why this is happening on mine.
Many Thanks!
Hi Rmw603 - I just finished an article where I share new code that removes scroll bars from Facebook page iFrame tabs 100% of the time:
Let me know if that works for you
Thank you for your help.
That removed the scroll bar, but the facebook canvas did not extend. I lost a good portion of the page. I tried to input the manual code into your suggestion and it did not change anything.
Also, I noticed that I lost functionality of my scroll bar in my html editor (I am using a CMS to host my iframe).
Thanks again for your help. If you have any other thoughts, please send them my way.
are you using Wordpress? I'm having the same problem - haven't found a fix yet :(
Hi Kirbs - yes, I'm using wordpress - and I just finished an article where I share code that has worked 100% of the time for me removing scroll bars from Facebook page iFrame tabs.
Hi Rmw603 - I just finished an article where I share new code that removes scroll bars from Facebook page iFrame tabs 100% of the time.