Facebook Tab manager Social Media Web Development WordPress

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

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.

Web Development

How to Create a Facebook Page: The Simple Steps Are The Most Important

Creating a Facebook page, also known as a Facebook business page or Facebook fan page, is probably one of the best things you can do right now to boost your brand, small business, non-profit, or political campaign. Some marketing experts believe capturing your Facebook page name (along with your Twitter URL) is proving almost as important as capturing your Internet domain name. And best of all, it’s free to get started.

There are several other good tutorials available, but I decided to write my own focused on the basics. At some point, you may decide to get ambitious enough to hire a team of programmers to create custom Facebook applications and page tabs. But you want to focus on the basics before you get dazzled by the possibilities of “s-commerce”, or immersed in the complexities of programming in Facebook Markup Language (FBML).

The first three things you want to do are the simplest:

  1. Register your page
  2. Invite friends and customers to “Like” the page (register to get your updates)
  3. Secure a unique page name. This appears like a directory under, giving you an address pegged to your brand that you can print on business cards and promote in all the same ways you advertise your Internet domain. For example, Carr Communications is at

Step #2 is a prerequisite for Step #3 because Facebook will not let you establish a name or “username” for your page until you have a minimum number of people “Like” your page. At this writing, you need 25 Facebook fans. And you want to secure the name that is the best match for your brand before someone else gets it.

Marketing and Publicity Web Development

Announcing a Free Tool: Create a Lead Capture Form That Connects Facebook to Your Website

Update: Facebook’s move to enable page tabs based on HTML iframes rather than FBML makes the specific techniques discussed below obsolete. Today I recommend instead using my Facebook Tab Manager for WordPress if your site is on WordPress. If you are not on WordPress, you should find that the task of integrating custom content including contact forms is now easier, overall.

As a sequel to my post on why Facebook Ads Should Point to a Facebook Page (Not an External Web Page), I cooked up a little homegrown tool that generates the required code. The source code output is derived from the example in George Huger’s Submitting a Contact Form via AJAX From Your Facebook Page. Huger shows how to use JavaScript functions that are approved for use within Facebook to submit a data entry form from within Facebook, have it processed on your web server, and get back an acknowledgement you can display on your Facebook page – without ever making the user leave Facebook and go to your website.

Read more and try it

Web Development

Facebook Ads Should Point to a Facebook Page (Not an External Web Page)

Update: Free Tool: Create a Lead Capture Form That Connects Facebook to Your Website

Facebook ads have a reputation for being effective and relatively affordable, partly because you can set them up so they only appear to a very narrow demographic. For example, a sporting goods store with an overstock of women’s golf clubs could target a Facebook advertisement to appear to promote a sale exclusively to women who like golf (and like it enough to put that on their Facebook profile) who live in one of the cities near that store. But if you send the people who click on that ad to your website, you may be wasting your money. You should be sending them to a Facebook page for your business instead.

That was one of the big takeaways from my meeting with Clara Shih, author of The Facebook Era, following her keynote at the Online Media Summit Miami. Shih says the abandonment rate is about 75% when you send Facebook users to an external website. So your Facebook advertising will be much more effective if you can achieve whatever you’re trying to achieve with that ad within the Facebook Framework. Some retailers are building whole e-commerce storefronts, at least for selected promotions, to be displayed within their Facebook pages.

I had heard some variation on that advice before, but I didn’t realize the effect was quite that dramatic. This prompted me to give myself a crash course in FBML, since I had experimented with Facebook advertising for my own purposes and had been disappointed with how poorly it converted.

"For whatever reason, people really hate to leave Facebook," Shih says. "Maybe it’s that they like knowing their friends and their messages are just a click away.” Meanwhile, she argues that building a FBML application is just not that hard, or expensive. “The secret about FBML is it’s just HTML with a few more markup tags. Your developers can cut and paste and use a lot of their existing web code. For the most part, it’s just a variation of the same HTML and JavaScript they’ve been using all along."

I’ll have more details on my interview with Shih in my Forbes column next week (update: column: How Facebook Changes Marketing and Sales). Meanwhile, I wanted to share a few details about my adventure with FBML.

Shuh is right that it’s not that hard, but figuring out how to get started is not so easy, either. I found a few good tutorials on how to use the “Static FBML” widget, a standard Facebook app, to create a custom tab for your profile or company page. See: Tutorial: Customize Facebook Pages with “Static FBML” application. This can be a pretty easy way of adding some additional images or styling to a tab on your Facebook page.

But if you want to create a landing page where you will capture someone’s contact information, or maybe even their order, that’s a bit trickier. Most of the tutorials I found settled for showing you how to embed an HTML form, which would then post to an external website. As a basic solution, it works, but it does take people away from Facebook – which from what Shih is telling me will just annoy them. So you’ve captured a lead, but maybe alienated a prospective customer in the process.

A slightly better solution would be to make the form open in a new window, using code like this:

<form action="" method="post" target="_target" >

It turns out there is a way to process the form submission instead with AJAX – the JavaScript technique for passing data to a server behind the scenes, getting back a response, and displaying the results. But you have to use some Facebook-approved JavaScript code, as explained in Submitting a Contact Form via AJAX From Your Facebook Page. Again, this is the clearest explanation I found – every other explanation I found seemed to assume that either I already knew these details or was looking for a more basic solution. So thank you to blogger George Huger for spelling it out.

Here is what I did to convert his sample code into a working contact form:

Modified the data entry form, adding a few more fields.

Modified the JavaScript code to pull data from those additional fields. Added the url for my own PHP script for lead capture to the form and to the JavaScript code. The modified JavaScript looks like this:

var queryParams = { 'name' : document.getElementById('name').getValue(), 'email' : document.getElementById('email').getValue(), 'phone' : document.getElementById('phone').getValue(),'company' : document.getElementById('company').getValue(),'message' : document.getElementById('message').getValue() };'', queryParams);

From there I just had to create a PHP script that processes the post data, doing a little validation and sanitation for security, logs the data to a database, and sends me an email notification. I just threw the code together this morning, so I’m not going to throw it out there as an example of the write way to do PHP coding. But so far it seems to work just fine. Update, In a fit of ambition I cooked up the following. Free Tool: Create a Lead Capture Form That Connects Facebook to Your Website.

Take a look at my new Facebook landing page to see how it turned out.

One complication: Facebook now makes it hard for a small business with limited traffic to set a specific tab as the default tab for a business Facebook page. However, when setting up an ad, I found it was still possible to make it work by selecting the “web page” option rather than the “Facebook page” option. So instead of choosing from the drop-down list of your Facebook pages, you paste in the URL for your landing page tab (each tab has a different URL). Seems to work fine.