Adding a Form to a Facebook Tab Using Caspio or ExpressDB

I’ve been doing a number of experiments with the new Facebook page tabs, including my work on the Facebook Tab Manager for WordPress. There are a number of other great ways of adding interactive content to your Facebook pages using this technique, and two others I think have great potential are using Caspio Inc.’s online database services.

I’ve been doing some consulting for Caspio and had previously tried integrating these cloud database services using the Facebook Markup Language (FBML) technique Facebook provided for page tabs. I could never quite get it to work. Facebook previously allowed you to use IFrames – embedded HTML frames – for Facebook applications, but page tabs had to be FBML. FBML works with Facebook JavaScript standards to display content and applications, but it imposes more limitations than content viewed in a frame.

Now, Facebook is moving away from FBML, which in some ways was a subset of HTML, toward XFBML, which is more of a superset and can be used on external websites that want to offer Facebook integration as well as in IFrames on Facebook. Just last week, Facebook announced the release of IFrame support for page tabs. And my Caspio apps work just fine in that context.

Caspio is best known for Caspio Bridge, an easy-to-use visual designer for creating online databases, reports, charts, and graphs. Once you have created an application using the web-based wizards, you just copy and paste a snippet of JavaScript code to load the form or report into your web page. In other words, adding an app to your web page — and, now, your Facebook page — becomes as easy as adding a YouTube video.

For an example of a contact form build with Caspio, visit www.facebook.com/caspioinc and click the Caspio Demos tab. Sample interactive reports for job listings and real estate listings are also available.

For the example shown below, I’m using another Caspio cloud database service, ExpressDB. ExpressDB provides a simple way for web designers and HTML coders to create interactive forms without hassling over the details of programming and database setup. ExpressDB takes the input from your form and automatically creates a database to match, reliably storing whatever data you choose to capture. This has to be the absolute simplest way of creating something like a lead capture or customer contact form to add to your Facebook page.

For either a Caspio or an ExpressDB app, I recommend following the same pattern.

1. Create a directory on your web server for the content you want to appear on your Facebook tab.
2. Save the web page containing your Caspio app (the JavaScript code provided by Caspio Bridge) or your ExpressDB form as the index file for that directory.
3. Use a file name such as “index.php” (on Unix systems) or default.asp (Windows) where the PHP file extension indicates the file is capable of processing server-side programming code. Facebook will post some data to this page, so even if you don’t include programming code, the index file should be capable of doing so (some servers may respond with an error message if they receive an HTTP POST directed at a static HTML file).
4. Register the application by filling out the Facebook Developers form. For the Canvas URL variable, use http://www.mysite.com/myapp/ and for the Tab URL (which must be different) use http://www.mysite.com/myapp/index.php (or whatever the name of your index file is). In this case, both URLs will actually access the same content.

Here is how it would work with ExpressDB. First, I create a basic form:

I log into ExpressDB and provide a name for the form. I’ve also created a custom “Thank You” page to use instead of the default, so I enter the address for that page into ExpressDB.

ExpressDB generates an activation key for my form, which is actually the opening <form> tag, coded to point to the expressdb.com service with an AppKey parameter for my new database.

I save this on my server as /fbsurvey/index.php and log into the developer’s page on Facebook to register my application.

These parameters mean that my survey will be available on Facebook at apps.facebook.com/carr-survey/ but I can also add it to any page as a tab that will be labeled Survey. After saving your work, visit the Application Profile Page Facebook creates, and you will see Add to my Page as one of the links on the left hand side.

Here is the survey on my Facebook business page:

And here is the Thank You message displayed after I click submit:

Finally, here is the same content displayed as a stand-alone app (with a little more screen real estate).

The file naming scheme I recommended here is offered for the sake of simplicity. You could also have the content available at the app, or canvas, URL be different from what you show on the tab. In fact, I think that’s what Facebook is expecting you to do. In that case you would make your app content the index.php file and make the tab content myapp.php or whatever.

That’s essentially what I did to create the Caspio app and page tab, where the canvas URL points to a page that displays several Caspio apps, some of which require a wider frame, and the page tab URL points to a version that includes just a contact form example (which happens to fit neatly with in the page tab frame).

The width of your content is definitely one of the things you have to plan your apps around. A Facebook page tab is currently specified as maximum width 520px, and you also want to allow for some padding around the edges. A Facebook canvas page is 760px, but you might want to aim for 740px if you don’t want scroll bars displayed.

Getting it right takes some experimentation, but when it works, it works great.