In February, Facebook released a major upgrade to its “Pages” service.
There were several upgrades to the service, including a new design, navigation, and notifications.
But one upgrade that we think is significant: the Page “Tabs” are now created via iFrames. You host the content on your website, and Facebook frames it within your Page.
This is incredibly powerful for brands and companies.
What the Hell are Tabs?
“Tabs” were the subpages on a Facebook Page, linked across the top in tabs (thus the name). They were a combination of Facebook “apps” and unique, static pages.
These static “tabs” were built in FBML (Facebook Markup Language) and then uploaded to Facebook. And they are no longer. Facebook replaced them with this new, iFrame based system.
Anything you do on your own website can be replicated within your Facebook Page.
The New Tabs
(I am going to refer to these “New” iFrame Tabs as Tabs even though they aren’t really Tabs.)
Facebook has suddenly given us a lot of freedom. You now make a HTML or PHP or .Net page on your website, submit it to Facebook and Facebook frames it within your Facebook Page.
This content exists on your site, you get to track the analytics and you can do a lot of fancy scripting that you could not before.
For most brands, this will mean duplicating their website within Facebook. Some examples:
- J.Crew can sell clothing directly on their Facebook page, using their own ecommerce system
- 37Signals could let their users use Basecamp from within Facebook
But basically anything you can do on your site, you can now do within your Facebook Page.
What We Did:
We here at Feed.Us just updated our Facebook “Page.”
Each page is very basic with no navigation, no header, 500 pixels wide and hosted on a subdomain (using Feed.Us for content management.)
They all use a CSS that is similar to our website’s CSS file.
The Blog worked out well. Each post has its own page within Facebook, the content is the exact same as our normal blog complete with Disqus comments… all within Facebook.
How to Make a New Tab:
1. Facebook frames up 500 pixel wide page and places it right in the middle of the selected Tab on your Page.
2. Make a page and host it on your website. This page should be left justified and should not have navigation (Facebook puts the navigation on the left and top).
3. Then you give it to Facebook:
This setup is not simple, unfortunately. (Facebook jerry-rigged the old App system to support these new iFrames.)
You need to create a private “app” and add it to your page… even though it’s not an app, it’s just a page.
Kim Woodbridge has an excellent description of the submission process.
4. Then place the Tab on your Page and give the page a name (for navigation).
• Each Tab should have its own icon.
• Tabs should utilise a custom stylesheet.
• Don’t go over 500 pixels wide.
• Try to keep the pages short, under 550 pixels tall so it doesn’t scroll vertically.
• Try to utilise the Facebook font and font size so it fits in.
• Don’t make it all graphics. That’s just lame.
• Create landing pages for your facebook ads. They’ll perform better.
• No navigation, no header (logo, etc) up top.
• Link often to your site, it has got to help SEO.
• Create new Tabs for your ad Landing Pages.
• Feed.Us to manage the content on your Tab.
Some Other Examples:
There aren’t a lot of people using it yet. We’ll keep adding to this list: