How to Create a Facebook Iframe Tab for your Page
March 13, 2011 in Facebook by SocialMediaCharity
Facebook have made a major change to the way you add tabs to your Facebook Page, FBML is out and now a much simpler system using good old iframe is the way forward.
This does take a little bit of setup but once you do iframes make it really easy to change the content in your Facebook tabs without having to know complex FBML (unless you want to!) It also means you can build more dynamic tabs because you can control everything from your web server rather than messing about inside an FBML box.
You can see an example on the BullyingUK Facebook Page
What you need:
- A Facebook page
- A web server (where your iframe content will be hosted)
- 20 – 30 minutes of your time
Ok lets begin by adding a Facebook App to your developer account, from now on Facebook wants everything to run via the developer dashboard and Facebook apps. This will make it easier for Facebook to police the system but also provides you with stats and other useful features.
Visit facebook.com/developer and click on “Setup new App” on the top right.

Give your application a name and agree to the Facebook terms of service, on the next screen complete the CAPTUA security question.
You will now be in your app admin screen, this is where you can configure a Facebook app for many purposes. Don’t worry we only need to setup a few things in here most of it we can skip!
On the About tab you should upload a 16×16 graphic this will appear as the icon on your Facebook Page tab (we will get to that later) for now upload a suitable image and the click on Facebook Integration.
You need to add:
Canvas Page – This is a unique name (word) on Facebook, that is used to access the app
Canvas URL - This is the path to your web server where your content is stored NOTE do not enter a file name like index.html
Canvas Type – You must set this to IFRAME
Tab Name – The Name of the Tab when it’s added to your Facebook page
Tab URL - This is where you put Index.html or the filename of the html page on the web server you are putting in the Iframe
Save the changes and then on the next screen we can go to your new Apps profile page and add the iframe tab to your Facebook Page.

Click on Application Profile Page and then look for a link down the left side called ADD TO MY PAGE you will get a popup which has all the pages you are an admin of, click the add to page button and your done. Make sure you add it to your Facebook Page and not the App page you just created!
Now visit your Facebook page and you should have a new tab with the name you used during creation of your app above, click it and it should be pulling in the content you uploaded to your web server.
Now use your imagination and see what sort of tabs you can create for your Facebook page, if you can run it on your website you can run it on your Facebook page! If you want to add Facebook FBML or OpenGraph code to your iframe app you will need to make sure you have setup your domain name within Facebook.




[...] I have written a guide to help you setup the new iFrame Tabs on Facebook. [...]
Продажа металлоискателей.
Hello!
Thanks for your great tutorial! I’m just unable to add the application on my Facebook page. I have the app up and working (http://apps.facebook.com/turkanen/), but for some reason I can’t figure it out how to add it to my Facebook page as a tab.
No “Add to my page” link can be found at the profile page. What to do?
Hello, I was struggling with this problem all the night and this morning, but I was able to solve this problem. I haven’t found the solution in any tutorial or forum, so maybe this detail should be added to this tutorial.
At least now, maybe for some Facebook update, the app needs to be added on the page using the following link: https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID_HERE&display=popup&next=http://www.facebook.com/
So the “next” variable should be left as http://www.facebook.com/ or you will get an error message. Maybe this situation is temporary, but at least it works right now. Maybe later, too. So if you face problems, try using the link above. Remember to set your app id in the address!