How to make a Facebook Page Tab Application

The new Facebook Timeline for Pages layout allows for businesses to include up to 12 applications on their page – 4 of which are featured as ‘tabs’ within the header area. Of these, one must be Photos, but the others can be customised by the page owners, and can include Facebook’s own apps, third party apps from the app store, or completely bespoke apps made for the business.

Facebook Application Tabs for Pages – as seen on the Facebook Marketing Page

If there is already an application for what you are looking to accomplish, or you don’t mind utilising an already-made third party app, then head over to the Facebook App Store.

If you’re interested in developing an app for your page, then read on!

Step 1. Create your first Facebook Application

Sign up as an application developer with Facebook and create your first app through the Facebook Developers website.

Clicking on ‘Create new App’ gives you this dialog box.

Enter your App name and the app namespace (this can be anything) and you have set up your first Application!

Hosting

A quick side note about hosting. Many SME’s and businesses are likely to be able to host their files on their own web server, but for individuals, charities and those without this facility, Facebook and Heroku have teamed up to provide a free cloud hosting option. This is outside the scope of this article, but to find out more about Heroku, check out their website (www.heroku.com).

By signing up without hosting we’re assuming we have the capacity to develop a single page elsewhere on the internet. Store it in a safe place on your server, and keep the URL as we’ll need it later down this page.

Since October 1^st 2011, Facebook has required secure hosting of apps for those users choosing to browse in secure (https://) mode. As such, it’s necessary for businesses to ensure their server is capable of providing this. Recently I managed to purchase a SSL certificate for under £10 for a year, and implemented it in approximately 30 minutes, so this is not out of reach of most businesses.

Step 2. Configure your application

Facebook will now a little about the application you’re creating, but we need to give it some more pointers on where to find the data it needs to display correctly for users. Once you have registered an app, as described above, you should see this screen:

This is the main settings screen for your application

Just enter your website’s domain name in the App Domains box and scroll down. If you’re planning on having more than 4 apps on your page, then uploading a small icon here is a nice touch – icons are visible when the tab pane is expanded.

Click the tick icons next to ‘Mobile Web’ and ‘Page Tab’ to open the additional input forms that we’ll need.

Mobile Web Setup

Any page tab application needs a mobile counterpart for mobile users. Mobile users will be taken away from Facebook’s interface and will see a (hopefully) mobile version of your page at the URL you specify here.

Page Tab Setup

Setting up the page tab should just be a case of uploading your preferred icon (111px x 74px) that will be used on the Page and the URLs to the content.

The dialog for setting up an application to behave as a page tab

Older tabs used to be limited to 520 pixels wide, but now these can stretch to 810 pixels. I’d recommend taking advantage of the full 810px width for any new apps you’re thinking of building.

Once we’re all done, then just click Save Changes at the bottom of the page, and we’re all set up and ready to put the app on the page.

Step 3. Pairing up the Application and the Facebook Page

To view the application on your Facebook page, you’ll need to ‘install’ it there. The following  URL will do just that – just replace the two variable names with your app-specific details. All of these can be found on the app page. Copy your app ID from the app details section at the top of the page, and the URL will be the one you have used in the Page Tab setup section.

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

If all goes well, then you should see the following box:

Add tab to page dialog

If there are any errors in your install URL, then you may be faced with the following error,

API Error Code: 191
API Error Description: The specified URL is not owned by the application
Error Message: redirect_uri is not owned by the application.

This error is caused when either the App ID or URL are incorrect, so check that the URL is the full path to the Facebook App content page and not your domain’s home page.

Step 4. You’re done! Arrange the tabs on your page

When logged in as a page administrator, you’ll be able to edit the order of the 4 tabs displayed on your page. Just hover over the top right hand corner of each to select which app tab to swap it with.

Once you’re done, you can start driving traffic to it directly by using it’s unique URL.

If you have any questions or need help in installing your own Facebook page tab then leave me a message in the comments below.