July 2009 ~ Creation Zone

Here is a quick HOW-To document with step-by-step instructions to create a simple Facebook application.

Create an account with Facebook at facebook.com
To create an application in Facebook, go to Facebook Developers web site
Click on Set Up New Application.
Name the Appliaction and click on save changes.
Enter a brief description for the application.
On the left side of the page click on Canvas.
Fill the application name in Canvas Page URL field.
Fill the Canvas Callback URL field.

Canvas Callback URL is the address of the website where the appliaction is hosted.
For example if the appliaction is hosted on a website www.xyz.com, then the Canvas Callback URL address will be http://www.xyz.com/your_application.

Click on save changes.
A summary of the application is shown at this point.
Sample code is shown at the bottom of this page. Click on the sample code.
Download and unzip the tar.gz file.

In the footprints folder, you will find a sample Facebook application with the file name index.php

Facebook appliaction can be developed in JavaScript, PHP or HTML.

For more details about the langauges in which the application can be developed, check Facebook Developers web site.

Create your Facebook application and host it on any web site of your choice. Be aware that Facebook does not host the actual application - so you are on your own in finding a hosting site to deploy your Facebook application.

You can test the application from the Canvas Page URL address.

The url will be in the format http://apps.facebook.com/appliaction_name/

Few Caveats:

If the application is developed in JavaScript, note that all the functions may not work as expected in Facebook. For example, to set the value of 5 to a text box, the following is the code in JavaScript:

var k = 5; document.getElementById("someid").value = k;

The above code may not work in Facebook application. The following modified code works in Facebook:

var k = 5; document.getElementById("someid").setValue(k);

To see all the Facebook equivalent functions for the JavaScript functions, check the FBJS wiki page.

If you encounter the error, FBML Error : illegal tag "body" under "fb:canvas", remove the <body> tag from the HTML application. When Facebook parses the appliaction, it addes the <body> tag automatically.

The code shown below is ready to be used as an example Facebook application. This a very basic calculator with limited functionality.

To test how this example code works, visit the following URL:
http://apps.facebook.com/basic_calc

Sample Facebook Application : Simple Calculator


<html>

<head>
<style type = "text/css">
input {
 width : 30px;
 height: 30px;
 font-size: 1.2em;
 color: red;
       }
</style>

<script language="JavaScript">
var num2 = 0 , num1=0;

function Assign(myvalue)  
{
 var button_value , Key = 0; 
 button_value = myvalue.getValue();

 switch(button_value)
 {
  case '+':
  case '-':
  case '*':
  case '/':
  case '%':
  {
   key = button_value;
   num1 = num2;
   num2 = 0;
   break;
  }

  case '=':
  {
   if (key == '+')
   {
    Sum(num1,num2);
   }

   if (key == '-')
   {
    Subtraction(num1,num2);
   }

   if (key == '*')
   {
    Product(num1,num2);
   }

   if (key == '/')
   {
    Reminder(num1,num2);
   }

   if (key == '%')
   {
    Modulo(num1,num2);
   }
   break;
  }

  case '+/-':
  {
   num2 = num2 * (-1);
   document.getElementById("output").setValue(num2);
   break;
  }

  default:
  {
   button_value = parseInt(button_value);
   combine(button_value);
   break;
  }
 }
}

function combine(input) 
{
 num2 = (num2 * 10) + input;
 document.getElementById("output").setValue(num2);
}

function Cancel() 
{
 num2 = 0;
 num1 = 0;
 document.getElementById("output").setValue(num2);
}

function Sum(val1,val2) 
{
 var result;
 result = val1+val2;
 document.getElementById("output").setValue(result);
 num2 = 0;
 num1 = 0;
}

function Subtraction(val1,val2) 
{
 var result;
 result = val1-val2;
 document.getElementById("output").setValue(result);
 num2 = 0;
 num1 = 0;
}

function Product(val1,val2) 
{
 var result;
 result = val1*val2;
 document.getElementById("output").setValue(result);
 num2 = 0;
 num1 = 0; 
}

function Reminder(val1,val2) 
{
 var result;
 result = val1/val2;
 document.getElementById("output").setValue(result);
 num2 = 0;
 num1 = 0;
}

function Modulo(val1,val2) 
{
 var result;
 result = val1%val2;
 document.getElementById("output").setValue(result);
 num2 = 0;
 num1 = 0;
}

</script>

<title>Very Basic Calculator</title>
</head>

<form>

<table border="1" bgcolor = "#CDCDCD">

<tr>
<td colspan="6"><input id ="output" type="text" name="result" value="0"  style="width: 169px; height: 30px; color:blue;" readonly = "readonly"/></td>
</tr>

<tr>
<td><input type="button"  name="one" value="1" onclick = "Assign(this)"/></td>
<td><input type="button"  name="two" value="2" onclick = "Assign(this)"/></td>
<td><input type="button"  name="three" value="3" onclick = "Assign(this)"/>
<td><input type="button"  name="add" value="+" onclick = "Assign(this)"/></td>
<td rowspan="2"><input type="button"  name="clear" style = "height : 64px;" value="C" onclick = "Cancel()"/></td>
</tr>

<tr>
<td><input type="button"  name="four" value="4" onclick = "Assign(this)"/></td>
<td><input type="button"  name="five" value="5" onclick = "Assign(this)"/></td>
<td><input type="button"  name="six" value="6" onclick = "Assign(this)"/></td>
<td><input type="button"  name="subtract" value="-" onclick = "Assign(this)"/></td>
</tr>

<tr>
<td><input type="button"  name="seven" value="7" onclick = "Assign(this)"/></td>
<td><input type="button"  name="eight" value="8" onclick = "Assign(this)"/></td>
<td><input type="button"  name="nine" value="9" onclick = "Assign(this)"/></td>
<td><input type="button"  name="multiply" value="*" onclick = "Assign(this)"/></td>
<td rowspan="2"><input type="button"  name="equals" style = "height : 64px;" value="=" onclick = "Assign(this)"/></td>
</tr>

<tr>
<td><input type="button"  name="zero" value="0" onclick = "Assign(this)"/></td>
<td><input type="button"  name="negative" value="+/-" onclick = "Assign(this)"/></td>
<td><input type="button"  name="modulus" value="%" onclick = "Assign(this)"/></td>
<td><input type="button"  name="divide" value="/" onclick = "Assign(this)"/></td>
</tr>

</table>

</form>

</html>