Facebook apps, auto-resize and scroll to top
Have you ever written a Facebook application?
One of the most common problems for iframe apps is making canvas auto-resize. It’s solved this way:
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'YOUR_APP_ID_HERE', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();
};
(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>
Place this snippet after the body tag, and set your application (at facebook developers config center) to be auto-resizable. And that’s it!
Other common problem is how to make window scroll up when you click on a link. Usually the page renders but leaves you at the same vertical position you were before clicking.
If you are suffering this and you are using jquery, you can solve it this way:
jQuery(document).ready(function($) {
scrollTo(0,0);
FB.Canvas.setSize({width: 760, height:$('body').height()+20});
});
function scrollTo(x,y){
$("body").append('<iframe id="scrollTop" style="border:none;width:1px;height:1px;position:absolute;top:-10000px;left:-100px;" src="http://static.ak.facebook.com/xd_receiver_v0.4.php?r=1#%7B%22id%22%3A0%2C%22sc%22%3Anull%2C%22sf%22%3A%22%22%2C%22sr%22%3A2%2C%22h%22%3A%22iframeOuterServer%22%2C%22sid%22%3A%220.957%22%2C%22t%22%3A0%7D%5B0%2C%22iframeInnerClient%22%2C%22scrollTo%22%2C%7B%22x%22%3A'+x+'%2C%22y%22%3A'+y+'%7D%2Cfalse%5D" onload="$(\'#scrollTop\').remove();"></iframe>');
}
</script>
Same as before, place this snippet after the body tag and you’re done.
I don’t remember where I got these snippets. Just wanted to share them because they’re really useful, and because I usually forget them and have to rescue backups of older apps heheh
Hope it helps!