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 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.
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!
13 Comments
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 replyHi 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,
Post replyStewart
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 replyHi Erwin
The information is saved within our local database as we host the pages you are viewing within the Facebook application.
Post replyHello,
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 replyHi Joe
Most reliable hosting companies will offer SSL hosting although you may need to have a VPS or a full server.
Post replyHello,
thanks for this great tut!
Post replyNow 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:)
We'll see what we can do, other webspace is very easy to come by if you're having problems on Heroku though.
Post replyhi,
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 replyhi,
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 replyThanks 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 replyHi 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 replygreat tutorial!
Post replybut 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...
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 replyHello 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:
Post replyhttps://www.facebook.com/4oh4.php
That is not being done correctly?
Have you managed to make this work? Are you able to share with us the app you're having problems with?
Post replyHi, 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 replyYes, 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 replyMy brother recommended I might like this website.
Post replyHe 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!
Wow, that's what I was searching for, what a material!
Post replyexisting here at this blog, thanks admin of this site.
Leave a comment