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.

26 thoughts on “Facebook Tab Manager for WordPress Shortcode Options

  1. This is great. The last upgrade did it for me. I've got a page working now and am using the cforms plugin along with it. I know that the more I play the more I learn.

    What I'm trying to do now is link to another page after they fill out the form. I guess I thought I could link it to the FB page url but obviously that wasn't right because it brought in the whole page. Can ” create mulitple tabs and have them link just to the other tab? I'm not a coder but maybe if I play around I can figure it out.

    Thanks so much for a great plugin. I've really looking forward to using it more. I set my theme for 520px and removed sidebars and it's great!

    BTW…I love your Facebook page. Great job.

  2. You need to specify that the link should open in a new page, so that it doesn't get pulled in within the frame. You can do that for a single link within the WordPress Visual editor (one of the drop down options), or add the attribute target=”_blank” to the HTML. I also have a check box in the Facebook tab manager that will set all links to open in a new page (sets a parameter in the HTML head for the page)

  3. Thanks…I'll play with that tomorrow. Anyway to get rid of the vertical scroll bar? I've made sure none of my graphics are over 500px and even changed the width of the theme.

    Have about 3 clients I'm going to work on during the next week. This is just making things so much simpler for me and the more I learn the more I will be able to do. Again, thanks for this.

  4. Hi, when I'm in the wordpress CMS there are input fields for adding html and css (in the Edit Facebook Tab menu), but is there a (simple) way to add javascript as well? And if not, how do I do this?

    Trying hard to understand how FB integrated websites work…

    Thnx in advance, Tom

  5. Tom, that's one of the things I was trying to address with this shortcode. Normally, if you want to insert a snippet of JavaScript, you can do so by switching to the HTML view and saving your post. However, if you toggle back and forth between the Visual and HTML editor modes, your JavaScript code will often get scrambled. The Visual editor is designed to handle HTML formatting not JavaScript code … even though the editor itself is written in JavaScript.

    At any rate, it's easy to make a mess of things.

    The work-around I offer here is the ability to paste a JavaScript snippet into the shortcode placeholder, as in [fbtab]JAVASCRIPT HERE[/fbtab]. You do this in the VISUAL editor, as if you were putting in a code sample to be visible to the reader, rather than as executable JavaScript.

    When the page is viewed, that snippet is passed to a function that decodes the HTML entities used for angle brackets and quotation marks and outputs JavaScript that a browser can actually process. I don't know if this will work with any JavaScript, but it does work with the Facebook Social Plugins that I've tried with it. If I can find time, I may release this functionality as a separate plugin that can be used outside of FB Tab Manager.

    BTW, if you're trying to understand the way WordPress works with JavaScript in general, there are other techniques, but generally they involve creating your own plugins or themes that add the scripts you want.

  6. Is there a way to use the FBML code that would display a “non-fan” image requiring the viewer to “Like” the page first, to gain access to the underlying content? That's the last thing I have to solve, to make this a great way to use WordPress as a CMS for Facebook Pages Tabs. Thanks so much for this plugin! Where's your donate button? 🙂 I see that you have code to do that, to show a message, but how do I just display an image?

  7. Hi there,

    I'm still trying to get the plugin to allow only non-like content such as a picture, and was wondering if this post addresses the same issue?


    I only use WordPress in the marketing department here and without have to resort to someone to program something, does the above post merit a solution to the like/non-like reveal content problem?


  8. Super plugin for ease of use to create FB pages!
    Only thing I picked up was that I couldn't use short-codes inside other shortcodes.
    e.g. I want to use a fan gate (user must first like the page in order to view the page):
    I use [fbtab] CODE GOES HERE [/fbtab]
    Inside the CODE goes here, I then also include a shortcode for our forms, the code then ends up looking something like this:
    [fbtab like="1" ]Thanks for liking us! Here is the entry form:[gravityform id=3]
    As you'll notice, there is a shortcode inside the other shortcode.
    This ends up not outputting correctly.

    Any way around this?

    Otherwise a great plugin!

  9. The shortcode API is supposed to allow nesting of shortcodes, but I know someone else also reported a problem with this. I will try to investigate.

  10. I am also having this problem….

    [fblike like="0"]<img alt=”Like us on Facebook” class=”alignnone size-full wp-image-336″ height=”450″ src=”xxxxxx/likeus.jpg” title=”Like us on Facebook” width=”500″>[/fblike][fblike like="1"][fbtab query="category_name=my-category" format="excerpt"][/fblike]

    First part displays correctly,  the second part displays shortcode.

  11. Instead of wrapping the fbtab inside the fblike, just do 

    [fbtab query="category_name=my-category" format="excerpt" like="1"]

  12. I found a tip for nesting shortcodes when I ran into the problem recently.  The solution is a very simple change to your shortcode generating code.  At the end, instead of returning the output, return do_shortcode($output);

    I tried this in your plugin and it worked.  The line of code in fbtab.php is:

    return fbtab_shortcode($atts, $content);Change this to:return do_shortcode(fbtab_shortcode($atts, $content));

  13. Not sure if code tags work here.  Lemme try…

    // return fbtab_shortcode($atts, $content);<br>

    Change to

    <br>return do_shortcode(fbtab_shortcode($atts, $content));
  14. I remember you should a visual example of querying some posts in an fb tab and you had some css and a background image, how did you accomplish this?

    thanks in advance

  15. Jason, I’m sorry I have been slow to reply. Didn’t see your comment when it first came in. You’re correct that my code needed to include a call to do_shortcode for nested shortcodes to work correctly. When I went back and re-read the documentation in the Codex more carefully, I saw that is stated there. I’m putting out a version 2.8 release that corrects this error.

  16. You can do this by specifying a background image on body in your CSS (will only  be applied to the body of the iFrame content) in combination with setting the background for the content area to a solid color, like white.

    For the Clips page at http://www.facebook.com/carrcomm I’m actually picking up a background image from the theme on my website and then setting the content area styling using the CSS box in the edit Facebook Tab screen:

    #content {margin-left: 10px;margin-right: 15px;padding: 5px;background-color: #DDD;}

  17. Hi David,

    I’m trying to insert a slider with a plugin called “slider pro” into my FB tab but I’m having an issue getting it to install.

    This is the shortcode that my slider generates:
    [slider_pro id=”3″]Depending on the “advanced settings” the best I can achieve right now is that all my slides will appear at once as a series of separate images.  Any thoughts would be greatly appreciated.  Best, David

  18. Without trying the plugin I can only guess that it might be depending on some JavaScript to be output by wp_head. So you might have to turn on the option to let FB Tab Manager execute the wp_head actions and then see if you need to selectively deactivate any that cause problems.

    First, you might view a page including the slider widget on your website with the regular website theme and do a view source to see if there are any javascript or css files being referenced from the slider pro plugin folder. That would help you see if my guess is on target before you waste time going down the wrong path.

    Good luck, and let me know if you figure it out.

Leave a Reply