Facebook has changed the interface and some of the fields for creating new iframe applications. Here are the updated instructions.
Since last week, there has been a lot of excitement over the changes to Facebook fan pages and how this will effect custom tabs. 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.
One piece of news is that FBML is being deprecated and after March 11, 2011 it will no longer be possible to add the Static FBML application to pages. Static FBML is what many of us have used to create custom Facebook tabs. Existing tabs will continue to work and it will be possible to edit them but new pages and tabs will not be able to use this application. I don’t know how long Static FBML will work before Facebook takes it away completely.
Instead new custom Facebook tabs will need to be created with Iframes. Current tabs don’t have to be transitioned before March 11th but you should do so at some point over the next couple of months.
How do we do this? Well, I spent some time figuring this out and here are the instructions.
Custom Facebook Tab with Iframes
- Make a html, php or other type of web page and upload it to your web server. Instead of the code going directly into the Static FBML application the iframe application will be pulling the page you made to Facebook. This page will still need to fit within the Facebook size limit of 520px wide.
- Go to the Facebook Developers site.
- Create a new app by clicking on the ‘Set Up New App’ button.
- Give the 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 unreadable captcha. (I despise captchas but I guess that’s a topic for another day.)
- You will now be on the About Tab for the new application.
Give the application a description. You can also upload an icon and a logo. 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 SUPER important. This is Facebook Integtration.
- 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. In my exampleit is http://kimwoodbridge.com/facebook2/
- Canvas Type – select, you guessed it, iframe.
- Iframe size – select auto-resize unless you want ugly scrollbars. Removing the scrollbars completely requires additional steps, which I will be discussing next week.
- Tab Name – this is what you want the tab to be called, such as Welcome, About, Contest, 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 file you uploaded. In my example it is index.html
- 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.
- Steps 17 and 18 are no longer valid. Please see this article on how to add the custom application to your Facebook page.
- 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.
- You will have to make one of these for every custom tab that you want to make – if a page 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 iframes. This is not good for google searches that were locating our custom Facebook 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.
- 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 tab I made here. I made a couple of changes to the content but I do need to update the video and make other changes.
If you would like assistance creating iframe tabs or transitioning your current tabs to iframes, please contact me for rates and to get added to my schedule.
photo credit: TooFarNorth
Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter. If you are looking for Hosting, WordPress Theme, Newsletter or other recommendations, please view my detailed list.
198 Responses to “How to Make a Custom Facebook Page Tab With Iframes”
- 4 resources to create custom Facebook tabs with iFrames
- How to Add the Facebook Iframe App to the List of Applications in the Page Settings | WordPress and Facebook Consultant | (Anti) Social Development
- Facebook Custom Tabs moving from FBML to iFrames « The Social Media Revolution Starts…Now?
- More Ways to Use Facebook for Your Job Search | www. N () T 3 .com
- Introduction to Facebook Pages
- NEW! Facebook IFrames Tutorials, How-Tos and Other Goodness You MUST See | Barbara Ling, Your Outrageous Virtual Coach
- Constructing a Facebook Exclusive Content Fan/Like-Gate: Essential Resources | Jonathan Coffman
- BrandSocialism – Your Brand’s Facebook To-Do List
- Taking the mystery out of an ungainly but vital resource: The Ultimate Guide to Facebook Marketing – Metrique Marketing
- Best Facebook Tips and Tutorials for WebSites Marketing - Wordpress Arena
- Facebook FBML – End of Life Dates | WordPress and Facebook Consultant | (Anti) Social Development
- The Ultimate Guide to Facebook Marketing | Ajmeria Magic Development Home Practice
- New guide : “Facebook can be kind of … complicated. Particularly if you use it for business” | TheMarketingblog
- The Ultimate Guide to Facebook Marketing | Let Me Reach