how to make basiuc apps in facebook

Google+ Pinterest LinkedIn Tumblr +

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.

Before we get into each of these areas, let’s look at how to display content in them. Facebook has made their own markup language named 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, 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.

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)!

Share.

About Author

Leave A Reply