I am designing a web app that must live both as a Facebook app and on a external website.
The website is designed as vertical scroll-down website with 3 sections.
How do I translate this kind of interaction on Facebook?
-
Your question is overly broad. Please narrow it down.– JohnGB ♦Feb 19, 2013 at 15:17
Add a comment
|
2 Answers
First, it would help to know if your app is going to be a Canvas app or not. Canvas apps can be as wide as the browser will allow and non-canvas apps are 810px wide. In both cases, apps will allow the content area to grow, meaning the canvas will resize itself to fit your content and removing the need for scrollbars within the app.
I don't suggest using vertical scrollbars within an app frame. If the app frame height is greater than the browser window height, then once you've scrolled to the bottom of the app frame you'll start scrolling the page. This can be especially annoying once you start to scroll back up.
I'd reccomend against vertical scrollbars, best case it's an unnecessary interaction, worst case it's a discoverability issue for your content rendering below the iframes bottom fold.
To get around it;
If you know the height of the three sections simply set the height of the iframe accordingly.
If that's not possible, Facebook provides a JavaScript method for resizing the iframe dynamically based on the height of the content in it; https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/
