How to quickly create a Facebook Page Application for Timeline

Facebook has some of the best and brightest young people working for them, but somehow they’ve managed to provide some of the worst documentation for developers of their platform. Due to lack of properly organized documentation, setting up a simple Facebook application can be a frustrating task (even with Google at your disposal). We’ve prepared this guide to get your Facebook application off the ground FAST.

Two things you’ll need before we proceed:

1. A domain with an SSL certificate to satisfy Facebook’s mandatory secure connection.
2. A marked up webpage that will act as your application. This is essentially a basic website that we will be embedding into an iFrame on Facebook. This should live in a directory on your secure server. You also need to ensure that you are loading the JavaScript SDK on your webpage.

Sign Up for Facebook Developer

The first step is signing up for a Facebook Developer Account. Here’s how:

1. Sign up for Facebook. If you already have an account, you can skip this step.
2. Visit the Facebook Developer website. Navigate to the apps tab on the developer toolbar (top right, next to your name).

1. Facebook will ask you to install the Facebook Developer App. Click the blue “Go to App” button.

Create the App

Now that you’ve installed the developer tools, navigate back to the apps tab. Click the + Create New App button. Fill out the form with the basic app information.

• App Name: The name of your app.
• App Namespace: For this example, you can leave this blank. This is used for custom Open Graph actions and objects.
• Web Hosting: Also leave this unchecked.

Submit and verify your submission with a captcha security check.

Basic Setup

You should be redirected to your app page. If you ever need to get back here, select the apps tab and find your application on the left-hand side of the page. Select edit settings in the top right-hand corner.

Next, we will upload our app icons. You can upload by clicking edit icon below the App ID at the top of the page. The dimensions for icons are as follows:

• Large Icon: 75 x 75px
• Small Icon: 16 x 16px

Save, and refresh the page. Your icons should appear.

Now fill out the Basic Info section. The important items here are App Display Name, Contact Email and App Domain. The App Domain will authorize the domain where your app is hosted.

Creating the Tab

There are different types of apps that can be created. For this guide, we’ll be creating a simple app tab. Many business pages use these to promote interactive content for their brand pages.

Start by clicking the Website option below the basic info. Enter the URL path of the Facebook application you have on your server.

Next, select the Page Tab option and fill out the information. The Page Tab URL and Secure Page Tab URL can be filled out the same as the Site URL field we just entered. After a bit of experimentation, I’ve found that you need to have the secured version (https) AND non-secure version (http) concurrently uploaded to your domain. If not, users on a connection that is not secure will be greeted with a blank page.

Do I need an SSL certificate to run my Facebook app?

Yes. As of October 1, 2011, Facebook no longer allows apps to run without a secure URL.

Ensure to upload a Page Tab Image. This image will be displayes beneath the Cover Photo of your page. The dimensions for this image are 111 x 74px. For the Page Tab Width, I’d suggest using the Wide option.

These are what my settings looked like after basic implementation:

Adding the Tab to Your Page

The easiest to add your tab app to your Facebook Page is to copy the below URL into your browser window while logged into your developer account. Ensure you have replaced the APP ID and URL with your own information.

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

Below is a screenshot of where you can find your APP ID and URL:

After successfully entering the URL in the browser, you will see the Add Page Tab screen. Select the page you would like to add your app to from the dropdown menu. Click the Add Page Tab button.

Displaying the Tab

After adding the app to your page, it should be hidden underneath the other page widgets. Navigate to your Facebook Page where you added the app. Click the arrow on the right hand side of the page, this will show you all of the apps installed on the page. By clicking the top right-hand corner of your newly created app, you can now swap positions with other apps.

Now that you’re app is displaying correctly, you can navigate to your app and view it as a standalone page. If you encounter problems, make sure to double check for correct directory URLs in your app settings.

Facebook is constantly evolving and inconsistent with their documentation, but hopefully this is enough info to get your app off the ground and running quickly.

An example of our completed app can be viewed on our Facebook page. In addition, some of our other work has harnessed the power of Facebook.

2 Responses to How to quickly create a Facebook Page Application for Timeline

1. May 25, 2012 at 11:50 am

   Will

   Awesome! This is super helpful, thanks for posting it.

2. June 6, 2012 at 10:54 am

   Jeroen

   Hey, Thanks for this How-to, but I have a problem. Everytime I use the link to add the Tab to my page I get an error that something went wrong.