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 1st 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.

Aaron Dicks

Managing Director

Managing Director of Impression. Search engine optimisation, paid media and web analytics consultant. Also web developer and digital all-rounder. @aarondicks

8 thoughts on “How to make a Facebook Page Tab Application

  1. Avatarmplsdancehall says:

    Hi Aaron, can you please help me figure out what I am doing wrong?
    I see the 191 error when I go here—> https://www.facebook.com/dialog/pagetab?app_id=426942894042914&next=www.zionhighness.com

    At first I had additional App Domains: zionhighness.com m.zionhighness.com, http://www.zionhighness.net, m.zionhighness.net… but I removed them when I was receiving the error.

    Thanks!
    ~ Sara

    1. AvatarAaron Dicks says:

      Hi Sara
      Thanks for reaching out. Add http:// to the start of your URL in App Domains and you should be up and running in no time!
      Aaron

      I.e. (https://www.facebook.com/dialog/pagetab?app_id=426942894042914&next=http://www.zionhighness.com)

      1. Avatarmplsdancehall says:

        Thank you! Sounds so simple 🙂

  2. Avatarplanetchris says:

    Please be clear. You state, “the URL will be the one you have used in the Page Tab setup section.” Which one? the http or https one? Also, you have next=YOUR_URL but the code from facebook’s developers pages has redirect_uri Please explain more about the redirect_uri, as it makes no sense to me.

    1. aarondicksaarondicks says:

      Hi @planetchris:disqus
      It’s been some time since I developed a Facebook app. If the query is only really around the redirect URI parameter, I’d just try both until you hit success.
      If you can, please post a screenshot or more info here and I’ll do my best to help you diagnose the query
      Thanks for stopping by
      Aaron

      1. Avatarplanetchris says:

        Thanks for the reply Aaron. I can’t find any clear documentation about what exactly the next parameter should be. Here’s a screenshot. And after trying both, it seems they both work, but it should be clear which one to use.

        1. aarondicksaarondicks says:

          Hi @planetchris:disqus
          You’ll need to enter the tab name in #1, then the non-secure and secure website URL in #2 & #3.
          Facebook has for some time required HTTPS versions of page tabs.
          Hope this helps? If not, please clarify question more and I’ll do what I can!
          Thanks
          Aaron

          1. Avatarplanetchris says:

            I mean, which of those URLs do you use when you construct the url to add the app to the page (as shown in step 3 of your tutorial)?

Leave a Reply

Your email address will not be published. Required fields are marked *