How to create a mobile accessible Facebook Page Tab App

In order to create a Page Tab App which has a mobile accessible version (an external website accessed directly, not via a Facebook iFrame). You need to add and configure 3 different “Platforms” in the app developer settings. These should be configured as follows:

Page Tab

Configure this as you would normally.

• Page Tab Name: the name you want to appear on the page tab
• Page Tab Url: the url where you are hosting the page tab app (e.g. http://myapp.com/page-tab)
• Secure Page Tab Url: the same thing but with https in front (e.g. https://myapp.com/page-tab)

Website

This is where you configure the url for your mobile site

• Mobile Site URL: This is the url you want mobile users to be redirected to (e.g. http://myapp.com/mobile-version)
• Site URL: This is used for Facebook Connect, if you are not using Facebook connect, just put your mobile url in here too.

App on Facebook

This is going to be the gateway to your app. Mobile users arriving on this page will be redirected to the mobile website. You can use javascript to redirect desktop users to your Facebook Page Tab App.

• Canvas App Page: this will be http://apps.facebook.com/my-app-namespace, this is the link you will post on your facebook wall or in your ads, or anywhere else you want to link to your page tab
• Canvas Url: this is a link to a page on your app that will be embedded as an iframe on the canvas app page. You will use this page to redirect to your page tab using JavaScript. e.g. http://myapp.com/canvas-redirect
• Secure Canvas Url: This is the same as above but with https in front (e.g. “https://myapp.com/canvas-redirect“)

Your Canvas Redirect Script

You want people arriving at your canvas app on a desktop browser to be redirected to your page tab app. Because it is loaded inside an i-frame, the only way to do this is using JavaScript.

This will be the content of your Canvas Url (http://myapp.com/canvas-redirect above):

<script>top.location="http://facebook.com/page_tab_url/app_1234"</script>

Note the “top.location” – this will redirect the parent window, not just the iframe to the page tab. When a user arrives on the canvas page in a desktop browser, they will be redirected via JavaScript to your Page Tab App. Mobile users will be redirected by Facebook to the Mobile Site Url you specified above.

Testing in Sandbox Mode

If your app is in Sandbox Mode, only admins, developers or testers of the app will be able to see it. In particular users not logged into Facebook, or who are logged into Facebook but are not admins or testers of the app, will not be able to access the app canvas page – they will just see a 404 error. In order to test your mobile redirect when the app is in sandbox mode, you need to ensure that you are an an admin, developer or tester of the app AND you are logged into Facebook’s mobile site on your phone’s web browser – i.e. Safari on iOS and Chrome on Android. It is not sufficient to be signed into the Facebook Mobile App on your phone, you must also be logged in using the browser.

A note about User Roles

You can configure the App User Roles by clicking on the “roles” tab in the app settings. You can add a Facebook user, or a Facebook Group as any of the roles. (If you add a Group, all the users in that group will have the role specified in the app). In order for a user to have a specific role on an app, they must:

• Verify their facebook account: http://www.facebook.com/help/verify
• Install the Facebook Developer app https://developers.facebook.com/

(Edited to reflect updated Dev Settings UI and readibility)