Making A Facebook Tab App – The Simple Guide
These instructions are simple a step-by-step guide to transforming a website into a Facebook tab app for pages. They are current as of 2013 Dec 6th. If you have any suggestions for improvement or if they become out of date please let us know.
You will need:
- A verified Facebook account
- A domain with the content you wish to turn into an app hosted on it (content should all be capable of being delivered securely)
- An SSL certificate for that domain
- Go to https://developers.facebook.com/ you will be greeted with a page that looks something like this:
- At the top of the page click on Apps now click on the +Create New App
- A dialog box will appear, were it has App Name type any name you want (it doesn’t have to be unique). Ignore the middle box, but in the App Category select Apps For Pages
- Complete the CAPTCHA
- This is the main app page. Change the display name to what you want and update the email if needed, ignore the other top fields for now. Now click Page Tab at the bottom of the list and fill in the following: Page Tab Name – this will be shown under the tab, Page Tab URL – we tend to just put the secure URL in here as Facebook always uses https anyway, Secure Page Tab URL – this is the page address starting with https, for it to work you need a valid SSL certificate installed on your site (make sure that it matches the domain and does not give any warnings)
- Add an image for your page tab by clicking on the + next to Page Tab Image. The image can be in any JPG, Gif, or PHG, but it’s limited to 111x 74. Which as you can see form my ugly demo image here is very small.
- One last thing to do before we install the app and that is switch it to live mode so go to SandBox Mode near the top of the form and click on disabled. Then click Save Changes at the very bottom of the form. You will now see the orange sandbox indicator turn to green and once you’ve waited for Facebook’s servers to update you have yourself an app
You then need to format at line that looks like this
https://www.facebook.com/dialog/pagetab?app_id=App Id Number&next= The Page Tab URL
e.g. our tutorial app has an id of 1437667946446088 and is hosted on https://fbpage.we-convince.com/
so the line looks like
https://www.facebook.com/dialog/pagetab?app_id=1437667946446088&next=https://fbpage.we-convince.com/
- Make sure you are using Facebook as yourself not as a page and enter the line you created in the address box of your browser.
- Facebook will then ask you which page you wish to add your app to. Select the right page and click Add Page Tab
If successful you’ll be taken to your page. If this doesn’t come up check the Page Tab URL and the App Id number in your line, and also that you disabled sand box mode and didn’t enable any of the other ways of integrating an app with Facebook (if you want to add others e.g. like gateswe found that it works better just to create separate apps)
Finished Now Test Your App
Go to the page that you installed the tab on and click on the app tab (if you can’t see it then click on the down arrow to expand the tab page, hover over the tab until you see a pencil icon and swap the tab with one on the top line)
If you click on the tab you’ll find that you are now the parent of a new app in all its 810 pixel wide glory. Well Done!
Tips: If you include iFrame material in your app for example a YouTube video you will need to use secured https links for it to appear on Facebook under IE. Also apps and page tabs don’t work well in Facebook’s mobile apps so you might also want to give out the direct link to the page for mobile app users.