Menu
I have created a facebook app that will be displayed on my companies fan page as a tab. The app renders at 951px so it doesn't fit in the default height of the fan page tab. I've read facebook's horrible documentation for their js sdk and have tried so many different variations - all of them not working at all. Here's my current attempt to resize the fan page tab to fit my app...
<head>
<!-- css / js / meta info here -->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body>
<!-- content goes here -->
<div id="fb-root">
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId:'xxxxxxxxxx',
status:true,
cookie:true,
xfbml:true,
});
</script>
</div>
</body>
I've also tried async init and using setAutoResize() with no luck.
Thanks for any and all suggestions... B
654
<head>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.Canvas.setSize();
}
</script>
</head>
.
.
.
.
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId: 'xxxxxxxx',
status: true,
cookie: true,
xfbml: true
});
/* Init fb Resize window */
/* Completly removed now in JS SDK*/
/* FB.Canvas.setAutoResize(7); */
/* As of Jan 2012 you need to use */
FB.Canvas.setAutoGrow(7);
</script>
</body>
</html>
I just spent over an hour trying to fix this in my app and I wanted to mention a couple of basics that you have to follow for this to work.
There were no errors in my code, but it was refusing to work because I was including all.js and my JS code in the <head> element and my fb-root div was in the <body>. Here's what I had to change it to:
...
<head>
<!-- include jQuery so we can use window.load below -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
...
</head>
<body>
<!-- the div has to come first which forces the JS include and code to be put below it -->
<div id="fb-root"></div>
<!-- then we have to include the all.js file -->
<script src="https://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<!-- and finally we can use the FB JS SDK and it will actually work :) -->
<script type="text/javascript" charset="utf-8">
FB.init({
appId: '...',
status: true,
cookie: true,
xfbml: true
});
jQuery(window).load(function(){
//resize our tab app canvas after our content has finished loading
FB.Canvas.setSize();
});
</script>
...
Obviously the 3 elements I mentioned don't have to be right after each other, but they do have to show up in this order in your source code. This really threw me for a loop so hopefully this will save someone some time and frustration :)
24
It usually works if Facebook can calculate the height of your page. However if you have a responsive design this is not possible. I am using a hack that does the job using jQuery to calculate the height of the wrapper div and then explicitly set it:
FB.Canvas.setDoneLoading( function(result) {
FB.Canvas.setSize({height: $('#wrapper').height() });
});
This should go in your FB.init() method.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With