How to add a Facebook iFrame Application to your Fans Page

Copyright © 2011 Yorgo Nestoridis. Visit the original article at http://yorgonestoridis.com/facebook-marketing/how-to-add-a-facebook-iframe-application-to-your-fans-page/.

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container">
<p>HERE COMES YOUR CONTENT</p>
</div>
</body>
</html>

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 {
 width:520px;
 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">
<h1>YORGOO</h1>
<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>
</div>

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:

About

About

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

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

  1. 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.

  2. 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.

  3. 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.

  4. 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!

  5. June 9, 2011 at 11:42 pm

    Note:

    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 *