Experiments with Facebook iframe Tabs, Facebook Tab Manager WordPress Plugin

I’ve been doing a bunch of experiments with the new Facebook iframe page tabs and have cooked up a Facebook Tab Manager plugin for WordPress, which works pretty well. This plugin lets you compose and edit content for your a tab to appear on your Facebook business page (or campaign page or nonprofit page) from within WordPress. I use custom post types to treat Facebook tabs a just another kind of post, and the content can be integrated with other plugins using WordPress Shortcodes.

The content is displayed in a very simple template with none of your site’s normal navigation, etc. That makes it easier to make it fit into a Facebook layout. I provide some default styles, but you can also add custom CSS on a per post (or per tab) basis.

You can see an example iframe Facebook tab at http://www.facebook.com/carrcomm?sk=app_188292324537166

As part of some promotional work I’ve been doing with cloud database company Caspio Inc., I’ve also created custom tabs you can see on the Caspio Facebook page and ExpressDB Facebook page. These demonstrate how data entry forms and database reports from Caspio’s online database products can be embedded in a Facebook page.

Overall, I’m finding that these iframe based tabs are much easier to work with. Previously, page tags had to be coded in FBML (the Facebook Markup Language). Now Facebook is phasing out FBML in favor of XFBML, a version of the language you can embed in any web page, which works in combination with the Facebook JavaScript SDK. XFBML can also be used within an iframe page.

Using the full set of Facebook APIs, it’s possible to do much fancier things than I’ve attempted so far. But I’m happy to see that I can also do relatively simple things easily.

10 thoughts on “Experiments with Facebook iframe Tabs, Facebook Tab Manager WordPress Plugin

  1. David, very nice article. I am going to check out the WordPress Plugin you made too. I think right here ” Now WordPress is phasing out FBML in favor of XFBML” you meant to say “Facebook” instead of “WordPress.” Right?

  2. Facebook restricts the iFrame height to 800 pixels. Lots of developers are lobbying them to provide a way to adjust that, but right now that's what we're stuck with.

  3. David – I've create a custom tab using Gravity Forms and have the user redirected to another page once they submit their data. How do I remove the following message on the redirect?

    “This content is meant to be viewed as a Facebook embedded frame.
    This website: Inbound Zombie”

    Thanks,

    John

  4. So do I understand right that you're trying to keep the experience within Facebook, so the redirect occurs within the iFrame for your page? I hadn't anticipated that scenario. So the “this content is meant to be viewed” message is coming up on the confirmation page, right? I had built in a check on HTTP Referrer that's looking to see a referral from the Facebook platform, but I think HTTP Referrer is showing up as the original fbtab page on your website.

    I will try to have a fix for you by this weekend. Meanwhile, if you have a deadline to meet, you could open up template.php and remove this block of code.

    if(!strpos($_SERVER['HTTP_REFERER'],'facebook.com/platform') && !strpos($_SERVER['HTTP_REFERER'],'apps.facebook.com'))
    {
    ?>
    <div style=”background-color: #3B5998; height: 40px; color: #FFFFFF; font-weight: bold;”>
    This content is meant to be viewed as a Facebook embedded frame.

    This website:

    Leave a Reply