Facebook Tab manager WordPress

Facebook Tab Manager 2.8.5 – Tweaks to CSS and Reveal Tab Setup

The latest release of Facebook Tab Manager includes tweaks to the default CSS and handling of custom CSS. I also updated the Reveal Tab Setup Utility.

From the changelog:

  • CSS changes to prevent display of scroll bars, even when too-wide content such as a large image is included (width set on body, with overflow hidden)
  • Changed the way custom CSS is loaded into template. Should perform better.
  • Reveal Tab Setup utility now displays 10 most recent combinations of Fan / Non-fan pages and corresponding URLs.
My intent with the changes to the Reveal Tab Setup utility was to make it more obvious how the URLs generated by the tool related to the content that would be displayed:
Reveal Tab Setup Utility
Reveal Tab Setup Utility

Toastmasters: Paul Bunyan Stories

Me practicing storytelling skills.

BrainYard Clips

Clippings From Information Week’s The BrainYard, Enterprise Social Media Coverage

Here is some of the work I’ve been doing for Information Week’s enterprise social media microsite, The BrainYard (see realtime updates).

David F. Carr | Aug 08, 2011
Crowd Factory CEO Sanjay Dholakia explains how to apply and measure social interactions across all marketing channels.
David F. Carr | Aug 05, 2011
Jive,, and Lithium at the head of the pack, but the research firm says enterprise use still experimental.
David F. Carr | Aug 05, 2011
Mobile device makers uses Telligent social platform to build Web community to collaborate on product development.
David F. Carr | Aug 04, 2011
Like Twitter chats during television shows? Check out HarQen’s intriguing beta product that adds social chat to a conference call for later search…
David F. Carr | Aug 04, 2011
College deal site Kembrel embeds its social store in Facebook, but doesn’t insist on closing the deal there.

Facebook Tab manager Web Development WordPress

How To Use Contact Form 7 with Facebook Tab Manager

One of the more useful features of Facebook Tab Manager for WordPress is that you can use it conjunction with other plugins to embed their functionality in a Facebook page tab. I’ve particularly gotten a number of requests for guidance on how to use Facebook Tab Manager with Contact Form 7, a popular forms management plugin.

You can do this by including a Contact Form 7 shortcode, which looks something like this: [contact-form 1 “Contact form 1”]

That code is generated by the administrator’s screen for the plugin. I’m not going to cover that in detail, but this utility allows you to lay out your form and the email notice you will get when someone completes it. You then copy and paste the corresponding shortcode into your page or post — in this case, into an fbtab post.

Here, I’m going to walk through an example of how to display a form only to page fans, while also including the JavaScript and CSS needed for Contact Form 7’s AJAX functions.. You could make this the landing page shown to newcomers, with a message asking them to click the Like button. Once they do so, Facebook Tab Manager detects that this person is now a fan of the page and displays the fan-only content, which includes the form. Perhaps once the person becomes a fan, you give them the option of filling out the form to enter a contest or get some special offer. The business scenario is up to you.

You can see the live example on the Carr Communications Facebook Page. Here is how it appears in the WordPress editor, with the contact form shortcode wrapped inside an fblike shortcode with a like=”1″ parameter to indicate it should only be shown to fans. An alternate bit of content is designated to be displayed to non-fans.

Shortcodes to Display Form to Page Fans

To get the styles and scripts for Contact Form 7 included properly, I need to let WordPress output the wp_head and wp_footer actions just as it would on a regular web page. The tricky part of this is deactivating functions that don’t make sense in a Facebook context. On my website, I have to be careful to turn off a function of my site’s theme that outputs a custom background image, a plugin function that outputs social media icons for my blog, and a few other things. The exact list of tweaks you will need to make varies from site to site, depending on the theme and plugin you have installed, so this is just an example – be prepared to experiment.

Checkbox options:

  • NO -Open Links / Post Forms to New Window
  • YES – Template should execute theme/plugin code in HTML head – wp_head() command
  • YES – Template should execute theme/plugin code in page footer – wp_footer()

Click the Show Advanced button and check off the plugin and theme action/filter functions you want to exclude.

the_content filters to exclude

  • sociable_display_hook

wp_head actions to exclude

  • _custom_background_cb

wp_footer actions to exclude

  • dsq_output_footer_comment_js
  • wp_admin_bar_render
  • stats_footer

Note: Make sure you have the latest release. While preparing this example, I found errors in the code for excluding wp_head and wp_footer action functions. This was fixed in version 2.8.3. Version 2.8.4 also fixed an issue with the Reveal Tab Setup utility and works better with the alternate approach below.

Using the Reveal Tab Utility

Facebook Tab Manager also includes a Reveal Tab Setup utility for designating alternate posts to be displayed to fans versus newcomers. To make this example with that approach, you would create one fbtab post containing the shortcode for the form, and check all the same boxes I explained in the previous example. You would then create a second post telling people why they should register to get access to your wonderful form.

In the Reveal Tab Setup utility, your choices look something like this:

Reveal Tab Setup for a Form
Reveal Tab Setup for a Form

You can see a live example on my business page.

In version 2.8.4, I tweaked the way the special url generated by the Reveal Tab Setup utility is processed by WordPress, making it redirect to the permalink for fans of the page. This was necessary to make it work properly with Contact Form 7, which was otherwise confused by the non-standard URL.

Facebook Tab manager WordPress

Facebook Tab Manager for WordPress 2.8, Fix for Nesting of Shortcodes

Version 2.8 of the Facebook Tab Manager for WordPress has just been released. It fixes one important error with the handling of the included shortcodes for conditional display of content based on whether someone has liked your Facebook page. Something like the example below for displaying a form created with Gravity Forms only to page fans should now work.

[fbtab like=”1″ ]Thanks for liking us! Here is the entry form:[gravityform id=3]

I had misunderstood this documentation and thought that nesting of shortcodes was automatically supported, but it turned out I needed to include a do_shortcode call in my shortcode function. Thanks to Jason Lane for pointing out the error.

Web Development

Video: Big Data and Social Analytics (Toastmasters Prep for Enterprise 2.0)

I presented this speech to Toastmasters Club Awesome in Coral Springs as a way of practicing for the Enterprise 2.0 conference in Boston, which is coming up the week of June 20. I’ll be moderating a panel on Big Data and Social Analytics, and the introduction will go something like this:

By the way, the critique I got from my fellow Toastmasters was that I did too many random things with my hands and ought to be more deliberate with my body language. But they seemed to think I sounded like I knew what I was talking about.

Facebook Tab manager WordPress

Reveal Tab Setup in Facebook Tab Manager WordPress Plugin version 2.7.3

One of the things people want to do with Facebook Tab Manager is create a “reveal tab” effect where new visitors see one message, urging the people to click the LIKE button, and page fans see another message, perhaps displaying fan-only special offers or other content.

I’ve already introduced several techniques based on the fbtab and fblike shortcodes. These have the advantage of allowing you to mix and match blocks of content that will be displayed to everyone with other content that is conditional based on fan status.

The new technique I’m introducing with version 2.7.3 is based on designating alternate posts to be displayed based on page fan status, which are referenced using a special URL that includes a query parameter like ?fbreveal=100,200 where 100 is the ID of a post to be shown to the new people and 200 is the post for fans.

The new Reveal Tab Setup menu screen contains a utility that simplifies the process of constructing the URL.

Reveal Tab Setup screen

One potential advantage of this approach is performance. Instead of loading a base post and then looking up additional content based on shortcode parameters, this method avoids some of the default WordPress processing and cuts straight to loading the fan or non-fan content (translation for programmers: the action for detecting a URL in this format is called on “init” rather than “template_redirect”).

Creating alternate posts for fans and non-fans may also be cleaner than marking up alternate blocks of content with the fblike shortcode. I think both techniques are valid, but I’d be interested in your feedback on this variation.

Facebook Tab manager WordPress

Re-purpose a WordPress Post or Page with Facebook Tab Manager

I designed Facebook Tab Manager to let you create and update content for your Facebook business page using WordPress, but it’s also possible to re-purpose an existing blog post or page and display it within Facebook.

You do this by adding the query parameter ?fb=tab to the end of the URL, for example:

This causes the content to be displayed in the fbtab template, using the default styles (Facebook fonts etc.). You would then plug this URL into the Facebook Developers utility the same way you would with any other Facebook Tab Manager post.

I used the resize parameter to make the iFrame for the tab content resize for content taller than 800 pixels to avoid the display of a vertical scroll bar. Note that this doesn’t do anything to avoid problems with content that is wider than the 540 pixels Facebook provides for tab content. So if your existing page or post includes a 550-pixel wide image, it’s not going to fit neatly into the iFrame.

The optional query parameters you can use are:

  • resize=1 (invoke the resizing JavaScript)
  • new=1 (links should open in a new window)
  • head=1 (execute wp_head)
  • footer=1 (execute wp_footer)
  • minfilters=1 (added in version 2.7.2, turns off all but essential filters on the_content)

Note that you could also use that last parameter in conjunction with a Facebook Tab Manager post as an alternative to selectively turning off filters on the_content. Useful if you’re trying to get rid of the output of plugins like Sociable that add icons and links to the end of each post.


Facebook Tab manager WordPress

Facebook Tab Manager 2.6.8 Includes New Reveal Tab Option

The latest update to Facebook Tab Manager for WordPress includes a new option for doing a reveal tab or otherwise setting content that will only be displayed to people who have liked your page, with alternate content for people who have not yet done so.

You can still use the fbtab shortcode with the like=”1″ or like=”0″ attributes and wrap it around a block of content.

Alternately, you can use the like attribute in combination with getpostid, which may be cleaner. You can create two fbtab posts and pull them into a single post that includes the like/unlike code. You can also include a page or blog post this way.

[fbtab getpostid="5" like="1"]
[fbtab getpostid="1337" like="0"]

This would be displayed as the contents of post #5 shown to all the current fans. In my test, post #5 was an existing page. Post #1337 is an fbtab post containing a graphic, essentially an ad for people to like the page. As a marketing gambit, the idea is usually to tell people why they should like the page and then show them some super special content once they do so. You can see the results at the bottom of my Like/Not Like Demo page

I find shortcodes very flexible, but I have run into situations where having them mixed in with elaborately formatted content can lead to code getting scrambled.

Facebook Tab manager Web Development WordPress

Facebook Tab Manager Setup Shortcut

One of the things I’ve enjoyed about promoting this plugin is seeing how people use it, often in ways I wouldn’t have thought of. The other day, I stumbled across a blog post by Michael Brandvold who showed me a different way of adding a page tab that uses Facebook Tab Manager but shortcuts some of the steps related to futzing with the Facebook Developer app.

He suggests using one of the freely available Facebook applications that have been created to help page owners manage their tabs from within Facebook. He recommended the Static HTML app, which mimics some of the functionality of the late, lamented Static FBML app that Facebook no longer makes available for new development. I also tested his technique with the HyperArts TabPress app (which, despite the name, has nothing to do with WordPress) and it worked equally well.

These tools let you paste in a block of HTML code that you want displayed, and you can also then edit and update that code from within Facebook. But what if you would rather take advantage of WordPress and its rich text editor?

Brandvold’s hack is to paste in a snippet of redirection code that points to your Facebook Tab Manager content, something like this:

<html><head><meta http-equiv='Refresh'
content='0; url=' /></head></html>

So instead of a whole page of HTML, you include just enough to redirect to the content you’re managing in WordPress.

There are a few tradeoffs to consider:

  • The page might load slightly slower because the viewer’s browser has to follow that redirect.
  • You can’t customize the icon that appears next to the tab name. You get the ones provided by the creators of the Static HTML and TabPress apps. TabPress also adds a little promo for itself at the bottom of your tab content (although HyperArts will sell you a “white label version” if it’s important enough to you).
  • You should probably have the redirect point to an https (SSL encrypted) web address to avoid triggering browser security warnings, particularly in Internet Explorer.