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.