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

  18 comments for “How to add a Facebook iFrame Application to your Fans Page

  1. September 20, 2014 at 8:24 am

    This is very attention-grabbing, You’re an overly skilled blogger.
    I’ve joined your rss feed and sit up for searching for more
    of your fantastic post. Also, I’ve shared your site inn my social networks

  2. September 18, 2014 at 8:18 am

    This site will have to pay off the bat’s going to do the time before you choose is over burdened or they obtained
    a warrant for your support. Eating and Drinking:1 Creating an events JournalCreate a journal
    that documents the events of the accident is proved with a DUI lawyer Los Angeles.
    In the Driver’s Seat in Facing Your DUI conviction can get your Illinois driver’s license privileges or have higher BAC test.

    In BUI cases, go ahead and give yourself the best legal representation.

  3. September 16, 2014 at 6:12 pm

    But these are very expensive, and are typically only used when a serious
    objective injury is present. Regardless of whether nondirective, focussed or critical incident interviews were conducted, over 70%
    of the potential hazards mentioned by car drivers with no motorcycle riding experience arose
    from the behaviour of other road users, rather than features of the road environment.
    When you have been involved in an auto accident, it is vital to secure the services of the best
    car accident lawyer, to evaluate your claim and help you recover financially.

  4. September 9, 2014 at 6:28 am

    * 32 percent thought that looking younger would affect
    their job performance more positively. They are more
    than just gaps in a wall that let in light or a way to see outside or through which we
    gain access or exit our properties. Structural problems to the nose even after rhinoplasty is also a possibility, and
    these problems include septal perforation, sinusitis, and an irregularity
    of the nasal form.

  5. September 3, 2014 at 3:59 pm

    In fact you will be fully awake for the entire process and can even view
    it in a mirror that will also be provided for you. Another trick that will allow you to give
    better form to your nose is a nose splint.

    Information You Should Know About Plastic Surgery is another excellent instance of this.

  6. August 29, 2014 at 5:28 am

    What an exciting time it can be and with so many details to
    work out, it can be overwhelming too. When eating out at restaurant with a loved one, try chatting most of the time.
    As above, the second set of precision challenges requires further accuracy.

  7. August 15, 2014 at 9:53 am

    These services also complete drug testing and removal of train operator Connex’s
    franchise would prompt a” healthy” building, residential, commercial interests prefer asphalt surfacing asphalt
    contractors can help guide you in good repair.

  8. August 9, 2014 at 4:59 am

    Hello would you mind letting me know which hosting company you’re working with?
    I’ve loaded your blog in 3 different browsers and I must say this blog loads a lot
    faster then most. Can you suggest a good internet hosting provider at a fair price?
    Kudos, I appreciate it!

  9. July 11, 2014 at 3:10 am

    I am really impressed with your writing skills
    and also with the layout on your weblog. Is this a pwid tbeme or did you customize it yourself?
    Eithher way keeep up the nice quality writing, it’s rare to see a nice blog like this one today.

  10. June 22, 2014 at 3:23 am

    I do believe all of the ideas you’ve presented on your post.
    They are really convincng and will certainly work.

    Still, the posts are very short for novices. Could you please
    lengthen them a bit frlm next time? Thank you for the post.

  11. June 21, 2014 at 9:23 pm

    Good post but Iwas wondering if you could write a litte more onn
    this subject? I’d be very thankful if you could elaborate a little bit more.
    Thank you!

  12. May 27, 2014 at 1:16 am

    I like the valuable info you supply to your articles. I will bookmark your weblog and test again here regularly.
    I am somewhat certain I will learn a lot of new stuff right right here!
    Good luck for the next!

  13. April 13, 2014 at 4:41 pm

    Weddings can be simple or very large; celebrated in large
    ceremonies involving many couples. If you’re good, you could
    then move on to retail for consoles. ‘The Croods’ is absolutely free to
    download and play but before you hand the game to any children be sure to go into Settings
    and disable In-App purchases.

  14. April 10, 2014 at 1:22 pm

    The fence should be six feet or higher with boards or panels to provide
    privacy. Nematode applications controls your potential problems with grubs, European
    Chafer Beetles, and the skunks and also other animals that are looking to eat them.
    But, when executed improperly, your beautiful slice of Paradise can quickly become a massive headache.

  15. April 4, 2014 at 8:01 pm

    The wood from fallen trees and limbs can be ground to use as free mulch.
    This equipment is used for drilling holes so that sowing
    can be done and it also covers the soil after the sowing.
    Dream Retreats is also able to raise travertine and flagstones, as well as rock architecture from pillars to niches for ponds.

  16. April 22, 2012 at 6:52 am

    Hi there, just was alert to your weblog through Google, and located that it is truly informative. I’m going to be careful for brussels. I’ll appreciate should you proceed this in future. Lots of folks will probably be benefited out of your writing. Cheers!

  17. June 9, 2011 at 11:42 pm


    Great Tutorial – however, after “Set up new App” in Facebook you are required to insert your mobile phone number or Credit Card details – so if you don’t have either or don’t want to expose these details on the FB Massen-Tummelplatz, the journey ends :).

    • June 10, 2011 at 9:01 pm

      In fact you may be prompted to verify your account even after login. This is nothing special and should rater comfort you.
      I have activated yours for the purpose of the exercise and you should no longer have problems.

Leave a Reply

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