Jonathan Keebler

Facebook Application Basics

As you may have noticed, I released my first Facebook Application into the wild yesterday. Since then, a bunch of people have asked me how the Facebook platform works and what it can do. Unless I’m missing them, the Facebook developer area is lacking some of the fundamentals of building an application, so I thought I’d give a brief overview here.

Basically, there are three main areas inside Facebook that your application can play with:

  1. Facebook Canvas pages which let you embed your content on a page inside Facebook accessible from the left-navigation
  2. A Profile Box which sits on your profile page and is visible by all your friends
  3. Your news feed which appears on your profile page, and is visible by your friends on their home page

You can build a Facebook Application using just Canvas pages without ever touching the API. All you need are basic HTML skills and a server. Using the API requires some programming knowledge and the handling (and storing) of a session key on your side.

Before we get into each of these areas, let’s look at how to display content in them. Facebook has produced their own markup language called FBML. As you can see in their docs, it’s basically just HTML but without the HTML, HEAD, or BODY tags, no javascript, and a bunch of tags that have special functions in Facebook. For example, <fb:share-button class=”url” href=”http://www.keebler.net”/> displays a share button that will share my blog’s URL. Some areas only allow a subset of FBML (i.e. the news feed), but in general, anything you can do in HTML, you can probably do in FBML. It even has some “Ajax” functions that allow you to load in pieces of FBML dynamically.

Now let’s look at each of the main areas:

Facebook Canvas Pages

Using canvas pages, you can embed pretty-much any functionality you want into Facebook. When you set-up an application, Facebook will ask you for your canvas page URL. The name is a little misleading because it’s actually asking you for a directory on your server where you will serve up pages for Facebook. Just give it something like http://www.yoursite.com/facebook/ and put a default page in that directory (e.g. index.html). When you go to your canvas page within Facebook via something like http://apps.facebook.com/YOUR_APPLICATION (which is accessible from the left-navigation) Facebook will request the page from your server and serve it up within the Facebook interface i.e. with their top-navigation and left-navigation. You can run whatever type of code you want on your side to generate the page (i.e. PHP, ASP, HTML), as long as it serves up as FBML.

Now here’s the really cool part: you can use relative links from your root canvas page (e.g. http://apps.facebook.com/YOUR_APPLICATION which inside Facebook is http://www.yoursite.com/facebook/) and Facebook will display those too. For example, if you have an about page on your web-server at http://www.yoursite.com/facebook/about.html, you can put an anchor <a href=”about.html”>About</a> in any FBML and Facebook will serve it up at http://apps.facebook.com/YOUR_APPLICATION/about.html. The same goes for images, forms…anything!

Using these techniques, you can build out very complex applications directly within the Facebook interface but within the context of a Facebook account with all it’s social data (like friends)!

Profile Box

The profile box is a great way to show something unique to the user whose page it’s sitting on, and advertise your application to their friends (hopefully they’ll see the “Add” button at the top-left of the box and add it to their own Facebook account). If you want to just display something basic across all your users, you can set the “Default FBML” field in your application settings. To put personalized content into the profile box, you have to use the full Facebook API using a client library. You will use the facebook.profile.setFBML function’s “markup” parameter to pass in the FBML you want to display inside the box.

News Feed

The news feed works very much like the Profile Box but you are only allowed to use a subset of the FBML. Using the Facebook API, you call the facebook.feed.publishActionOfUser function setting the “title” and “body” parameters. A news feed item will be added to the user’s profile page, and also be visible on their friends’ home pages subject to some constraints. You can only add about 5 news feed items per user per day, after which they will no longer appear until the next day. You probably want your title to look something like this: <fb:userlink uid=”12345″ shownetwork=”false” ifcantsee=”Your friend” /> just did something in <a href=”http://www.yoursite.com/”>your application</a>!


I’m really just scratching the surface of what you can build into the Facebook platform. You are only limited by the functionality you can build on your side since Facebook is only displaying what you pass it. Translation: we’re going to see some cool stuff! I’m sure the applications we’ve seen so far are nothing compared to what people will build in the months to come. I, for one, welcome our new Facebook overlords :)


Comments RSS Both comments and pings are currently closed.

59 Responses to “Facebook Application Basics”

« Older Comments
  1. Im looking for someone to turn our website (youtube downloader) into a facebook app

  2. [...] TRUWinnipeg.org added an interesting post today on Facebook Application Basics | Keebler/BlogHere’s a small reading Bookmark this on Delicious – Saved by josephlavoie to Facebook howto tutorials tutorial webdev web webdesign social programming application api [...]

  3. Omer Khan says:

    Hello all,

    My name is Omer Khan, senior consultant with KHK Partners, a 30 year old management consulting, executive search and IT consulting organization with global outreach. We have alliances with the top Fortune 500 level firms as well as the most innovative and growth bound SMB’s in the marketplace today. One of the firms I am consulting is a leader in developing social games. In due time they will exceed the scale of a Zynga or an Acclaim type organization in California.

    Location: downtown, Toronto

    They have an excellent business model, phenomenal business acumen, great c-level management structure and a very dynamic and exciting corporate culture.

    They are looking for a stellar social game developer who has experience developing games and applications for social networking sites like Facebook or Myspace

    If you are you open to exploring this excellent opportunity then please send me your resume to khkit@rogers.com

    Awaiting your timely response

    Regards

    Omer Khan
    Senior Consultant
    KHK Partners
    http://www.khkpartners.com
    905-884-2794

  4. Irene says:

    Do you know how to make thesending apps? I want to make send a drink but i dont know how… Please help me?

  5. Joss says:

    Hi

    Facebook apps is very interesting, I like to build one. I want to make a game so i can have the oportunity to make some income. Also in facebook not all games are good, so I want a piece of that pie.

  6. [...] تفيدك: How To Make Facebook Applications – Learn How to Create Facebook Applications Facebook Application Basics | Keebler/Blog Digital Web Magazine – How To Build A Facebook Application Creating Apps for Facebook (New Stanford [...]

  7. [...] more info about Facebook application basics click here Share [...]

  8. thomans says:

    how can one make a game like farmville for an application i have my idea all ready but when i go to application it says server not found do i have to make a website that lets me do it if so which website?

« Older Comments