30 MAR

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

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/dialog/pagetab?app_id=197179240385151&next=http://www.sample.com/my-facebook-app/

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 src="http://connect.facebook.net/en_US/all.js"></script>
<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!

Tags: , , , ,

Written by Stewart Doxey

Stewart is a web developer at Evoluted. He spends his days mixing HTML and PHP, with a sprinkling of jQuery into standards compliant, user friendly web experiences. By night he enjoys all the things a lad in his twenties should be enjoying. Stewart is once again the office's Fifa 11 Champion. Read more posts by Stewart Doxey

Free social media icons for every subscriber

Sign up to our mailing list to have new updates delivered straight to your inbox. Every subscriber will get a free pack of social media icons!


18 Comments

  1. Vio

    April 13, 2012 at 11:32 am

    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?

    • team

      Stewart Doxey

      April 13, 2012 at 4:40 pm

      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

  2. Erwin

    April 24, 2012 at 11:18 am

    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

    • team

      Ash Young

      May 14, 2012 at 8:26 pm

      Hi Erwin

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

  3. Joe

    May 09, 2012 at 12:54 pm

    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.

    • team

      Ash Young

      May 14, 2012 at 8:29 pm

      Hi Joe

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

  4. Matthias Mair

    May 18, 2012 at 1:53 pm

    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:)

    • team

      Ash Young

      May 18, 2012 at 9:24 pm

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

  5. moe

    June 08, 2012 at 5:52 pm

    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

  6. bimbolera

    June 09, 2012 at 8:03 am

    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

  7. Robbie

    June 24, 2012 at 1:05 am

    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

  8. Raj

    July 04, 2012 at 2:15 pm

    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…:(

  9. matthias

    July 18, 2012 at 8:45 pm

    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…

    • team

      Stewart Doxey

      September 10, 2012 at 9:23 am

      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

  10. Leumas

    October 31, 2012 at 2:08 pm

    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?

    • team

      Ash Young

      November 06, 2012 at 11:14 pm

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

  11. Charlie

    October 31, 2012 at 11:19 pm

    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?

    • team

      Ash Young

      November 06, 2012 at 11:13 pm

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

Leave your comment