I already created a new Facebook App in previous article, it’s time to test if it is working properly. The most simple way is to test if the web page of Site URL can be loaded into the Canvas.  Let’s recall how Facebook App use “Website” and “App on Facebook” to integrate with Facebook.

Okay! Let’s write a simple web page (index.php) of the Site URL. How about print out the word “Hello World!”?

Upload the index.php file to Canvas URL, i.e.

http://oscommerce-template-easy.com/fbapp/

It’s done!

Open a browser and navigate to the URL of Facebook App, i.e. Canvas Page. If everything works correctly, the “Hello World” should print out on the Canvas.

Yeah! The web page of Site URL loaded into the Canvas successfully! In other words, the new Facebook App is working properly.

We already got some idea how Facebook Apps worked in previous articles. It’s time to try to create a new Facebook App.  Actually the procedures are similar to Create iframe Tabs for Facebook Pages. Let’s create a new Facebook App now.

1. Log in your Facebook personal account.

2. Access the Facebook developer page by clicking on the “developer” link at the footer.

3. Once access the Facebook Developer page, Click on the”Apps” link on the top menu.

4. The Apps screen appear. Click on the “Create New App” button to create a new App.

5. A New App window pop up. Enter a name for the new App in the App Display Name field.

6. The App Setting screen appear. Enter the required information as shown below.

Look! The procedures of creating Facebook App are same as creating iframe Tabs for Facebook Pages. The only difference is some of the settings.

Compare Setting of Facebook Apps and iFrame Tab Pages

1. Basic Information
For iframe tab for Facebook Pages, the App Namespace and App Domain are not required.

2. How Your App Integrates with Facebook
iframe tab select “Page Tab” to integrate with Facebook while Facebook App select both “Website” and “App on Facebook” to integrate with Facebook.

This is clear that Facebook App need the information of both “Website” and “App on Facebook” to integrate with Facebook. The following diagram explains how Facebook App use “Website” and “App on Facebook” to integrate with Facebook platform.

Now the new Facebook App has been created. I will test if the site URL can load into the Canvas in next article.

A Facebook Apps allows developer to use or integrate many features of Facebook, for example, News Feed, Notification, etc… Actually, all of the core Facebook Platform technologies are available to Apps on Facebook.

How Facebook Apps Works?

The concept is very simple.  The Facebook App simply loaded into a Canvas Page as shown in the diagram below:

In other words, the Canvas Page is a blank canvas within facebook that allow developers to run their own apps.

How Contents Load into Blank Canvas Page?

When a developer create a new app on Facebook Developer Center, he/she needs to provide a Canvas URL. The Canvas URL is actually a web page address hosting outside Facebook servers. This is the Canvas URL that makes up the contents of the Canvas Page. The process can be  illustrated in the diagram below:

The Canvas URL may contains HTML, JavaScript, jQuery, PHP and CSS. In short, this is the Canvas URL that really make up the contents of Canvas Page, and thus the Facebook app. That’s why I like to use Facebook Canvas App rather than Facebook App.

Note:
The width of canvas is 760px by default.

Now we knows the basic concepts of how a Facebook app works. We can start creating a new Facebook app in the next article.