How to add a Facebook iFrame Application to your Fans Page

Add to My Page

09 Jun 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
12 Comments
  • Neil
    Posted at 09:53h, 15 August Reply

    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.

  • hay day on kindle fire
    Posted at 04:59h, 09 August Reply

    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!

  • seo Hitchin
    Posted at 03:10h, 11 July Reply

    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.

  • how do you get more followers on instagram without following back
    Posted at 03:23h, 22 June Reply

    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.

  • Buy instagram followers
    Posted at 21:23h, 21 June Reply

    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!

  • wifi hotspot device
    Posted at 01:16h, 27 May Reply

    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!

  • clash of clans air defense upgrade
    Posted at 16:41h, 13 April Reply

    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.

  • Roberto
    Posted at 13:22h, 10 April Reply

    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.

  • Flexaust Flex Tube
    Posted at 20:01h, 04 April Reply

    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.

  • link building link
    Posted at 06:52h, 22 April Reply

    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!

  • Bianca Gubalke
    Posted at 23:42h, 09 June Reply

    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 :).

    • Yorgo Nestoridis
      Posted at 21:01h, 10 June Reply

      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.

Post A Comment