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:
- Facebook Canvas pages which let you embed your content on a page inside Facebook accessible from the left-navigation
- A Profile Box which sits on your profile page and is visible by all your friends
- 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 
hey can we put a statcounter or other tracking code in our facebook so that we know when someone visited our profile?
I’m not sure that’s possible as of now. Most tracking code works by loading in an (invisible) graphic. Any images you include in the profile box are cached by facebook so you won’t be able to track properly. I’m sure someone will figure it out though
when you say to add the canvas url you say to put http://www.yoursite.com/whatever….but the options already have the http://apps.facebook.com part in there, and just want you to add to that. What should I do?
I’m trying to post images in the profile page, but they are not displaying … any ideas?
Are you sure they are absolute URLed and available on your server?
Can I add a javascript which remotely serves up a Flash file?
I haven’t had any success doing that yet.
Let me rephrase that question. I can get it to display the flash as an app from the left ha
nd column, but how do I embed it into the main page automatically?
Can u make an app that lets you pin a virtual condom on the wall to say how many girls or guys u have shagged? Cos me and my mates at college are having a competition and we thought we shud ask someone like u to help? Basically can u make a pinboard picture and then have a button so u can click everytime u have shagged someone knew and it displays your total number based on the number of used jonny pictures pinned on the pinboard?
raise your hand if you think Adam is retarded
hahahah *hand raised*
*hand raised* [:P]
i came here through google searching for a very basic question. i’m building my first facebook application, just for fun. its in php, and its my first application in php bar the helloworld i wrote before this. all i want is some text and a button on the profile box. upon pressing the button, the text will change. so i need some sort of that ajax functionality as well. i got the text in profile, but a bit confused how to put the button and how to get the text changed. could you please shed some light on this?
I was just wondering how I make italics, change font color, ect. within facebook.
Thanks! :]
@Kim: You can change fonts the same way you do with HTML/CSS
You just add CSS “STYLE” attributes to your text.
[...] Calm down… if you want to start creating your own Facebook application. Here is a tutorial that will teach you the basics. Don’t forget to check Facebook’s own Developer’s Area too. Lastly, here is a tutorial on developing a Facebook platform application with Ruby On Rails. Good luck with your application development! And don’t forget to donate some to AdesBlog if you become millionaire!
[...]
How odes one make money making Facebook applications?
Firstly HAND RAISED FOR ADAM! Idiot (why don’t you message the tool that made that anoying fishtank app and ask him.
Secondly, you go to college and you spelt ‘new’ with a k
(“so u can click everytime u have shagged someone knew”)
Onto something a little more mature, I have been reading through the FBML wiki and trying to understand the code to display an image from a site external to facebook, any info will help greatly.
Cheers,
-Nev
P.S. the code for this form seems to be unstable (maybe just my machine)
Oh and very informative Blog mate. I am also looking for any good book on FBML, facebook applications, etc.. if there is such a thing.
Any ideas, let me know. I have tought myself some code in bits and peices for web design using different books and sites like http://www.w3schools.com and would like to find something similar for facebook.
Cheers again,
-Nev
I have an idea for a facebook application but no knowledge to allow me to actually pursue it, if anyone knows what they’re doing and may want to hear it, email me: spencershubert@hotmail.com
I was wondering if I could create an app that would allow people to put comic sings in pictures, like those ballons that appear in comics saying things or just creating funny onversations and stuff. Does any one know if this is possible?
my email is spacedesigner@msn.com
I have an application idea but no idea how to make the application, it is a very simple application and would not take someone who knows what they are doing very long to make. if you know what your doing and would like to hear the idea please email me at gustav1908j@hotmail.com
thanks
Hi. Also looking for a developer-partner to help me create some facebook/myspace apps.
mattgfx (at) gmail.com
looking for some help on an app similar to your flicker 2 facebook app…can you please follow up w/me at uceceo[at]gmail[dot]com
I would like to create an application that contains a search box for my library’s catalog and an image of our sybol. Is it difficult to place a search box, much like the “JSTOR application” into an application to be used on my libary facebook page?
I want to make my own application
Where the document?
Alright… this may be out of my league as far as development, but i got some time and i really want to make an application based off the HBO Series : Entourage.
I want to make it similar to other show’s applications, such as the Addicted to Boy Meets World application. Any help would be tremendously appreciated
Hey .. anyone want to help me out with an app. and advise regarding this (maybe its just a bad idea) … its about a party/event app.
but if anyone is interested plz. mail me at miki@houseparty.dk or msn@houseparty.dk…
[...] Online Fandom wrote an interesting post today on Facebook Application BasicsHere’s a quick excerpt [...]
[...] Product Reviews Net wrote an interesting post today on Facebook Application BasicsHere’s a quick excerpt [...]
[...] Keebler/Blog you will find some basics to know before developping a facebook [...]
Hi,
if I create a new application of Facebook, will I be paid/get a share of the ads?
hey, I appreciate your help.
I really wanted to build my own applications for my own web site, I was wondering does one need to do a course in something , eg programming, in order to be able to achieve this?
Please give me a list of courses i should look into , or any self help books or web sites.
I’m a novice at building web sites, im currently learning how to use Dreamweaver CS3.
Thanks in advance.
Regards,
Miriam.
Hey if I’m making my application in visual studio, I know that I can host it locally and just link to the local host to get it to show up but only to me, no one else can access it. If I want to upload it to the web so that everyone can see it, what files/folders do I upload and what do I link to
I found this webite when randomly wondering how to create an application, this may sound like the most simple question but How do you get to the place where you can create an application? Is it on the Facebook website or do you have to download something?…I’m sorry if that sounded stupid but that’s all I was wondering.
Great Post man! I’m continually amazed by how difficult proprietary solutions make integration on various media. I understand Google is working on some sort of universal protocol for wigets/social media apps. Any thoughts on this?
Thanks for sharing some great information regarding applications.
This is just what I have been looking for for ages, thanks for the information.
I wanna start an uno application… how do i do that
because many people have asked, go here and click on the “add developer” link
Whoa Dude….
This isn’t making a ton of sense. I’m sure you’re explaining it fine, but I’m not working it out right or something.
I have a sever and basic…. basic, basic HTML knowledge.
Is there anyway you can explain this out to me from start to finish? My friend and I really want to make an app.
I can give you my number via email if need be. I’d eally appreciate your help.
I hope it’s not asking too much.
Thanks, Man.
can I drop my RSS feed into a facebook app?
This is by far the most elegant and above all most useful guide all over the internet. Thank you.
I had an idea to create an app so people could rate their landlords. If something like this exists, I’m find just adding it, but if not, could someone help me out on how to get started?
Am trying to attach my myspace page on my face book profile. How do i do that.
[...] applications (although it seems people are pretty much over them, myself included), check out this post by Jonathan which gives a run-down of the basics. Anyone considering Facebook should also read [...]
just want to know if we have to pay to add an application onto facebook??
There’s no fee charged by Facebook. You just need to pay for your own servers, etc. to run the thing.
Thanks Johnathon!
Jonathan (or anyeone else reading this) – can I pay you to build what is likely a relatively medium difficult level facebook app?
Facebook App Developer Wanted please contact my if you interesting.