Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 520

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 535

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 542

Deprecated: Assigning the return value of new by reference is deprecated in /home/gathadam/public_html/wp-settings.php on line 578

Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/gathadam/public_html/wp-settings.php on line 18
How to write a FaceBook Application in 10 minutes
Previous     Next

How to write a FaceBook Application in 10 minutes

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:
guess.htm
or
http://gathadams.com/guess.htm
Note: Notice there is no ‘/’ inserted in guess.htm, that is why you have to put it in your Callback URL.

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.


If you liked this, then subscribe to my RSS feed

97 comments

  1. 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?

  2. 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

  3. 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

  4. micro506 Jun 23

    Is there any way to embed the iframe in the actual profile?

  5. 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.

  6. 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?

  7. Jena Jul 21

    The “Demo” page would be the same thing as just the website code, right?

  8. Charl Aug 8

    Thx bud, very simple and straight forward!
    The way every tutorial is supposed to be…

  9. 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?

  10. 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

  11. Shalltell Sep 2

    Great info there! Now all I have to do is stop being lazy and actually make one!

  12. 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 ???

  13. Paul Sep 6

    Thanks, simple and succinct yet so informative, great article!

  14. Ryan Sep 6

    Good article

    Well done!

  15. 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

  16. Jason Sep 25

    Can you post a short explanation of how to create a widget that will go on the main page?

  17. Brad Sep 25

    How do you put something on the profile page tho

  18. 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?

  19. 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”

  20. 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

  21. Mark Oct 11

    This blog also has good information on getting started with facebook development: http://facebookworld.blogspot.com/

  22. 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????

  23. 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

  24. 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”

  25. Nigel Nov 6

    You have just saved me hours of work, I did not know it was this easy, thank you!!!

  26. 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?

  27. 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

  28. Tapan Nov 23

    The first url is actually

    http://apps.facebook.com/MYAPPID/guess.htm

    and second is

    http://myWS/guess.htm

  29. 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

  30. 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.

  31. hobnobLover Dec 3

    Hey Gath!

    Thank you very much for this article. I appreciate your help!

    - hobnobLover.
    http://www.hobnobLover.com/
    hobnobLover LLC.

  32. Sooboth Dec 3

    this is very good article.youcan also visit to
    http:sooboth.blogspot.com

  33. 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

  34. 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

  35. 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

  36. 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

  37. 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

  38. 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

  39. 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.

  40. 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.

  41. 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???

  42. 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!

  43. yimplex Jan 3

    I’ll make my own application on my facebook soon

  44. androo Jan 4

    great post.. i was looking into getting into facebook API’s and tweeking them..

  45. 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..

  46. 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.”

  47. 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

  48. jay Feb 12

    Great article, where’s the next step for the ad linking to the canvas page?

  49. 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.

  50. 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.

  51. chris Feb 17

    Great article! Here’s a few more I found interesting:
    http://www.newwebplatform.com/tips-and-tutorials/Facebook

  52. Free MP3 Search Feb 19

    Thank you sooo much. I really needed this tutorial!!!

  53. 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!

  54. 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.

  55. 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 ……….

  56. 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.

  57. 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.

  58. 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 >.<

  59. 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

  60. prashant Mar 6

    hi gath, i have solved my problem.

    Thanks
    prashant

  61. 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.

  62. 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

  63. 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?

  64. 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…

  65. 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.

  66. Sunny kapoor Apr 21

    Thanks Mate, you rock

  67. Sovole Apr 24

    Money is only something you need if you don’t die today.

  68. alex c Apr 27

    How much traffic my application will get ?

    How to advertise my apps on facebook ?

  69. 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?

  70. 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

  71. Steve May 1

    How come there’s no pop up window? What did i do wrong ?

  72. 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..!

  73. 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.

  74. 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….

  75. Neaz ahmed May 29

    http://apps.facebook.com/neazahmed/

  76. Amare Abate Jun 10

    I would like to hvae FaceBook

  77. 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

  78. 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.

  79. liv Jun 14

    They don’t make it easy do they?

  80. 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??

  81. 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?

  82. Navin Jun 21

    Great Article man.. keep it up.. !!

  83. Los Angeles SEO Jun 23

    Thanks so much I got my first app up and running pretty fast!

  84. Bhupal Sapkota Jun 24

    Hey Gath

    Wow! it works man!
    Very cool and quick tutorial. Thankx.

    Guess now here!
    http://apps.facebook.com/guessbhu/

  85. 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.

  86. 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.

  87. matrixmode Jul 29

    the fields have been changed so drastically, this example is pretty useless now, If only I had been here sooner….

  88. 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.

  1. Resources on How to Write a Facebook Application
  2. links for 2007-12-10 — SOJo: Student of Online Journalism by Megan Taylor
  3. Facebook developer: How to Write a Facebook Application in 10 Minutes » Tools For Facebook
  4. TIS Lab » Blog Archive » UT Libraries Facebook App
  5. See how your website looks in over 60 browsers - in minutes
  6. exactlimon's status on Wednesday, 13-May-09 18:37:16 UTC - Identi.ca
  7. Anatomy of a Facebook Application | blarnee.com
  8. Creating a Facebook Application - a simple guide for PHP, JavaScript, Flex and Grails developers. | chriscoder.com
  9. facebookmarketing.de :: Allgemeines :: Tutorials: eigene facebook App