As part of my work on the Facebook Tab Manager, I wrote a little shortcode routine to prevent the WordPress rich text editor from scrambling JavaScript code, such as the widget code Facebook provides for its social plugins. Would that be useful as an independent plugin? I couldn’t seem to find another one that did this in a simple way.
The idea is that you paste your snippet of code into the Visual editor (not the HTML view). The JavaScript-powered TinyMCE editor will turn some of the characters such as the angle brackets on the tags into HTML entities as if you were pasting a code sample into your blog. At execution, the savejs Shortcode function decodes the relevant HTML entities.
It looks like this in the editor:
The savejs Shortcode
Here is the code I’m working with so far:
function savejs_shortcode($atts = NULL, $content = NULL ) {
if($content)
{
//check for numeric references, variants on quotation marks entities
$content = preg_replace('/&(#8220|#8221|#8243|quot|ldquo|rdquo);/','"',$content);
$content = preg_replace('/&(#8216|#8217|apos|lsquo|rsquo);/',"'",$content);
//convert standard entities including <>
$content = html_entity_decode($content);
//optionally, add a surrounding div that can be styled to add margins or padding
if($atts["style"])
$content = '<div style="'.$atts["style"].'">'.$content.'</div>';
}
return $content;
}
add_shortcode('savejs', 'savejs_shortcode');
I just updated the version of this code used in Facebook Tab Manager.
Note: I have run into some odd behavior with pasting code into the visual editor. Sometimes TinyMCE will produce a duplicate copy of the code snippet, which I then have to clean up by switching to the HTML view. Not sure why this happens with some JS widgets and not others.
Version 1.4 of Facebook Tab Manager is available now in the WordPress repository, with additional features for customizing the display of your content.
Apologies to those who downloaded the first day release and got a bit too much of the “beta tester” experience. I rushed it out too fast and had to immediately put out couple of bug fix releases. Despite that, Facebook Tab Manager is featured today in a tutorial on WPMU.org as an easy way of adding WordPress content to Facebook.
Version 1.4 features a couple of important enhancements, in addition to those I slipped in while I was busy fixing bugs.
One thing I discovered is that some plugins modify or append content on custom post types like my Facebook tabs (treating them as if they were regular blog posts) in ways that might not be appropriate for Facebook tab content. So I’ve added the option to selectively turn off filters. They function that removes them is embedded in the template for the fbtab content type, so it won’t interfere with the display of other content on your site.
I’ve also added an option to make links open in a new window (for example, if you’re linking to pages that won’t display well within the 520px-wide Facebook tab IFrame).
Additionally, you can enable the output of the wp_header and wp_footer functions, which may be required to invoke JavaScript or CSS output. I don’t do this by default in the fbtab template because it may result in output that’s only appropriate for display on your website, not in a tab.
Let me know if you see other things that need improvement.
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.
Create a directory on your web server for the content you want to appear on your Facebook tab.
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.
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).
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:
A basic form in Dreamweaver
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 setup
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.
Adding the ExpressDB form action tag
I save this on my server as /fbsurvey/index.php and log into the developer’s page on Facebook to register my application.
Facebook parameters
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:
The app on my page
And here is the Thank You message displayed after I click submit:
Thank you page
Finally, here is the same content displayed as a stand-alone app (with a little more screen real estate).
Viewed as an app
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.
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.
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.
Over the weekend, I posted version 1.0 of my RSVPMaker WordPress plugin … swiftly followed by version 1.1 with some bug fixes. Still, it’s a milestone, even if only an arbitrary one. I called the initial release in November 0.6, recognizing that even though I’d been playing with variations on this code for years, it would need to go through a shakedown to be generally useful to a variety of people and organizations. Now, I think it’s getting there, even though plenty of room for improvement remains.
I wrote about the learning process I’ve gone through with this project a couple of weeks ago (My Open Source Adventure with RSVPMaker). The couple of glitches that popped up with the 1.0 release weren’t show stoppers, just unexpected side effects of the latest changes. For example, I added an uninstall.php file without understanding that WordPress automatically looks for a file by that name and runs it when a user wants to delete a plugin. So I had to alter its behavior to remove database entries automatically, without prompting the user to make choices. I provided a separate cleanup.php file for users who want to clean the database more selectively.
One of the tradeoffs of open source development without a budget is everyone becomes a beta tester. Still, it was nothing that couldn’t be quickly fixed, once I became aware it was a problem.
Overall, I’m happy with the way RSVPMaker handles simple events and lets you add special parameters like RSVP start and end dates as necessary.
With Caspio, creating Facebook apps is as easy as creating any other kind of web database application. Visit http://apps.facebook.com/caspio-demo-apps/ to see several of the familiar samples from our App Gallery running inside Facebook, as shown below.
Sample Caspio Apps on Facebook
This is a powerful capability, allowing you to interact with Facebook users within the comfortable environment of the service, rather than asking them to click away to another website. You can include the Facebook page address for your Caspio application in Facebook advertising campaigns, or in links you send to other users.
The process takes just a few easy steps. You register your application with Facebook, setting the application “canvas” to either the Direct from Caspio deployment URL or the web address of a page on your own site in which you have embedded the Caspio JavaScript widget. Detailed instructions are available at howto.caspio.com.
Note: I’m working with Caspio on promotional writing for their service.
As Facebook becomes increasingly important for businesses who want to interact with customers online, many business managers are looking for simple ways of adding interactivity to their Facebook marketing campaigns. Ideally, you want to be able to give Facebook users a way to do things like fill out a contact form without being redirected to another website. ExpressDB provides a simple way of accomplishing this.
Note: I came up with this demo app as part of my work with Caspio, the maker of ExpressDB.
ExpressDB is a service of Caspio Inc. that will record the input from any web form with zero database configuration. Just point your form at the ExpressDB service, and you’re done.
To put a form on Facebook, you start by preparing your form as usual, replacing the action tag in the form’s HTML with the one generated by ExpressDB. The ExpressDB forms gallery provides several common types of forms, such as contact and inquiry forms, that you can download and customize. The resulting web page with all formatting should be no more than 700 pixels wide to display properly on Facebook.
Copy the ExpressDB activation code and use it to replace the <form> tag in your HTML
Upload the page to your website and confirm that it works as a stand-alone web form. Next, we’ll turn it into a Facebook app.
Now log into Facebook and visit the developers section. You won’t have to do any programming, but you do need to fill out an online application to register your web form as a Facebook app.
Click on the Set Up an App button. Type in a name for your App, agree to the terms of service, and click Create App.
You now need to add your domain and the address of your web page in a couple of different spots. Facebook expects you to append a query string to the end of the web address, and here we’ve just added ?facebook after our HTML filename. For the domain, you should fill in just the root address without the http part (“www.demo.com” in this example).
Step 1
On the Canvas page, enter the address you’re requesting to be assigned to this application. In this example, we have entered “expressdb-contact” which means the application will be available at http://apps.facebook.com/expressdb-contact/
Step 2
Once you have saved these settings, you should be able to navigate to the app page address you established and see your form. Note that there is room in this example to add more branding and promotional copy along with the form. You can also use this web address as the landing page for Facebook advertisements, targeted by interests, affiliations, demographics, and geography.
Your form on Facebook
When a user submits the form, ExpressDB will display either the default confirmation page shown below or a custom confirmation page, if you’ve configured one within ExpressDB.
WordPress makes publishing and updating a website easy. Caspio makes creating database forms, reports, and applications just as easy. Together, they’re even more powerful, particularly with the new Caspio WordPress plugin.
Now you can add Caspio applications to your WordPress posts and pages using a WordPress shortcode format. This works in both Caspio’s embedded and SEO Deployment modes. Read our Deploy Caspio DataPages in WordPress tutorial for details, but you can see how it works below.
Here is the [caspio] shortcode placeholder in the WordPress editor …
The caspio shortcode
… and the result on the published page …
A contact form, served from the Caspio cloud database service and embedded in a WordPress page
Version 1.1 of the Caspio Deploy2 WordPress plugin simplifies the shortcode format you can use to include content from the cloud database service. Instead of pasting a JavaScript or PHP snippet into the WordPress editor, you can paste the URL for the service into a [caspio] shortcode format. This is modeled on the way WordPress lets you embed videos using the [embed] shortcode.
To get that URL, toggle the deployment window to “Direct from Caspio” and copy the address as shown below.
If you omit the style parameter, the default value of “l” (lower case “L”) will be used.
The output from these two examples is shown below. Note that the second version, the SEO Deployment one, looks slightly different because it is picking up CSS stylings from this website.
You must be logged in to post a comment.