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:
In the ‘yorgoo’ applicatuion folder we create an index page and a style-sheet, like so:
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:
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:
Now enter a Name for your Application:
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
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
Select Add to My Page from the sidebar menu and select the page to which you wish to add the Application:
Head over to your page and you will now see the new tab!
Incoming search terms:
- add design your sneaker apllication to my facebook page
- adding facebook iframe
- developing facebook applications tutorial
- facebook page adding applications below info
- how to add app to fan page 2011
Related posts: