Scroll To a Specific Location In The Iframe of Your Facbook App’s Canvas Page

After Facebook introduce iframe in their platform – many issues have risen. On of them was scroll bar and to scroll to top. To understand scroll to top problem- suppose the first page of you application has 800px height. then your second page is 400px. when your user goes from first page to second, he/she has to scroll to top to see the content of the second page.

So whats the solution, simple – FB.Canvas.scrollTo. See the code below for better understand

<!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></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', cookie:true, status:true, xfbml:true 
});
window.fbAsyncInit = function() {
	FB.Canvas.scrollTo(0,0);
	FB.Canvas.setAutoResize();
}
</script>
</body>
</html>

Simple Huh.

About Zakir Hyder

This entry was written by .

06. July 2011 by Zakir Hyder
Categories: Facebook, Social Networking Application Development | Comments

Comments

  1. […] Scroll To a Specific Location In The Iframe of Your Facbook App’s Canvas Page Thursday, July 07, 2011 2:18 AM After Facebook introduce iframe in their platform – many issues have risen. On of them was scroll bar and to scroll to top. To understand scroll to top problem- suppose the first page of you application has 800px height. then your second page is 400px. when your user goes from first page to second, he/she […] […]

  2. […] I called the FB.Canvas.scrollTo(0,0); to scroll to the top. See this post for further information. Then i call the move_to_top() function. Now i check for div with fb_dialog […]