How to add a Facebook iFrame Application to your Fans Page

Copyright © 2011 Yorgo Nestoridis. Visit the original article at

6 Steps to Add a Facebook iFrame Application to your Fans Page

This Tutorial will show how to set up a Facebook iFrame Application in 6 Steps. Since Facebook changed once more the rules Fan Page content is to be added via iFrame Applications. There are some App providers out there who offer quick solutions namely for people who do not have own hosting; these external solutions have the disadvantage that you are not in full control of your frame and that you promote rather the App provider than yourself. For our customers we use a more professional approach. Here below you will find the basic 10 steps to create your own iFrame Application.

What are Facebook iFrame Applications

As of February 2011 facebook allows iFrames on Page Tabs as well as on Canvas Pages. The corresponding Applications don’t need to be activated (using the app submission procedure).

In short an iFrame Application allows to load external content to your Fan or Business Page.

The advantage of Facebook iFrame Applications

As your content is hosted on your own host, you may edit in  standard HTML, CSS and JavaScript like on any other web page.

The disadvantage of Facebook iFrame Applications

You need your own hosting and be able to edit HTML, besides that, the freedom is yours.

If you need cheap reliable hosting and professional help to set-up your app, hosting and content, please contact me.

1. Set up your HTML page on your Server

For the purpose of this Tutorial I will create the frame for an application called YORGOO on my cPanel Server.

Create a new folder in your root called “app” into which you will place all your future applications. In the app folder we create a new folder with the name of the new application, in my case: ‘yorgoo’, like so:

Facebook iFrame Application Folder Structure

In the ‘yorgoo’ applicatuion folder we create an index page and a style-sheet, like so:

Facebook iFrame Files

Edit index.html and paste the following minimal content into it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="en">
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<div id="container">

Note on line 4 we refer to our style-sheet which we edit and paste in the size of the page. Facebook allows for a display of maximum 520 pixels x 800 pixels. Ideally you keep your content within these limits, however you could also go wider and deeper when editing at the price that either the content will not be displayed to its full extent or that you need to accept scroll bars.

I will keep it sober here and punch into my style-sheet the following:

body {
 margin:0; padding:0; border:0;

Note on line 9 we reserve the space within the main content container for whatever you wish to add to your page: this is where you edit your visible page content. For the time being I have just added some text for testing purposes, by replacing the above lines 8 — 10 with the following:

<div id="container">
<p>We are building here the YORGOO Facebook Application in
support of Small Business and Home Business Builders who wish to take advantage
of Social Media Marketing to generate Free Traffic and Free Leads to promote
their business and increase sales.</p>

With a little bit of style, this results in:

Page Content

Test Page Content

2. Install the Facebook Developer Application

Now let’s head over to Facebook, sign up if you don’t have an account or just log in.

Visit THIS LINK and if prompted, click the Allow button.

3. Create your iFrame Application

Click on the Set Up New App Button:

Set up Button

Now enter a Name for your Application:

Name your App

Name your App

Agree to the terms and Create App.

You will be prompted with a security check (paptcha), just submit the suggested words.

4. Edit the About Page

Add a description and some eye-catching icons, like so:



5. Facebook Integration

Select “Facebook Integration” from the left-hand menu and scroll down to Page Tabs — this is what will be shown in your Facebook sidebar menu:

Page Tabs

Page Tabs

If you have a security certificate installed on your server, add also the secure link using https:// (people logging on to Facebook using a secure connection cannot see your page if you don’t provide a secure link — they will be redirected to your wall).

Save your changes.

6. Add your App to your Fan Page

Select from the menu Application Profile Page

Application Profile Page

Select Add to My Page from the sidebar menu and select the page to which you wish to add the Application:

Add to My Page

Head over to your page and you will now see the new tab!

Incoming search terms:

Related posts:

  1. Best RSS Facebook Page
  2. Facebook Drawing Board Live
  3. YORGOO on Facebook
  4. Facebook Online Seminar by Ycademy
  5. Best Facebook Pages