HOW TO: Create Custom iFrame Tabs on Your Nonprofit’s Facebook Page
[tweetmeme] In March 2011 Facebook disabled the popular Static FMBL App that many nonprofits had used to create custom tabs on their Facebook Pages. Rather than having their apps be based on FBML, Facebook has now switched over to iframes. Those nonprofits that have already created custom tabs using the Static FBML app will continue to be supported (not indefinitely, however), but those that want create custom tabs for the first time or switch over to iframes have a few new apps to experiment with, namely Static HTML iFrame Tabs, Static HTML for Pages, and TabPress.
That said, I spent the weekend testing all three apps. The results are posted below. You can also view my “Test” tabs (in 500 pixels width) for all three at facebook.com/nonprofitorgs.
1. Static HTML iFrame Tabs (Add to Page)
Of the three, this is the app with the largest number of users and the only one just created by “two dudes who like making elegant tools and a friendlier world.” No sales pitch attached for upgrades and no logo inserted into your custom tabs. You can also insert code for videos and slideshows inside your custom tabs using this app, and HTML, CSS, JavaScript – functionality that was not possible with the Static FBML app (!!). The Static HTML iFrame Tabs app is an excellent first choice if you only want to create one custom tab.
That said, it’s worth noting that editing your custom iframe tab is a completely different process than it was using the the Static FBML App. Rather than inserting and editing HTML code under “Edit Page > Apps,” it is done directly from the tab itself:
While naming your custom tab is still done by going to “Edit Page > Apps > Static HTML iFrame Tabs > Edit Settings” and entering the name of your custom tab:
If you are accustomed to using the Static FBML app, then you will likely be able to navigate the Static HTML iFrame Tabs app and successfully create a custom tab. If not, and this is all new to you and perhaps a bit confusing, I do demonstrate how to use this app click-by-click in my advanced webinar on Facebook and Facebook apps.
2. TabPress by HyperArts (hyperarts.com)
TabPress is my second choice, though it is only free for those pages with 2,500 fans or less. It also allows you to copy and paste the code for your YouTube videos or Flickr slideshows directly in to the tab (and HTML, CSS, JavaScript). However, you are only allowed to create one tab:
But for $99 you can purchase an app upgrade that allows multiple tabs on your custom tab:
3. Static HTML for Pages by Involver (involver.com)
Many nonprofits are already familiar with Involver apps. They allow you to download two apps from their Apps Gallery for free. If you have already added two of their apps, you will need to uninstall them if you want to use their Static HTML for Pages app to create two custom tabs. Yes, that’s right. Unlike Static HTML iFrames Tabs or TabPress, you can create two custom tabs. That said, Involver comes in third because you can’t currently add code for videos or slideshows. If you don’t want to add videos or sideshows and want to create two custom tabs, then the Static HTML for Pages app is a great option:
4. Create your own custom tabs using Facebook’s API.
Technically this is more than I want to do for custom tabs, but for those of you with the time, expertise and a server, you can create your own custom tabs using Facebook’s API. Step-by-step directions are here. Bullying UK is the only nonprofit thus far I have found that has done so. Notice how their custom tabs have their logo in the navigation on the left side of their Facebook page:
Related Links:
Webinars: Facebook and Facebook Apps for Nonprofits :: Beginner/Intermediate and Advanced
Example of Excellence: The Humane Society of the United States
Share:
Trackbacks
- Custom Tack | EQUINE SPORTS AND MORE
- Custom Beveled Glass | COBALT GLASS COLLECTIBLES
- Friday Round-Up « just b.CAUSE
- Avoid “Go to facebook.com” blue logo link when developing a facebook iFrame application « DTnA I.T. Blog
- Avoid "Go to facebook.com" blue logo link when developing a facebook iFrame application « End of Line Magazine
- - Make Money With WordPress Plugins
- e.politics: online advocacy tools & tactics » Using Social Media to Build Your Email List and Vice Versa
- 10 Most Popular Posts on Nonprofit Tech 2.0 in 2011 « Nonprofit Tech 2.0 Blog :: A Social Media Guide for Nonprofits
- FirstGiving/HelpAttack! Webinar Questions and Answers | HelpAttack!
- Facebook: Tabs and Apps? | HelpAttack!
- Using Social Media to build your Email List and vice versa | PowerThru
Nonprofit Tech 2.0 Blog :: A Social Media Guide for Nonprofits 
I love that you can pledge and enter your information right into the Facebook page. At Nadanu we are doing something similar for non-profits to allow people to donate right from the NPOs Facebook page in a graphical and interactive way. I think minimizing the amount of clicks required to pledge/sign-up/donate makes an enormous difference. Thanks for sharing such a great example!
There’s a lot of FB pages who must be creating their own FB custom tabs using the Facebook’s API. American Red Cross is one that has done a nice job. Hopefully we can get something like this going soon!
Thanks. Here’s the Red Cross folks:
facebook.com/redcross
I totally agree (as per the usual!) with you.
Your first choice is what we’ve moved to at Best Friends:
http://www.facebook.com/bestfriendsanimalsociety?sk=app_203351739677351
We looked at the HyperArts tab, and unless I am mistaken, they have a limit on the number of likes for the free version?
You are right… and that’s so silly. They have cool multi-tab premium service to sell, but they aren’t going to sell many of them if their free version is limited to 2,500 fans. 🙂
Iframes are a serious security risk. You must carefully restrict who can add iframes to a site and they must know who they are iframing, e.g. a Google map iframe is probably ok, but one to example.com is probably not ok. Essentially all the wysiwyg web input areas prevent putting iframes in the area.
Don’t much about that, but Facebook doesn’t leave us any choice. All of their apps are now iframe based.
Thanks for some excellent tips. Exactly what I was looking for, for a project in mind. I share when done!
A much-needed resource! I’ve added this to the Facebook Custom Tabs wiki, under “custom tab articles” as a resource for anyone looking at how to add a custom Facebook tab. Thanks for your research and sharing!
@askdebra
Oops – forgot the link: http://fblandingtabs.wikispaces.com/
Hi,
Is it possible to use this approach to redirect multiple facebook fan pages to a single facebook fan page.
The same way you would redirect a website url using dns or javascript, etc.
I’ve been struggling this one for a while. Is it possible?
Regards,
Sam
I think this is what you mean?
http://www.facebook.com/humanesociety?sk=app_10531514314
We offer a completely free custom Facebook page tab app that lets you use Custom tab icons easily, has a WYSIWYG editor, no branding, and provides analytics about your tab visitors. You can try it here: http://woobox.com/customtab
The Woobox app is VERY simple and intuitive (I am in no wayt affiliated with them), I put together a few screenshots to illustrate how easy it is to embed youtube video using woobox. Check it out: http://ow.ly/5o4MN
You rate the second alternative lower than the first because you cannot create several tabs with the second.
Now I need your advice: How to create several tabs with the first choice?
Thanks!
I’d suggest an iFrame Tab Plus app to be included to this list because of it’s simple and user-friendly admin interface. Check it out at https://www.facebook.com/apps/application.php?id=237843952930789
Please take a look at SocialAppsHQ (https://www.socialappshq.com/products) – it’s the largest app store on planet with 24+ apps including Free Welcome Tab / iFrame Tab