As we know that Facebook has introduced iframe Tabs for Pages. I have developed an application and added the tab of the application in a profile page, application tab is opened
Updated code for everyone having issues:
1) Set your application "Canvas Height" to "Fluid".
2) Copy + paste the following code before the closing <body> tag.
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
// Called when FB SDK has been loaded
window.fbAsyncInit = function () {
// Initialize the FB javascript SDK
FB.init({
appId: '[YOUR APP ID]',
status: true,
cookie: true,
xfbml: true
});
// Auto resize FB Canvas
FB.Canvas.setAutoGrow();
};
// Load the FB SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
Hey guys... I was having problems with it as well.. i have tried a myriad of solutions and suggestions and they never worked for me. After I changed the jquery library 1.6 to the 1.5.1 it worked. Check if that is your problem.
Now I am trying to know why the hell it does not work with the version 1.6 of jquery.
For anyone like me who tried all of the above to no avail, here's what finally worked for me. Taken from this page: https://www.facebook.com/note.php?note_id=10150149060995844
Before </head>
:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize({ height: 'HEIGHT YOU WANT', width: 'WIDTH YOU WANT' });
}
</script>
Then before </body>
:
<script type="text/javascript">
FB.init({
appId: 'XXXXXXXXXXX', //Your facebook APP here
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true// parse XFBML
});
</script>
The following guide helped me through the same problem:
http://www.hyperarts.com/blog/facebook-iframe-apps-getting-rid-of-scrollbars/
In short, do the following:
Change your "IFrame Size" to "Auto-resize"
Load Facebook's Javascript SDK
add the following code just before the </body>
tag of your index page:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR-APP-ID-HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
Put the following code before the </head>
tag:
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
That should do it, hope it helps!
facebook recently changed something, now your tab file also needs the fb.init
method. otherwise the resize wont work. so use this in your tab page as well
<script type="text/javascript" charset="utf-8">
window.fbAsyncInit = function()
{
FB.init({ appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Canvas.setAutoResize();
FB.Canvas.setAutoGrow();
}
</script>
It's quite easy to achieve. You have to set up the application in the Facebook Integration tab as an IFRAME and the size of the frame as "Auto-resize".
Now, on your server, you have to add the following code before the </BODY>
tag:
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setSize();
</script>
This will auto resize it. It also helps if you add overflow:hidden to the BODY tag.