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.

70% OFFER - LIMITED TIME

ProtonVPN Discount Coupon Code

★★★★★★★★★★ 4.8 $2.99/month

ProtonVPN has Servers in 148+ Countries, Lightning fast Speeds, Ad Blocker, Secure Streaming, Double VPN and more.

🔥 View Today’s Deal

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 Folder “Name 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

HEIC to JPG Batch Converter - Framio

★★★★★★★★★★ 5.0 Free

HEIC to JPG, PNG Converter App for iPhone. Bulk Converter HEIC Photos to JPG on your iPhone in Seconds.

📲 Get the App

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.