We discussed about how tocreate iframe tab for Facebook business pages in previous Facebook tutorial. This is a simple and quickest way to create a business page on Facebook platform. The layout of Facebook business page created in this way are looking exactly the same as a Facebook personal page.

Introduction

The iframe tab is just one of the way for developer to create a business page on Facebook platform. Actually Facebook provides some other ways to create business pages that can integrate with many aspects of Facebook.com. Let’s make a brief summary of the ways to create Facebook business pages:

We will discuss how to create a Facebook Apps, or facebook Canvas Apps as we like to use this term ourselves, in coming Facebook tutorials.

How Facebook Apps Works?

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.

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 by time of writting this tutorial.

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

How to Create New Apps?

We already got some idea how Facebook Apps worked in previous tutorial. It’s time to try to create a new Facebook App.  Actually the procedures are similar to Create iframe Tabs for Facebook Pages. Please read the tutorial again if needed. 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 are 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. We will test if the site URL can load into the Canvas.

Testing Apps Settings

We already created a new Facebook App. 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.

This image has an empty alt attribute; its file name is facebook-canvas-page-091.jpg

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



<?php

echo “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.