UPDATE:
As most of you know this code doesn’t work all the time. almost 15% time scroll-bars doesn’t disappear. But the following code dials down the percentage almost to 1%-5%. So use the following code
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize( 100 );
FB.Canvas.scrollTo(0,0);
};
function sizeChangeCallback() {
FB.Canvas.setSize();
}
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Recently I developed a Facebook tab app. I decided to use iFrame instead of FBML. But when I view the tab page, I saw the two scroll bars. First I thought it was for width of my HTML. I changed everything to 518px. Even then I saw the scrollbars. Then I saw the iFrame attributes using Firebug, I saw Facebook is putting 800px as height. So if the height is more than 800px it will show a vertical scroll bar for that vertical scrollbar and it will show another horizontal scrollbar for that vertical scrollbar. Now I am a bit lost. Why would Facebook limit it to 800px. Then I found the FB.Canvas.setAutoResize(). Here is the full code how you can do this. You can see the app HERE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 850 });
}
</script>
you code here
</body>
</html>
Step into the future with CyberNetikz, where we craft tomorrow’s tech innovations with today’s coding artistry Mega Medusa Casino.
9 replies on “Scroll Bars in Facebook Page iFrame Tabs”
I want to use a wordpress page as my iframe source. Is the code the same and where in wordpress would I paste it?
Thanks.
Mike
Mike,
Put the js code under body tag in header.php file
Regards,
Zakir
Awesome… Its worked for me… Your Genius.. Its very simple and understandable.
Hello Friend,
Thank you for useful post. I am facing same issue. Below is url
https://www.facebook.com/pages/mechanicmailcom/200762703299527?sk=app_130603047014357
Initially there is no issue, but when I click REVIEW US Button , next page having horizontal scroll.
Your assistance would be great help.
Regards
Lakha,
You have to put the js code on every page.
Regards,
Zakir
I love reading these articles bcuease theyre short but informative.
Worked for me too! Thanks.
You still have scrolling bars (both kinds) on your example!
http://www.facebook.com/pages/Gifting-page/178954344141?sk=app_152932318099920
I’m seeing them using firefox on a mac
I updated the code 🙂