This is a work in progress for a client of mine, showing how to create a Facebook reveal tab – a page tab that reveals more information once a visitor has clicked the “Like” button – using Facebook Tab Manager.
Because this is for an optometry practice, I had Beth Anne mock up an eye chart illustration that comes into focus when you click the button. Then, once we’ve gotten our point across, the eye chart vanishes using a jQuery animation effect, revealing the practice’s current special offer. This is still under development, so I’d appreciate your help getting a critical mass of likes on the Marciano Family Optometric page (even if you unlike it later).
Here is how it works:
The effect is based on two blocks of content, tagged using these shortcode patterns:
[fbtab like=”0″]INVITE “LIKE” CONTENT[/fbtab]
[fbtab like=”1″]FAN ONLY CONTENT[/fbtab]
As I say, it’s a work in progress, so I’d welcome your feedback.
The bottom line is the instructions I provided for registering apps and tabs on Facebook had drifted out of synch with the Facebook Developers app registration form.
The most consequential of these changes is that you can now specify HTTPS encrypted URLs as alternative sources of your canvas or tab content. This solves a problem I only heard about recently concerning people who take advantage of the “secure browsing” feature Facebook introduced earlier this year, which allows users to specify that all facebook.com addresses should be loaded in HTTPS mode. If your app or tab was not available at an HTTPS address, Facebook simply wasn’t displaying it (and your browser would probably have complained about mixed insecure / insecure content anyway).
The catch: this only fixes the problem if your web server is configured to support HTTPS. If you want to make your content available to the broadest audience, maybe it’s time to spring for the required SSL certificate. Even if you don’t do e-commerce on your website, you will get some additional benefits such as being able to better protect your password when you log in as administrator.
The other Facebook change I’m reacting to is that you now specify the full URL that tab content will be pulled from.
Previously, the form forced you to specify your canvas as a directory style URL with a trailing slash like http://www.mysite.com/fbtab/canvas/ and the tab had to be a file or directory below that level like http://www.mysite.com/fbtab/canvas/tab/ and the form had you fill in just the last part of the address for the tab as in “tab/” in the tab section.
I’ve updated my instructions to reflect this change, including the fact that you can now use the same fbtab post serve as the basis of both an app canvas and a page tab. Facebook Tab Manager still lets you choose to create a tab/canvas pair of posts, with the canvas taking advantage of the wider content area, where that is worthwhile.
I eliminated the banner I had appearing on pages when viewed on your own website. Caused more problems than it solved.
Tweaked the handling of stylesheets to be served as a static document when no custom CSS is being used. Should help with performance.
As always, let me know where you see room for improvement (most of you aren’t shy about that).
Facebook Tab Manager 2.3 lets you specify that content should be shown or not shown depending on whether the viewer has Liked the page that your tab is embedded in.
Add like=”1″ to the fbtab shortcode if content should only be displayed to people who have liked the page
Add like=”0″ to the fbtab shortcode if content should only be displayed to people who have NOT liked the page
You can add an explanation in either of these two cases such as message=”You must like this page before this super-special content will be displayed.”
Consider this an experimental function and test it before you use it too aggressively.
Note that when you preview the content on your own website, it will be displayed as in the “not liked” mode because it’s not being viewed from within Facebook.
Update: I added a tab to www.facebook.com/carrcomm to illustrate this better. What you will see there is the equivalent of this content, as recorded in the WordPress editor for FB Tab Manager:
This is a usage example for the Facebook Tab Manager for WordPress plugin, which lets you create and edit content to be displayed on Facebook from within the WordPress editor.
This is the clippings page tab for my work as a tech journalist:
and here is how it was composed in WordPress
This example uses the fbtab shortcode, which allows me to pull in a category from my blog. I could also just pull in the latest posts, or a single post I wanted to feature.
I set the links to open in a new window, because the full posts won’t display properly within the narrow IFrame of my page tab. I have my template set to execute all the normal wp_head actions, one of which is a Twentyten theme action to set the page background image. I then add a little bit of CSS to provide a different background for my #content div and styling for the links (based on the color of Jupiter’s ruddy clouds).
For a finishing touch, I found a free clip art image of a pair of scissors and changed the icon to be displayed next to my tab using the Facebook Developer utility on facebook.com.
I continue to update Facebook Tab Manager aggressively, maybe too much so. I really should have called the first version 0.1, as I’ve now put out so many upgrades and fixes that it’s at version 2.1 — less than two weeks after the initial release.
Facebook Tab Manager lets you prepare and edit content to be displayed on Facebook as just another kind of post within the WordPress editor. When you publish your post, Facebook tab manager displays instructions for registering your content in the Facebook Developer application. This is a good way of maximizing the free resources Facebook provides for sharing your applications and marketing messages through the social media service. The content you display on Facebook can include the output of other plugins, using WordPress APIs such as shortcodes and content filters.
You can now create either a simple page tab, or both a tab and a canvas page (you view a tab embedded within a Facebook page for your business or organization, whereas a canvas is viewed, outside the context of a page).
After some futzing around, and feedback from early users of the plugin, I also figured out how to get rid of the scroll bar, and allow the page tab content to resize, for content that exceeds the default IFrame dimension of 800px tall.
Fixing template.php display for canvas pages
Correcting tab/canvas setup code.
Added checkbox option to set resize / auto resize for tabs taller than 800 pixels
You can now create both a tab and a canvas page for your application.
Added options page for setting defaults, such as filters to ignore and CSS to apply
Clarified documentation for how to fill out the Facebook Developers form
Flush Rewrite Rules set to run every time on initialization (not supposed to be necessary, according to the documentation, but seems to work better on some configurations)
Refinements to shortcode function
Added the ability to deactivate content filters when the fbtab template is displayed. This lets you eliminate plugin content modifications that are not appropriate for your Facebook tab.
Updated the instructions for configuration on Facebook.
1.1, 1.2, 1.3
Fixes to default styles handling, directory locations
To include blog post or paste content, you can use [fbtab query=”QUERY-STRING”] where the query string is something like p=1 category_name=facebook-tab-manager — see the documentation for the query_posts function for possible values. You can also use a format attribute of format="headline" or format="excerpt".
Update: Also see the post on conditional display of content depending on whether the user has Liked / not yet Liked your page.
If you’re using other WordPress plugins to generate FB integration code, some of what I’m showing here may not be necessary. But it still may be handy for some folks trying to get stuff done quickly.
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).
Let me know if you see other things that need improvement.
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.
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.