How to create a Facebook iframe tab for your page
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, let’s 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 set-up 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 then 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 pop-up which has all the pages you are an admin of, click the add to page button and you’re 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 set-up your domain name within Facebook.
