Tutorial: Creating a Facebook timeline app

30 March, 2012

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%.

Evoluted Ping Pong Facebook Page App

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

Create New Facebook App Popup

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.

Facebook Apps Basic Settings Window

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.

Your Profile Favourites

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.

Evoluted Facebook Profile App Page

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

Written by Stewart

Having been with Evoluted for more than 9 years, Stewart has helped to develop successful websites for countless clients. With vast experience related to web development, he’s comfortable putting his skills to use across a wide variety of projects. His ability was highlighted by the key role he played in a site we built for Bamboo Travel, which won best website at the 2013 Wanderlust Travel Awards.

Up next…
Digital copywriting trends for 2012
8 February, 2012

13 Comments

Vio
16th October 2017 at 9:16am

Hi! I have created a page tab app like I did many times before, following all the usual steps you described. However, when entering the URL to add the tab to my page, nothing seems to happen, I just get redirected to the given URL. Thus, the app is not available on my page and does not appear anywhere - neither in the app displays nor in the edit menu of my page. How can this be?

Post reply
Stewart Doxey
16th October 2017 at 9:16am

Hi Vio

Facebook recently turned off support to apps that are not hosted behind an SSL certificate so this would be my first thought as to why your app is not working. If this is not the case then my second thought would be to double check the URL you are using for your app and your app id within the URL to add your app to the Facebook profile.

Thanks,
Stewart

Post reply
Erwin
16th October 2017 at 9:16am

Hi. Great article! One short question about your Ping pong game: how are stats en rankings saved? Can you use functions from the Facebook API or do you save them in your own database?

Regards! Erwin

Post reply
Ash Young
16th October 2017 at 9:16am

Hi Erwin

The information is saved within our local database as we host the pages you are viewing within the Facebook application.

Post reply
Joe
16th October 2017 at 9:16am

Hello,

This tutorial was great. Very informative. I'm wondering if you have any good SSL hosting suggestions?

The service facebook recommends is Heroku but it requires everything to be uploaded via terminal and has proven difficult for me with little support documentation.

Post reply
Ash Young
16th October 2017 at 9:16am

Hi Joe

Most reliable hosting companies will offer SSL hosting although you may need to have a VPS or a full server.

Post reply
Matthias Mair
16th October 2017 at 9:16am

Hello,

thanks for this great tut!
Now I have an app,but I made it on Heroku cause I have no webspace. Could you do another tut where you host your files on Heroku pls:)

Post reply
Ash Young
16th October 2017 at 9:16am

We'll see what we can do, other webspace is very easy to come by if you're having problems on Heroku though.

Post reply
moe
16th October 2017 at 9:16am

hi,

thanks for the amazing tutorial here, i can say this is the easy part, can you guys give us a more details for next param where user will add the page and if i want to authenticate the users i hope to understand the redirect_uri things .. thanks alot if you could help in this

Post reply
bimbolera
16th October 2017 at 9:16am

hi,

great write up! it helped me! thank you very much but i have a question, i have a promo like app in facebook timeline but why is that every time i submitted my form via post, it opens a new window (where my original site resided) and displays the landing page after the form is submitted? thanks in advance! :D

Post reply
Robbie
16th October 2017 at 9:16am

Thanks for the great tutorial for facebook app development. I used your article (along with several others) to create a facebook timeline app that allows job seekers to apply right from my clients Facebook page. The real beauty of it is that it is completely managed from their Wordpress admin. Thanks for the tutorial and here is a link to the project... https://www.facebook.com/pages/KG-Distributing/282330241849863?sk=app_371748349535547

Post reply
Raj
16th October 2017 at 9:16am

Hi Stewart, I must say this is a brilliant tutorial I have ever found in web.Thanks a ton.Only problem I am facing that is my template is designed in 980px width but the timeline supports only 810...:(

Post reply
matthias
16th October 2017 at 9:16am

great tutorial!
but I have a problem with the showing of my canvas page.
did you link to a directory where you placed a jpg-file or to a html? I couldn't figure out where my problem is...

Post reply
Stewart Doxey
16th October 2017 at 9:16am

Hi Matthias

As far as I am aware Facebook only allows you to show PHP files as an app's landing page, not JPEG or HTML files.

Thanks

Stewart

Post reply
Leumas
16th October 2017 at 9:16am

Hello Ash Young, Stewart Doxey

I have an APP on Facebook, with my own domain. COM.VE + SSL certificate, and when I run the application from my Facebook profile this run smoothly and when tested from another profile yields a, and sends me to the following URL:
https://www.facebook.com/4oh4.php
That is not being done correctly?

Post reply
Ash Young
16th October 2017 at 9:16am

Have you managed to make this work? Are you able to share with us the app you're having problems with?

Post reply
Charlie
16th October 2017 at 9:16am

Hi, I was wondering if there is a way to create an app where you can post to timeline from an external site, a link for instance? So.. on a web page you can have a link reading "share this" and it posts it to timeline as "Joe Bloggs shared a link" or something similar?

Post reply
Ash Young
16th October 2017 at 9:16am

Yes, this is possible. Facebook have widgets available that you provide this functionality. I'd suggest trying their developer site to begin with https://developers.facebook.com/.

Post reply
comment être riche
16th October 2017 at 9:16am

My brother recommended I might like this website.
He was entireloy right. This publish truly made my day.
You caan not consider simply how so much time I had spoent for this information! Thank
you!

Post reply
Soccer free betting cash back
16th October 2017 at 9:16am

Wow, that's what I was searching for, what a material!
existing here at this blog, thanks admin of this site.

Post reply

Leave a comment

Replying to: - Cancel