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:
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.
Now let’s look at each of the main areas:
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)!
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.
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.