On March 11th 2011, Facebook will discontinue using FBML (Facebook Markup Language) that were used for your Facebook landing page tabs. It will be replaced by iframe for adding your fan page tabs. In this post we will show you how to add iframe tabs to facebook fan pages.
You need a domain and web hosting with SSL
Before you start, you need a domain and hosting. If you don’t have a domain and hosting, we recommend you get domain hosting at Name Cheap and web hosting at Hostgator because it has 99.9% uptime guarantee and they have the best support.
You will also need SSL, which you can get from Namecheap or Hostgator, we recommend using the business plan at Hostgator as it comes with a free dedicated IP address and Private SSL certificate. To find out more about SSL – read post
Save money with HostGator webhosting Now – Get the first month of hosting Free
To get $9.94 off on any order, enter the below promo on the order page
DISCOUNTCODE994OFF
Upload Your Files To Server
On your Web server, create a directory for your iFrame page. In this example, we are going to create a new directory on the server called “fanpage” The file path will look something like this
public_html/fanpage/
if you want to add a subdirectory e.g “myapp”. The file path will look something like this
public_html/fanpage/myapp/
You will need to put all of your files (HTML, CSS, Javascript, PHP, etc) in the directory folder or its subdirectories. If you don’t know how to do this, read this FTP tutorial using Filezilla.)
If you already done that, let’s get started.
1. You need to login and go to http://facebook.com/developers/ then click “Set Up New App” button.
If this is your first time installed the Developer Application, you will see the Request for Permission dialog show below:
Click the Allow button to proceed.
2. Write your App Name and tick Agree and click “Create App”
3. Enter the security phrase and then click Submit.
4. Fill in your app name and basic information
Give your app a name that is short and descriptive. This name will appear on your list of apps on your developer page.
The icons are quite important, especially the small one now that it’s shown in the left-column navigation. So make it eye catching. If you don’t create your own icons, you’ll get the defaults, as shown below.
5. Enter the Canvas URL and the secure Canvas URL, this the URL for the location on your server where you are storing your application files. for example http://www.yoursite.com/fanpage/
6.Scroll to bottom, enter Tab Name and Tab URL of your index.php file. Then click Save Changes.
Page tab name - is the navaigation name on your facebook page
Page tab URL- is the URL for the location on your server where you are storing your index file. for example http://www.yoursite.com/fanpage/index.html
Secure page tab URL- is the secure URL for the location on your server where you are storing your index file. for example https://www.yoursite.com/fanpage/index.html (SSL hosting is needed)
It will generally be index.html, index.php or something similiar. Make sure to put something in the field or your tab will not appear on your Fan Page.
Click the Save Changes button.
7. Install your iFrame application on your Fan Page
Now click the Add to My Page link on the left. A dialog overlay will open and will show any pages that you are an Admin on.
Find the page that you want to add the Tab to and click the Add to Page button
You can click on your new tab in the page menu.
Your new iFrame app should now appear on your Fan Page.
8. Removing the right and bottom scollbars in your fan page
Suitable width and height of your fanpage should be 520px x 800px, if your height is over 800px, right and bottom scollbars will appear.
I entered this code after the <head> tag on my index.html, to remove the right and bottom scollbars
<style type="text/css">
body {
width:520px;
overflow:hidden;
margin:0; padding:0; border:0;
}
</style>
If the code above does not work try this one, change the height and add fan page id:
<style type="text/css">body {overflow: hidden;}</style>
<body onLoad="FB.Canvas.setSize({width: 500, height: 1100})">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
FB.init({
appId : 'YOUR_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
window.fbAsyncInit = function(){
fb.canvas.setautoresize();
}
</script>
Just remember to set your application settings to Iframe and Resizable.
If you want to add a comment box read post – how to add a comment box to your iframe fan page
February 22, 2011 at 2:15 am
thx for the tut, Avis. A couple of questions though…
1. Even after upgrading my page, I don’t see the new tab name on my navigation list. Why is that? (It’s there for my app but not my page)
2. How do we replace the features that we’ve been using – like “visible to connection,” “discussion box,” and other dedicated FB features? Is there an HTML substitute for these? XFBML? Other?
February 22, 2011 at 1:53 pm
Hi Zak
1. Enter the name of tab in the “tab name box” under page tab heading
2. I have provided a tutorial on how to add a discussion / comment box
http://www.likethisfanpage.com/how-to-add-a-comment-box-to-your-iframe-fan-page/
Also look at Facebook App guides, they provide the information you need to add Facebook features and social plugins to your page. – http://developers.facebook.com/docs/
February 22, 2011 at 2:20 am
update…
1. My bad – I had to edit the settings on my page to “Add” the tab. Guess I assumed it was already added
Still curious about your feedback on #2…