- 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 thefootprintsfolder, 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>
________________
Technorati Tags:
Facebook
0 comments:
Post a Comment