How to write a FaceBook Application in 10 minutes June 18
Writing F8 apps is where it’s at right now. Everybody knows it. The userbase is huge and now we have a (free) API to. Everything is good….but the documentation.
I spent a day writing my Sudoku Facebook application yesterday. I already had the sudoku javascript widget ready to go - the time was spent wading through pages of documentation and downloading toolkits that (as it turns out) I didn’t need.
As far as I can tell, Facebook allows you to create applications that appear to the user in 2 different areas.
1 - The profile. This the ‘main user page’ as far as Facebook is concerned. Here is where your main summary details are displayed and your comments wall. It would be great to have your widget displayed here, but the big limitation is that applications that use javascript are not allowed here (You must use FMBL, the facebook version of HTML). Too bad for me. What we can do is display a small ad to take the user to the Canvas page.
2 - The ‘Canvas page’. This is an entire page that your application gets to use (you can have multiple pages if you want). On these pages you can choose to display content from another website through an iframe, so that is what we’re going to do.
Ok, thats it for the overview. Start your clocks and lets get cracking.
1. Create your demo page. (2 minutes)
This is the page that the user will see on their canvas page. If you already have a page that you want to use, great. If not, then just copy this code for a guessing game.
<script type=text/javascript>
var iRandom;
function Restart()
{
iRandom = Math.floor(Math.random()*10)+1;
alert('OK, I am thinking of a number between 1 and 10');
}
function Guess()
{
var yourGuess = document.getElementById('myGuess').value;
if (yourGuess>iRandom)
alert('Too High.');
if (yourGuess<iRandom)
alert('Too Low.');
if (yourGuess==iRandom)
{
alert('Well done! You guessed it.');
Restart();
}
}
</script>
<div>Enter your guess between 1 and 10: <input type=text id='myGuess' name='myGuess'>
<input type='button' onClick='Guess()' value='Guess'>
<br>
<br>
<input type='button' onClick='Restart()' value='Start Again'>
<script type=text/javascript>
Restart();
</script>
It’s not going to win any awards, but it gets the job done. Save the file somewhere on your website as ‘guess.htm’. Mine is saved at http://gathadams.com/guess.htm
Ok, now log into Facebook.
2. Install the Developer Application. (1 minute)
http://developers.facebook.com/get_started.php
This allows you to create applications.
3. Create the Application. (30 seconds)
Click the ‘create application’ link
4. Fill in the Application details. (6 minutes)
There are heaps of fields you can enter, I am just going over the ones you need to get this demo working.
Application Name: Any name you want. I used ‘Guessing Game’.
Terms of Service checkbox: Check it.
Click ‘Optional Fields’.
Callback Url: This should be the root directory that your ‘guess.htm’ page is found at. You must also add a ‘/’ at the end. I used ‘http://gathadams.com/’.
Canvas Page URL: This is the most confusing part, and wasted me heaps of time. What they want you to enter is basically a directory name for your applcaition. The name must be 7 characters or more, and must be unique from other Facebook applications. I used ‘guessab’ (so you can’t). When you add ‘http://apps.facebook.com/’ to the front you have the Canvas page URL.
NOTE: If you use upper case in the Canvas Page URL, it will be converted to lower case automatically. Also, case is important, so if you use upper case in your links later on THEY WON’T WORK.
Tick ‘Use iframe’: This means that your canvas pages will use an iframe.
Application Type: Leave it at ‘website’.
Can your application be added on Facebook?: Tick ‘Yes’.
Application Description: I used ‘Cool guessing game’. If you disagree, feel free to use your own description.
Default FMBL: We will fill this out last, so leave it for the moment.
Default Profile Box Column: Tick ‘Narrow’.
Side Nav URL:OK, here is where we put a link in the side nav to the canvas page.
The full canvas page has the format:
http://apps.facebook.com/< value entered in Canvas Page URL>/
So for me, the full canvas page URL is:
http://apps.facebook.com/guessab/guess.htm
Facebook maps ‘http://apps.facebook.com/guessV1/’ to your Callback URL, so what is loaded in the iframe is:
or
http://gathadams.com/guess.htm
Note: Notice there is no ‘/’ inserted in
Anyway, now we can go back to
Default FMBL: This is the text that will go on the user’s profile. Lets just put another link to our game on the Canvas page. I entered:
Lets play a <a href=’http://apps.facebook.com/guessab/guess.htm’>Guessing Game</a>
5. Add the application (30 seconds)
From within ‘My Applications’, click on ‘View About Page’ for your new application. Then click ‘Add Application’, and confirm this.
6. Done! (Lets play)
Click on the link in either the left nav panel or the main profile panel and knock yourself out.
Hongliu Li Jun 19
This is a good article.
I tried your step to add http://www.mygrowup.com (we call it parent or kid facebook site). At the last step, Facebook show me “You need to have at least 5 users before you can submit your application.”
Do you know what it means?
Gath Jun 19
Hi Hongliu,
You get this error if you try to submit the application to the Facebook ‘Application Directory’. You can still run & test the application without submitting it to the directory.
Cheers,
Gath
pete Jun 21
Great article. The official facebook docs kind of suck. If you were to write another, more detailed article, i’m sure it would prove very popular
micro506 Jun 23
Is there any way to embed the iframe in the actual profile?
Gath Jun 25
Hi micro506,
You cannot place an iframe in the profile. There is an FBML tag that is an iframe - but you can’t use that on the profile either.
oliver lawrence dalton Jun 28
nice tut very gd i enjoyed worked a treat now im goin to look for some sweet js and go off on on / got any db examples would be interestin?
Jena Jul 21
The “Demo” page would be the same thing as just the website code, right?
Charl Aug 8
Thx bud, very simple and straight forward!
The way every tutorial is supposed to be…
Christian Aug 29
Hey there,
Compliments on the tutorial. Even I could do it.
However, I am interested in creating my own app, the actual programming of it. Where do you suggest I start? Are there any “for dummy” tutorials out there which could help?
Gath Aug 29
Hi Christian,
I am not quite sure if you are at the stage of
* How do I learn how to program?
or
* I know how to program - how do I write a facebook app?
If you are looking for general programming info (the first option) then I would suggest either learn php or asp.net.
If you want to find out more about facebook apps, then install the developer app in facebook, and then join the developer forum - they have heaps of useful info there.
Cheers,
Gath
Shalltell Sep 2
Great info there! Now all I have to do is stop being lazy and actually make one!
John Dutcher Sep 5
Do you know the Facebook environment well enough to know whether or not it will ‘allow’ the Rebol langauage interpreter ‘executable’ on my account (or wherever it needs to be) …… such that I could write my ‘app’ in Rebol………OR maybe Facebook supports Rebol along with Perl, PHP etc. etc. already ???
Paul Sep 6
Thanks, simple and succinct yet so informative, great article!
Ryan Sep 6
Good article
Well done!
Ali Sep 10
Hi, Gatha very useful information, can you help with a small application that we are making can pay you as well. let me know if interested. Cheers/Ali
Jason Sep 25
Can you post a short explanation of how to create a widget that will go on the main page?
Brad Sep 25
How do you put something on the profile page tho
Derrick Seeto Sep 26
Hi there,
I was wondering how much do you charge to build and get an application registered in Face books?
I have a client who wants to build a virtual handbag application to save onto face books where people can collect and receive free gifts through facebooks.
Are you open to helping me out here?
ayaz Oct 4
I have the following error when i test guess it application:i developed this application in VS 2005:
Runtime errors:
HTML tag not supported: “title”
HTML tag not supported: “body”
Gath Oct 4
Hi Everyone,
Sorry I haven’t posted lately.
John D - As long as you write a wrapper for the facebook api, you can write a facebook app in whatever language you want (even Rebol, whatever that is
).
Jason - Good idea, I’ll try to get around to that next week.
Derrick - Sorry, I’m so busy with my own sites that I don’t really have time to write other people’s apps.
Ayaz - Can you post a few more details? I can’t really tell if the error is being raised by VS2005 or facebook from what you’ve posted.
Cheers,
Gath
Mark Oct 11
This blog also has good information on getting started with facebook development: http://facebookworld.blogspot.com/
Rob Oct 14
Hi, instead of the phrases such as ‘im guessing a word’ or whatever it is, popping up in a new window, is there a HTML code that allows the words simply to be embeded in the same window and appear????
Avrom Gilbert Oct 28
Gath
Great post - would like to be in touch with you about an exciting Facebook project my company will soon be embarking on. Please contact me on the e-mail provided with this post.
All the best
Avrom
Tony Nov 4
Hi Gath,
I get the same error as Ayaz, and don’t use VS. I just created a quick html file on a Lamp stack with the javascript that you have listed. The javascript runs fine if I navigate to it directly through a browser, but when I select on the App name from facebook, it throws the error:
Error while loading page from [App name]
Received HTTP error code 405 while loading http://www.mywebserver.com/facebook/test.html
There are still a few kinks Facebook and the makers of test are trying to iron out. We appreciate your patience as we try to fix these issues. Your problem has been logged - if it persists, please come back in a few days. Thanks!
Runtime errors:
HTML tag not supported: “title”
HTML tag not supported: “body”
Nigel Nov 6
You have just saved me hours of work, I did not know it was this easy, thank you!!!
Curious Cat Nov 9
hi,
Sorry for being ignorant, but to be able to write facebook applications does one have to have access to a webserver? Is it possible to create applications that run on facebook server itself? The reason for asking is that I donot have a home page of my own, I only have a facebook account?
Tapan Nov 23
Gath,
Thanks for the tips. I could get the guess app running from my webserver however when I go to
http://apps.facebook.com//guess.htm
I dont get the dialog boxes that pop up. But when I go2
http:///guess.htm it works fine for me.
Thanks
Tapan Nov 23
The first url is actually
http://apps.facebook.com/MYAPPID/guess.htm
and second is
http://myWS/guess.htm
jihad Nov 29
Hi
I like this article , but i have one question , am facing some diffeculty in creating a demo page in my application .
I have an application called iam a palestinian , this application i build it to display the flage of palestine in the users’ profile page , but i need the help of some one to create the demo page for this application , because i don’t have any idea about to do this
one more question when the demo page is created where i should put in the application
for contact : microsft_xp@hotmail.com
thanaks
DV Dec 1
hello, i am having the same issue as “Curious Cat.” i don’t have a homepage and i dont know how to make one.
hobnobLover Dec 3
Hey Gath!
Thank you very much for this article. I appreciate your help!
- hobnobLover.
http://www.hobnobLover.com/
hobnobLover LLC.
Sooboth Dec 3
this is very good article.youcan also visit to
http:sooboth.blogspot.com
online education Dec 4
I am looking for post on online eduaction and what i came across makes me doubt the value of such education , anyway i wish you success
prashant Dec 15
I tried your step to add http://demo.ideawicket.com/ (we call it open innovation portal site). At the end of the step, i got the message from facebook.com “You need to have at least 5 users before you can submit your application.â€
i tested it as per your suggestion without submitting the application, it works fine.
Please give me suggestion, how can i submit the application on facebook.com.
Regards,
Prashant
Gath Dec 15
Hi Prashat,
You need to have 5 of your friends using the app before you can submit it to the Application Directory.
Just get 5 friends to install it, and you are fine.
Cheers,
Gath
Shalini Dec 18
Good starter article.. helped me save up on a bunch of reading
Well i finally decided to go with PHP and have the makings of an app!
I’m facing an error though and if you could point me to a solution, it’ll be very nice.
Call to a member function on a non-object in facebookapi_php4_restlib.php on line 1397 is what i get. And its really upsetting because i got the same error on a call to two things:
1. $facebook->api_client->profile_setFBML
2.facebook->api_client->feed_publishActionOfUser($feed_title,$feed_body);
I have put this up on the facebook developer forum but no real replies there. Hoping you can guide me…
Thanks in advance
Tyler Dec 18
Great job
quick question:
I know this is a rookie mistake, but I get a 404 error every time I try to open my app. The whole page works, but my server gives me a 404 in the iframe. How can i fix this?
Thanks
Nat Dec 20
Hi Guys has anyone found a fix/solution to Tony’s Problem I am experiencing the same error:
Error while loading page from [App name]
Received HTTP error code 405 while loading http://www.mywebserver.com/facebook/test.html
There are still a few kinks Facebook and the makers of test are trying to iron out. We appreciate your patience as we try to fix these issues. Your problem has been logged - if it persists, please come back in a few days. Thanks
Aaron Dec 22
the 404 and 405 errors are url related or this is the case when it occured with me. What I found is that I wasn’t able to use either .html or .htm as extensions but .php worked every time. Though these instructions are a little lengthly i recommend that you follow them and created a demo app first.
http://developers.facebook.com/step_by_step.php#intro
I’m not an expert but I may be able to answer some questions that you have if you need to email me.
urth Dec 25
Thanks you very much for the simplification of facebook applications. When I read the facebook developers pages I was confused and baffled.
Thanks to you here is my first facebook application.
http://www.facebook.com/apps/application.php?id=7115578015
Add it and tell me what you think.
Jason Richards Dec 25
Hi
We just launched a new flash game though facebook, but we still keep getting a callback error as Nat said above.
Received HTTP error code 405 while loading http://www.acenuke.com/index.html
has anyone had any luck with a solution around this problem???
Dr Tim Jan 2
Hi Gath,
Brilliant simple and easy to follow tut. I’m guessing like a champion now!
Ok, so now I need to write an app that integrates with people’s profile data … no idea how to do that but will search around …
Thx again!
yimplex Jan 3
I’ll make my own application on my facebook soon
androo Jan 4
great post.. i was looking into getting into facebook API’s and tweeking them..
Bill F. Jan 7
How do you edit the settings described in Step 4. after you’ve created the app? I can’t figure out how to get back there..
Nat Jan 16
My facebook app keeps on showing me the following error
”
Directory Listing Denied
This Virtual Directory does not allow contents to be listed.”
Tim Jan 17
Didn’t work :(. I didn’t use your js though. I used fbml to embed a flash object. The fbml works fine in the fbml tester app too. I still get that annoying 405 error saying it couldn’t load http://www.domain.com/page.htm
jay Feb 12
Great article, where’s the next step for the ad linking to the canvas page?
Duaa Feb 13
Hello,
Thanks a lot for this great explanation.
I have a problem, when I try to submit my application facebook prompt me to invite 5 users to my application in able to publish it in the application directory.
How can I do that? I saw one of the above comments she/he has the same problem and you answered: you have to have 5 friends installing the application, but how can I let them install it?!!!
Please let me know..
thanks a lot.
Chris Feb 13
This must be really obvious. I have created a face book app: http://apps.facebook.com/appname which will open http://www.mysite.com/index.php - surely if I type in http://apps.facebook.com/appname/page2.php it should show http://www.mysite.com/page2.php - if not how do I open a second page? Sounds stupid I know, I have done quite a technical app, but cant redirect to a second page.
chris Feb 17
Great article! Here’s a few more I found interesting:
http://www.newwebplatform.com/tips-and-tutorials/Facebook
Free MP3 Search Feb 19
Thank you sooo much. I really needed this tutorial!!!
Chris Feb 20
I am interested in knowing if you would be able to find a “10 minute” solution to developing applications through this wiki: http://fanboxdeveloper.com/index.php?title=Main_Page
please let me know what we may be missing, it would be great if I could get a little feedback through Mail.
Thank you, your explanation has made this much clearer!
Jethro Feb 21
All those people getting 405 errors should add their index page or similar to the end of the callback url e.g. http://www.address.com/directory/index.php
Apparently using html pages doesn’t work very well. So you may have to make them asp/php (i.e. dynamic).
Hope that helps. The facebook platform is so poorly documented.
prashant Feb 22
I tried it but i am getting this error “You need to have at least 5 users before you can submit your application.”
Please let me know how to solve it ……….
vm Feb 26
Hi Gath,
I created the app following your direction and then added the application to my profile - but when I click on the “guessing game” link in my profile - all it does is take me back to the profile page - no errors - nothing - wondering what can cause this behavior?
I like how easy you have made it - but I am not able to get it to work and that is frustrating.
vm Feb 26
Hi Gath,
I figured it out. The ‘ in the default FBML was causing some issue and removing that made it work again.
lemmie Mar 4
you should make a youtube walk though..=/ i understood half of that. but its still fucking up =(
i only want to make a picture game lol >.<
prashant Mar 5
hi,
i hv created an application as per your guideline n its working fine. but i want to do one more thing in my application. i want to display the username who is visiting my application.
plz guide me how can i fetch the username n how can i display it in my application
prashant Mar 6
hi gath, i have solved my problem.
Thanks
prashant
Roger Sweetman Mar 15
Hi,
This is really good, but I have an absolutely dumb question.
How do you get other people to install the application? I see other people have asked the question and then seemed to have figured it out.
Boris Mar 21
Hello, Gath
Thanks for the article.
Actually I need some help. As I can gather, you are a free-lance programmer, and in need to support your drinking habbit
I think we can find some points in common.
I’d like to develop a facebook application of a chess game with peculiar rules. I can provide you with java or C++ code, so you don’t have to write code for moving pieces.
Would you be able to help with that?
If so,please contact me on my mail to discuss details
Cheers,
Boris
Jason Mar 23
On Step 5, I go into ‘My Applications’, click on ‘View About Page’ for your new application. But there isn’t an ‘Add Application’ option. The only options I see are:
——————————
This application is an external website.
Edit Application
Edit Admins
Promote Application with an Ad
Become a Fan
Share with Friends
Block Application
View Insights
——————————
I’ve tried it a couple times so am I missing something or doing something wrong?
fab Mar 25
Hello,
I am developing a facebook application on .net technology to do character analysis.Once the survey for this is done, the application result needs to be appeared in the profile page.I tried html iframe, <fb:iframe, <fb:ref etc…But Nothing worked out.
I know there is a technique to display contents in profile page from an external URL..
Please reply as soon as possible..
Its Very Urgent…
Please….
Thanks…
Nagendra Mar 31
i hv created an application as per your guideline n its working fine. but i want to do one more thing in my application, that is i want to add my wish list to the facebook,can u pls give me some information about this.
Sunny kapoor Apr 21
Thanks Mate, you rock
Sovole Apr 24
Money is only something you need if you don’t die today.
alex c Apr 27
How much traffic my application will get ?
How to advertise my apps on facebook ?
Andrius Apr 28
Wow cool I have one more question, I have seen tall pictures for profiles , not usual, but tal one, have you got any idea how to make it?
facebook app development Apr 30
Wow Nice and informative post. I’d like to develop a facebook application of a strategic game with peculiar rules.
htt://www.facebookster.com
Steve May 1
How come there’s no pop up window? What did i do wrong ?
ax.. May 13
I have made one application but in that i want the user first to authorize the application. It is not working for me. I tried to use many things.
Kindly give me pointers to it..!
megha May 27
Can i use my machine’ IP address as the callback url. I am trying to do the san=me but getting network error. Please help.
Neaz ahmed May 28
i have a problem when i submit the application directory
says….
You need to have at least 5 total users or 10 monthly active users before you can submit your application.
.. so what sould i do nxt please help me….
Neaz ahmed May 29
http://apps.facebook.com/neazahmed/
Amare Abate Jun 10
I would like to hvae FaceBook
Greg Solorio Jun 10
Hello Gath,
I was looking into creating an application to promote happyhourcard.com We have over 15,000 members and work with over 150 restaurants, bars, and nightclubs. Some of the deals include getting into clubs with no cover and no having to wait in line. We have a program in place where people can insert a promo code and save 60% on the retail price. My proposition is that if you create a program I will assign a code to it and we will split any money that comes from that promo code.
Look forward in hearing from you,
Greg Solorio
BrandingApps.com Jun 12
Our Facebook Gift Applications Generator allows you to easily generate your own gift application. An Admin area allows you to add gifts and animated graphics. You can also add advertising banners. Full instructions provided.
liv Jun 14
They don’t make it easy do they?
Swati Jun 15
Hey…just wanted to know how can I create an animated gift application on facebook and share it with frnz…i hv been creating jpeg applications for quite a while now but dun have a clarity on animated stuff…your blog seems to be really informative …can you help me??
Danny Jun 17
Hi Gath,
I’m trying to build a greeting card facebook app for these guys:
http://www.thesreepurvillage.org - they are an incredible bunch of people helping out kids and mothers in Bangladesh. What’s also nice about them is that they’re not just asking for donations - they make really cool greeting cards (www.sreepurcards.org).
I thought it would be useful to build an app where you can send friends a digital version of their cards, as a boost to their site and perhaps for donations. However, I am thrashing my hands helplessly in this sea of code. Any chance you might spare some time and help me out?
Navin Jun 21
Great Article man.. keep it up.. !!
Los Angeles SEO Jun 23
Thanks so much I got my first app up and running pretty fast!
Bhupal Sapkota Jun 24
Hey Gath
Wow! it works man!
Very cool and quick tutorial. Thankx.
Guess now here!
http://apps.facebook.com/guessbhu/
wandrille Jul 13
hello, i’m making a FB app and i’d like to know how you did to insert your page in the FB canvas (cause i could see your blog page when i typed http://apps.facebook.com/guessab/ and i found it cool .
thanks for you post, very interesting.
nadia Jul 27
Hi,
I’ve tried your tutorial and its quite good. I have the same issue with Hongliu Li, where i cant submit until i get the active users, but then, how to get the active users if i didnt publish at Facebook?
I can run & test the application, but how to make it useable to other facebook users?
Thanks & Regards.
matrixmode Jul 29
the fields have been changed so drastically, this example is pretty useless now, If only I had been here sooner….
bryan Aug 20
Thank you thank you very much for this very easy step to make FB apps… the FB Dev page is really confusing
Cheers dude!
@matrixmode, surely the fields have been changed BUT if you follow the fields mentioned above, you’ll have an apps running in less than 10mins. Other fields are not that important.