How to add a Facebook iFrame Application to your Fans Page

June 9, 2011
By

Copy­right © 2011 Yorgo Nestoridis. Visit the orig­i­nal arti­cle at http://yorgonestoridis.com/facebook-marketing/how-to-add-a-facebook-iframe-application-to-your-fans-page/.

6 Steps to Add a Face­book iFrame Appli­ca­tion to your Fans Page

This Tuto­r­ial will show how to set up a Face­book iFrame Appli­ca­tion in 6 Steps. Since Face­book changed once more the rules Fan Page con­tent is to be added via iFrame Appli­ca­tions. There are some App providers out there who offer quick solu­tions namely for peo­ple who do not have own host­ing; these exter­nal solu­tions have the dis­ad­van­tage that you are not in full con­trol of your frame and that you pro­mote rather the App provider than your­self. For our cus­tomers we use a more pro­fes­sional approach. Here below you will find the basic 10 steps to cre­ate your own iFrame Application.


What are Face­book iFrame Applications

As of Feb­ru­ary 2011 face­book allows iFrames on Page Tabs as well as on Can­vas Pages. The cor­re­spond­ing Appli­ca­tions don’t need to be acti­vated (using the app sub­mis­sion procedure).

In short an iFrame Appli­ca­tion allows to load exter­nal con­tent to your Fan or Busi­ness Page.


The advan­tage of Face­book iFrame Applications

As your con­tent is hosted on your own host, you may edit in  stan­dard HTML, CSS and JavaScript like on any other web page.


The dis­ad­van­tage of Face­book iFrame Applications

You need your own host­ing and be able to edit HTML, besides that, the free­dom is yours.

If you need cheap reli­able host­ing and pro­fes­sional help to set-up your app, host­ing and con­tent, please con­tact me.


1. Set up your HTML page on your Server

For the pur­pose of this Tuto­r­ial I will cre­ate the frame for an appli­ca­tion called YORGOO on my cPanel Server.

Cre­ate a new folder in your root called “app” into which you will place all your future appli­ca­tions. In the app folder we cre­ate a new folder with the name of the new appli­ca­tion, in my case: ‘yor­goo’, like so:

Facebook iFrame Application Folder Structure

In the ‘yor­goo’ appli­ca­tu­ion folder we cre­ate an index page and a style-sheet, like so:

Facebook iFrame Files

Edit index.html and paste the fol­low­ing min­i­mal con­tent 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. Face­book allows for a dis­play of max­i­mum 520 pix­els x 800 pix­els. Ide­ally you keep your con­tent within these lim­its, how­ever you could also go wider and deeper when edit­ing at the price that either the con­tent will not be dis­played 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 con­tent con­tainer for what­ever you wish to add to your page: this is where you edit your vis­i­ble page con­tent. For the time being I have just added some text for test­ing pur­poses, by replac­ing 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 lit­tle bit of style, this results in:

Page Content

Test Page Content


2. Install the Face­book Devel­oper Application

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

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


3. Cre­ate 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 Cre­ate App.

You will be prompted with a secu­rity check (paptcha), just sub­mit the sug­gested words.


4. Edit the About Page

Add a descrip­tion and some eye-catching icons, like so:

About

About

5. Face­book Integration

Select “Face­book Inte­gra­tion” from the left-hand menu and scroll down to Page Tabs — this is what will be shown in your Face­book side­bar menu:

Page Tabs

Page Tabs

If you have a secu­rity cer­tifi­cate installed on your server, add also the secure link using https:// (peo­ple log­ging on to Face­book using a secure con­nec­tion can­not see your page if you don’t pro­vide a secure link — they will be redi­rected to your wall).

Save your changes.


6. Add your App to your Fan Page

Select from the menu Appli­ca­tion Pro­file Page

Application Profile Page

Select Add to My Page from the side­bar 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!


Incom­ing search terms:

Related posts:

  1. Best RSS Face­book Page
  2. Face­book Draw­ing Board Live
  3. YORGOO on Facebook
  4. Face­book Online Sem­i­nar by Ycademy
  5. Best Face­book Pages

Incom­ing search terms:

Related posts:

  1. The Pur­pose and Future of YORGOO Media
  2. Bud­dy­Press fea­tured on YORGOO Blaster
  3. Man­ag­ing Images on YORGOO Press
  4. Pub­lish­ing and Edit­ing Images
  5. Global Sports News

Tags: , , , , , , , ,

This entry was posted on June 9, 2011 at 1:06 am and is filed under Design, Development, Media, Nestoridis, News, Web Design, WordPress, YORGOO. You can follow any responses to this entry through the RSS 2.0 feed.

3 Responses to How to add a Facebook iFrame Application to your Fans Page

  1. link building link on April 22, 2012 at 6:52 am

    Hi there, just was alert to your weblog through Google, and located that it is truly infor­ma­tive. I’m going to be care­ful for brus­sels. I’ll appre­ci­ate should you pro­ceed this in future. Lots of folks will prob­a­bly be ben­e­fited out of your writ­ing. Cheers!

    Reply
  2. Bianca Gubalke on June 9, 2011 at 11:42 pm

    Note:

    Great Tuto­r­ial — how­ever, after “Set up new App” in Face­book you are required to insert your mobile phone num­ber 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 jour­ney ends :).

    Reply
    • Yorgo Nestoridis on June 10, 2011 at 9:01 pm

      In fact you may be prompted to ver­ify your account even after login. This is noth­ing spe­cial and should rater com­fort you.
      I have acti­vated yours for the pur­pose of the exer­cise and you should no longer have problems.

Leave a Reply

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

*