DailyTUT Wallpapers

How to Create a Facebook Application Quickly ?

Facebook, a word turned viral in the past few years and became one of the most visited website across the world. Facebook has 600 million + users base and considered to be no 1 social networking website. There is no social networking site that has this much traffic and features loaded. Facebook allows any user to develop an application and let their friends and family use it. Commercially any one can develop an facebook app or game to let any facebook users to use it. With good monetizing tips followed, one can generate huge income when the facebook app becomes viral.

Lets see How to create your first Facebook Application. Here, i am gonna guide you about creating a simple Facebook Application which is easy to understand and do.

In order to write a Facebook Application the basic requirements are:

  1. A Domain Name with Hosting Space (in other words “a website”) – This will help you to upload your Application code.
  2. Facebook Account with Developer Application Enabled.

Whats next ?

Things to do in your cPanel Account

My host is cPanel powered, so i am able to do the upload and file managing easier than default FTP based site management.

  1. Go to your cPanel Account > File Manager > Public_html > and create a FolderName of your application or something that you want to”
  2. Create an index.html inside that folder > “Copy paste your code in that file and save that”.
  3. Now close your cPanel account and Login to your Facebook account.

Things to do in your Facebook Account

  1. Search for Facebook Developer groups/page in search bar.
  2. Now Click on “Go to App” option available.
  3. You may notice a button called “set up a new app” click on it.

It will take you to settings page of your Application, as shown below and it will have 6 sections :

About

Enter the Values for Application Name, Description, User Support Address and Contact Email Address here.

  1. Application Name: Guessing Game
  2. Description: Guessing the number correctly !
  3. User Support Address: (Email) [email protected]
  4. Contact Email Address: [email protected]

Website

Enter the Values for Site Url and Site Domain here.

  1. Site Url: http://www.blogare.org/
  2. Site Domain: blogare.org

How to Integrate Facebook App ?

Enter the Values for Canvas Page, Canvas URL, Canvas Secure URL, IFrame Size, Tab Name, Tab URL, Tab Secure URL here.This is the most important part which integrates your application with Facebook. Lets have a look at the details that i enter for my demo facebook app.

  1. Canvas Page value: http://apps.facebook.com/coolguess/
  2. Canvas URL: http://www.blogare.org/guess/
  3. Canvas Secure URL: https://www.blogare.org/guess/
  4. IFrame Size: Show Scrollbars (any option can be chose)
  5. Tab Name: Cool Guess
  6. Tab URL: http://www.blogare.org/guess/index.html
  7. Tab Secure URL: https://www.blogare.org/guess/index.html (Rest of the values which are not mentioned are optional)

 

— (Rest of the settings for sections mentioned below are Optional and for Advanced Usage) —

Mobile and Devices
Credits
Advanced

Well done, your facebook application is ready to be launched.

This is how the sample application works !

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Sample Application Code (guess.html)

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

Tips on Troubleshooting

  1. Tools & SDK in Developer page: Can be used to test your applications working.
  2. If your application shows an error while executing called “SSL received a record that exceeded the permissible maximum length”. Go to Facebook Settings > Account Settings > Go to the option called Security and Disable your “HTTPS”.

I am sure you will have so much fun in creating your very first facebook app. Do let us know your facebook app address in the comment box below once you created. We will be happy to visit and comment about it. Thank you and happy facebook-ing !

You may folllow DailyTUT on Twitter or like us at Facebook to get more Tech news and updates.

About the Author: Robin C

Security Consultant, Engineer, Technology Enthusiast and Blogger.

You May Also Like

8 Comments

  1. Great work 🙂 I love it too.. i have an doubt.. this app doesnt ask permission to execute.. and can we add HTML program or any other language program to work like this?

  2. @vincent: It has not been submitted to Facebook Application directory. After It gets submitted it would ask permission to execute, like any other application. And you can try this with Html programs with scripts or else you can go for FBML. FBML program has some different steps !

    @Pradctgign: Thank you 🙂 You can add more functionality and some advanced features for your project !

Leave a Reply to Pradctgign Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.