Tutorial: Creating a Facebook timeline app

Facebook recently rolled out a new layout for profile pages, known as Facebook Timeline. This change in interface now allows us to create much richer, engaging applications (apps) due to an increase in page wide from 520 pixels to 810 pixels – a massive increase of nearly 55%.

We’ll look at how to integrate your new Facebook app within your Facebook profile and create an icon to display on your new Facebook Timeline profile page.

In this example I’m going to use some basic HTML mark-up taken from our very own Facebook ping pong league Facebook app page. One important thing to note at this stage is that as of 1^st October 2011 your app must be supported by an SSL certificate and be accessible via a https URL.

Step One

Head over to the Facebook Developers website and log in using your usual Facebook email address and password. Once logged in click on Apps in the header, this will take you to your Facebook apps dashboard, and then click on the Create New App button. In the Create New App popup that appears enter a name for your app and click Continue.

After creating the app we then need to configure all of the apps Basic settings (see image below). For every app that you create there is set of required basic information.

• Firstly set the App Display Name, this will be used when displaying the app on the Facebook Developers dashboard.
• Set a Contact Email, this is the email address Facebook will use to contact you with any urgent information or alerts relating to your app.

In this example we are creating an app for a Facebook Page Tab. Under the Select how your app integrates with Facebook header select the Page Tab section; this is where we’ll be entering details about the app itself and where it is hosted.

• Enter the Page Tab Name; this is displayed on the app page and on the app’s call to action button on your Facebook profile page.
• Enter the Page Tab URL, this is the URL where your app is being hosted.
• Enter the Secure Page Tab URL, this is the secure version of your Page Tab URL.
• Finally, select the Wide (810px) Page Tab Width and save your changes.

Step Two

Now we have our app page set up and saved we can add it to our Facebook profile page. There used to be a link to do this under the Related Links header but this has recently been removed. To get around this issue simply navigate to https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=http://THE_DIRECTORY_WHERE_YOUR_APP_IS_LOCATED (replacing YOUR_APP_ID and THE_DIRECTORY_WHERE_YOUR_APP_IS_LOCATED with your own credentials)

For example: https://www.facebook.com/dialo...

Your app id can be found on the Basic Settings page within your apps Facebook Developers dashboard, shown in the final image at the end of Step One. Providing you have entered your app id and the URL where the app is being hosted correctly you will see a new popup window on the screen where you can choose which of your Facebook pages the app is to be displayed.

Step Three

Your new Facebook Pages app will now display within your favourites on your Facebook profile page.

To edit your favourites click on the down arrow to the right of your favourites, hover over whichever button it is you’re wanting to edit and click on the pencil (edit) button that appears in the top right of the favourite button. Here you can change the title that displays underneath the item, add a custom image (like I have done on the above image) and change the order in which the buttons appear on your Facebook profile page.

Having issues with scrollbar’s displaying on your new app?

Occasionally you will find that your app is displaying with horizontal and/or vertical scrollbars. The vertical scrollbar displays because the script loading the Facebook page cannot correctly calculate the height of the iframe which holds the app. Consequently, the appearance of the vertical scrollbar causes the width of the iframe to decrease – forcing a horizontal scrollbar across the bottom of the app’s iframe container. A simple snippet of JavaScript can be used to help calculate the correct height of the iframe container. This should be added just before the closing body tag (</body>):

<div id="fb-root"></div>

<script>
FB.init({
    appId : 'YOUR_APP_ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
});
window.fbAsyncInit = function() {
    FB.Canvas.setAutoGrow();
}
</script>

You can read more about the setAutoGrow function over at Facebook’s Documentation pages.

If you notice that you are still seeing the scrollbars in Firefox then try adding ‘overflow: hidden’ to the body of your page through CSS.

body { overflow:hidden; }

Thanks to Jason Amor at HyperArts Blog for these tips.

We’ve recently added a custom Facebook Page to our Facebook profile page showing the offices ping pong rankings.

Feel free to leave a comment below showing off your own full width Facebook Pages!