There has been a lot of talk and excitement about the new iframe Facebook Fan Pages and how this change will effect facebook users. I am not writing about all of the changes as that has been covered elsewhere – an excellent article is Everything You Need To Know About Facebook’s Epic Upgrade To Pages by John Haydon.
It is know that FBML Facebook Fan Pages has now been depreciated and it is no longer possible to add the Static FBML application to pages. Static FBML is what many of us have used to create custom Facebook tabs in the past. But have no fear,existing FBML tabs will still continue to work and it will be possible to edit them but you can no longer create new pages using this application. I don’t know how long Static FBML will work before Facebook takes it away completely but i believe they will in a few months once everyone has got used to using the iframe app and developer have produced dynamic ways of using iframe in facebook pages.
So how to you create a fan page using iframes? Read below.
Before we continue you should know that there are currently 2 ways to add iframe app to your facebook fan pages,
1. through facebook developers and
2. through the wildfire iframe app.
For more options and dynamic content it is best to use the facebook developers iframe app, as you can add whole html pages straight from your hosting as well as java, jQuery, flash and any other type of coding you can think of
Creating Dynamic Facebook Fan Pages Tab with iframe
- Make a html, php, flash or other type of web page and then upload the document to you server (make sure all the files sits within the same directory). Instead of pasting the code directly into the Static FBML app, the iframe application will be pulling or streaming if you like the page that sits on your server to Facebook. This page will still need to be the correct Facebook size limit of 520px wide.
- Go to the Facebook Developers website.
- Create a new app by clicking on the ‘Set Up New App’ button.
- Give the new app a name. I recommend naming it what you want the name of the tab to be. Agree to the Terms of Service and click on the ‘Create App’ button.
- Now for the fun part – the security check with the annoying unreadable captcha.
- Next fill in your application profile details.
- Give your new application a description and upload your own icon or log if you choose to. I recommend at least using the icon because in the list of tabs on your page, your icon will appear rather than the iframe or static fbml icon. This is all we *have* to fill in on the About Tab.
- The next tab we fill out is VERY important. This is integrating your application into Facebook Fan Pages.
- Canvas URL – fill out the directory where the file you uploaded is located. This DOES NOT include the name of the file. The URL must have a trailing slash Example: http://www.creative-websolutions.com/creative-fanpage-template/
- Canvas Type – select, iframe.
- Iframe Size – unless you want ugly scroll bars select auto re-size. Removing the scroll bars completely requires additional steps.
- Tab Name – this is the name you want your tab to be called, such as Welcome, About, Products, etc. The first time I tested this my tab name was ignored and the name of the Application was used, which is why I recommended naming the application what you want the tab to be called. I’m not sure why this happened or if I did something wrong the first time so if someone can clarify this, please let me know.
- Tab URL – this is the name of the page file you uploaded. In my example it is index.html
- The Click on Save Changes.
- You will now be on the screen with information about your new application. You do not need to submit it to the directory. Actually, you probably don’t want to do this because than anyone could add you custom iframe tab to their page – I don’t know why anyone would want to do this but you just never know.
- Click on the link on the right of the application information page that says ‘Application Profile Page’.
- You now need to add the application you created to your page. This is like adding any Facebook application, such as Static FBML. Click on the link on the left under the profile image that says ‘Add to My Page’. If you are an admin for multiple pages, you will need to select the correct page to add the new iframe page application to.
- Go to your page and you will see the new tab in the list under the page photo and, if you uploaded your own icon, you will see that next to the name of the new iframe page tab.
- Click More> Edit at the bottom of the list and you can move the tab higher up the list but it can’t go higher than Wall and Info.
- You can make this the default landing tab by going to Edit Page > Manage Permissions.
Negatives of New Facebook Fan Pages
- You will have to make one of these for every custom tab that you want to make – if your Facebook Fan Pages is going to have three custom tabs you will need to make three iframe apps for it.
- It is my understanding that if you are not logged into Facebook, you will not be able to see a custom tab created with iframe. This is not good for google searches that were locating our custom Facebook Fan Pages tabs. If I am wrong about this, please let me know.
- I have not yet figured out how to use code similar to visible to connection that is used to hide content from people who haven’t liked the page, if you know how to do this drop a comment for everyone below.
Benefits of New Facebook Fan Pages
- You can add your Google analytics tracking code just like you would to any web page!
- You could make different pages in advance and quickly swap them out by simply changing the Tab URL in the application settings.
- Other? – You tell me.
You can visit the iframe facebook fan page tab I made here. I made a flash coded html page, which is only 60% finished but you can see the benefits of using iframe application.
If you would like assistance creating iframe tabs or transitioning your current tabs to iframe or would like a flash enable mini website as your facebook fan pages landing tab, please contact me for prices.