Category: Facebook Tab manager

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

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/