Facebook Tab Manager Shortcodes

Facebook Tab Manager provides support for two shortcodes that can be used to insert or filter content, [fbtab] and [fblike].

A WordPress shortcode is a placeholder for content that will be output dynamically when the page is displayed. This is often used for purposes such as outputting a data entry form, where you wouldn’t want to edit the form HTML in the WordPress editor.

When shortcodes are wrapped around a block of content, with a closing tag such as [/fblike] at the end, the content inside the shortcode tags is passed to a filter function associated with that shortcode. The function can add to or modify that content. Facebook Tab Manager [fblike] shortcode uses this for conditional display of content based on whether the viewer has “Liked” your page.

Conditional Display of Content with [fblike]

Facebook Tab Manager uses [fblike] for condiditional display of blocks of content, based on whether or not the person viewing the page has become a “fan” / subscribed to posts from that page by clicking the Like button. You do this using the fblike shortcode with like="1" or like="0" as attributes on the shortcode. One advantage of using shortcodes for conditional content is your post can also include content that is displayed to all viewers regardless of their “fan” status. If you don’t like dealing with code in the body of your posts, consider using the Reveal Tab Setup utility instead.

The shortcode format is [fblike like="0"]CONTENT TO SHOW TO NEW VISITORS[/fblike] [fblike like="1"]FAN-ONLY CONTENT[/fblike]. You can include multiple paragraphs, images, and other content, wrapped inside an [fblike] tag — just be sure to include the[/fblike] code at the end.

It is also possible to include other shortcodes, such as the one to output forms from the Contact Form 7 plugin, wrapped inside the [fblike] shortcode tag. (See tutorial on using Contact Form 7 with Facebook Tab Manager).

Use [fbtab] to Execute Custom Queries or Include JavaScript

The [fbtab] shortcode’s strength is handling more complicated output, such as lists of headlines from your blog or inline JavaScript.

  • To include blog post or page content, you can use [fbtab query="QUERY-STRING"] where the query string is something like 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" orformat="excerpt".
  • 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]. Although it’s possible to add JavaScript code with the editor in HTML mode, it’s easy for the code to get scrambled as you toggle between the Visual and HTML editing modes. When you add code in Visual mode, the editor handles it as if you were putting in a code sample to be displayed rather than executed. The shortcode processing function reverses this process and turns your JavaScript back into editable code.
  • You can also use like="1" and like="0" as an attribute on the [fbtab] shortcode to determine whether [fbtab] content should be shown or hidden.

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:

This is an [fbtab] wrapped around a block of JavaScript code, followed by another [fbtab] that executes a query.

The JavaScript here is code for a comments box, automatically generated from the Facebook Social Plugins page. Where Facebook prompts you to enter the URL of the page this comments form will be associated with, I recommend entering the https version of the URL for your page tab.

Common Queries

Here are some common queries you might use:

[fbtab query="posts_per_page=20" format="headline"] – the 20 most recent posts from your blog, headlines only.

[fbtab query="posts_per_page=10&cat=1,2,3" format="headline"] – the 10 most recent posts from categories 1, 2, and 3

[fbtab query="posts_per_page=10&cat=-3" format="headline"] – the 10 most recent posts, excluding category 3.

You can also include an entire post using getpostid as an attribute on fbtab. When used in combination with the like attribute, this provides yet another way of doing conditional content:

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

When composing posts that include conditional content of custom queries, continue using a preloader effect to ensure the user sees a visual indication that the website is loading content even if these routines take a few seconds to run.

  • Mimi

    You have a very nice plugin and wanted to just say thank you for this! Good Work!