How To Resize iFrame & Remove Scrollbar From Your iFrame Facebook App?
Facebook iFrame Applications are the easiest way to get onto Facebook Application development without knowing much of Facebook's own markup language - FBML. iFrame applications also let you leverage the cool jQuery effects which are otherwise not possible in a FBML based app.
However there is a limitation to using the iFrame based Facebook apps. When the content of the frame in your app crosses the standard Facebook canvas width of 760px or the content crosses the height of the Facebook page, ugly looking scroll bars are rendered into the iFrame apps by Facebook. But not to worry, there is a workaround to this. In this article we will tell you how to resize iFrame & remove scrollbar from your iFrame facebook app.
There are two ways of doing this resize thing. One - using the latest Facebook Javascript SDK and two - using the old Javascript API. We will tell you using both.
Using the latest Facebook Javascript SDK
The code to setup the iFrame removal logic is pretty simple and is shown below. It uses the FB.Canvas.setSize method from the API. This method works when you know the height to which the iFrame has to be resized. So, what do you do when you do not know the height. Well, theres another method for that too!
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj = new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
Using Latest Javascript Facebook SDK [Without using Body OnLoad]
FB.init({
appId : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Canvas.setAutoResize(); //set size according to iframe content size
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Using the Old Facebook Javascript SDK
Here is the code snippet for removing scrollbar from iframe apps on Facebook that still run the old Javascript API of Facebook. This code snippet is taken from SO.
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>
Now you know how you can resize iframes according to your needs in Facebook iframe applications and remove the ugly scrollbar from it. If you are facing any problem with the implementation do write to me at: [email protected]. You can also hire me for developing Facebook applications for you. Here is a video of the entire implementation: (direct link to video)