A Tutorial on ‘Facebook Applications’ …getting started!

To begin with, I want to first highlight how building an application for Facebook can be beneficial for a developer, and what opportunities it can create.

As Facebook themselves say:

  1. The nature of Facebook means that users will spread and quickly distribte an application worldwide – promoting yourself and your skills.   
  2. Not all applications have to be made for free, you could choose to build a business based around your Facebook application(s).

Throughout my series of blogs, I have researched some background information into the concept of Web 2.0 – and more specifically PHP, as well as investigating the potential Facebook has for PHP development and for web developers in general. Based on this I will now guide you through the steps needed in order to commence with building a PHP application for Facebook.

Gettin Started:

Note: Before you can even think about building an application for Facebook, just as I have outlined in a previous blog entry your computer must have a web server running PHP 5.

Step 1 – Joining Facebook! To develop an application for Facebook you must be a registered user so that you can access the relevant information through your account.

Step 2 – Once you have signed up for Facebook the next step is to add the ‘Developers’ application to your account. This can be located by searching for the application – Type ‘Developers’ in the applications search box. Having this application on your account allows you to add your new application to the Facebook Platform.

What is the Facebook Platform?

The Facebook platform is ‘a standards-based web service with methods for accessing and contributing Facebook data.’

Step 3 – With the ‘developers’ application now on your profile, click ‘add new application.’

The next steps are directed through by Facebook themselves, in the tutorial ‘Step-by-Step Guide to Creating an Application’ .

  1. Here are the steps for filling out the form:
  2. Application Name: for our app, we put ‘Tutorial Application‘ – you should put in a different name.
  3. Check the Terms of service box.
  4. Click on the Optional Fields link – this will bring up more options.
  5. Support E-mail: your Facebook contact email may be filled in automatically, but you might not want to give out your personal email to everyone who adds your app! You do have to put a valid email address that you can check, however.
  6. Callback Url: for our app, we put ‘http://tperry256.dreamhost.com/f8/tutorialapp/‘ – you should put something DIFFERENT – in particular, you should put the url of the directory on your server where you will create your application.
  7. Canvas Page URL: http://apps.facebook.com/: for our app, we put ‘tutorialapp‘ – you must put in a different name.
  8. Use FBML: keep this setting.
  9. Application Type: leave this set to ‘Website’.
  10. Can your application be added to Facebook: set to ‘yes’ – this will bring up more options.
  11. TOS URL: you can leave this blank.
  12. Post-Add Url: for our app, we put ‘http://apps.facebook.com/tutorialapp/‘ — you should put something DIFFERENT – in particular, you should put your full canvas page url.
  13. Default FBML: type in the text ‘hello’.
  14. Leave everything else under Installation Options blank.
  15. Side Nav Url: for our app, we put ‘http://apps.facebook.com/tutorialapp/‘ — you should put something DIFFERENT – in particular, you should put your canvas page url here as well.
  16. Leave everything else under Integration Points blank.
  1. Click on the ‘Submit’ button.
  2. Go the the ‘My Applications’ page and check that your application was created. There are a couple ways to get here depending on where you are in the Developer application.

Advertisements

2 Comments »

  1. Happy Said:

    Facebook’s API may be impressive from a techinical standpoint, but they can never hope to match the quality of community spirit displayed by http://www.b4uparty.com

  2. Matthew Said:

    Thanks this was extremely helpful!


{ RSS feed for comments on this post} · { TrackBack URI }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: