Facebook Reveal Tab Created with Facebook Tab Manager, jQuery

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:

Invitation to Like the Page
Eye Chart Comes Into Focus
jQuery hide animation effect begins
Special offer revealed

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 part of the fan only content, I wrapped the image in div tag with “eyechart” as the ID. and included this JavaScript:

<script type=’text/javascript’ src=’http://YOURDOMAINHERE/wp-includes/js/jquery/jquery.js’></script><script>jQuery(document).ready(function($) {$(‘#eyechart’).delay(2000).slideUp(600);});</script>

One of the things the fbtab shortcode lets you do is paste a block of JavaScript into the WordPress editor in its visual mode. The function invoked by the shortcode fixes the entity references etc. introduced by the TinyMCE editor and transforms it back into executable JavaScript. So it’s a technique for including inline JavaScript. In this case, I’m not having FBTab manager output the wp_head action code content, so my inline JavaScript has to load the jQuery library first before invoking the animation functions.

As I say, it’s a work in progress, so I’d welcome your feedback.

Facebook Tab Manager Update to Support Latest FB Changes

Last night I posted an update to Facebook Tab Manager in an attempt to keep up with recent changes in the Facebook platform — in particular, HTTPS URLs for tabs and canvases and a change in the rules for tab URLs.

Download it at http://wordpress.org/extend/plugins/facebook-tab-manager/

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.

Other changes:

  • 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).

http://wordpress.org/extend/plugins/facebook-tab-manager/

Liked/Not Liked Content Support Added to Facebook Tab Manager for WordPress

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.”

Update April 2011: Added an fblike shortcode as an alternative to fbtab. Takes all the same parameters, including like=”1″ and like=”0″ but I recommend using fblike to wrap around a block of content such as an image that will only be shown to new people who haven’t yet liked your page. Use fbtab if the content wrapped in the shortcode is JavaScript or other fancy coding (background).

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:

Liked/Not Liked content in Facebook Tab Manager

More info: fbtab shortcode, Facebook Tab Manager home page

 

How to Pull Blog Content Into a Facebook Page Tab

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:

Facebook screenshot - Facebook Tab Manager
Clippings Page Tab

and here is how it was composed in WordPress

Editor screenshot - Facebook Tab Manager
Page Tab Content in the WordPress Editor

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.

After you download the Facebook Tab Manager for WordPress plugin, there’s more documentation on how to register your content on the plugin homepage and this category of my blog. I’ve also tried to make the UI as self-explanatory as I know how.

Updates to Facebook Tab Manager for WordPress

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.

2.0

Fixing template.php display for canvas pages

1.9

Correcting tab/canvas setup code.

1.8

  • 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.

1.7

  • 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)

1.6

Refinements to shortcode function

1.5

Added  Shortcode documented on the Installation section of this document. Makes it easier to integrate blog content and JavaScript widgets such as Facebook plugins.

1.4

  • 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

1.0

First public release February 2011

Facebook Tab Manager for WordPress Shortcode Options

Facebook Tab Manager has been upgraded to include a few new shortcode options.

  • To include a JavaScript widget, such as one of the Facebook Social Plugins, paste it into the WordPress editor in Visual mode and wrap it with [fbtab]WIDGET-CONTENT-HERE[/fbtab]. The shortcode processing function will fix the HTML entities the editor adds on angle brackets and quotation marks.
  • 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.

See the Tab Manager tab at http://www.facebook.com/carrcomm for an example using [fbtab query=”category_name=facebook-tab-manager” format=”excerpt”]

Here is what it looks like in the editor:

fbtab shortcode

WordPress makes it easy to generate the JavaScript XFBML code used here with the utilities on the Social Plugins page. For this example, I left the ID field blank, allowing the widget to default to associating content with the page it is embedded in (in this case, the underlying web page that appears in the iframe).

Obtaining Social Plugin Code

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.

Updates to Facebook Tab Manager for WordPress

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.

Facebook Tab Manager options

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.