Vertical scroll down navigation for Facebook app?

Question

I am designing a web app that must live both on 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?

Thank you!

Answer 1

It shouldn't be a problem, since you have full control of your content. The only thing you use is Facebook trust in the form of Facebook login and the iFrame. Just keep your vertical scroll within the app - and you'll be fine.

^{download bmml source – Wireframes created with Balsamiq Mockups}

This is not to say that it's good UX - but a lot of apps uses the same technique making it close to a conventon. What you could do is implement full screen mode, but I'm not sure that is allowed to be a default setting.

Answer 2

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.

Answer 3

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/