Facebook applications programme basic principle
As you might get commented, I released my first Facebook Application into the furious yesterday. As then, a bunch of people have asked me how the Facebook platforms 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 program using just Canvas pages without ever touching the API. All you need are basic HTML acquirements and a server. Using the API requires some computer programming knowledge and the handling (and storing) of a academic session key on your side.
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 About 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)!