Themes and Templates for Facebook Tab Manager for WordPress

Starting with version 2.8.7, Facebook Tab Manager for WordPress has a new model for supporting custom themes and templates. This means you can modify the default theme distributed with Facebook Tab Manager or create your own theme, just as you would for a WordPress website. That way, you can develop a theme with your own custom CSS, template, and template functions independently of the plugin.

At least, that’s the plan. If it doesn’t work as promised, be sure to let me know.

There are some special considerations for how a theme has to be constructed to work with Facebook Tab Manager, outlined below.

The plugin ships with a built-in theme in the fbtab-theme subdirectory, and the theme files will be served from there immediately after plugin installation. Using this built-in theme remains the plugin’s default behavior. However, there is now an option on the Settings screen that lets you specify a WordPress theme (installed, like every other theme, in your wp-content/themes directory) that should be used to display content on Facebook. This setting is independent of setting the default theme to be used when someone views your website.

Even if you do not plan to customize, I suggest you copy the fbtab-theme folder to your wp-content/themes directory and activate it through the Settings screen. You may get better performance because this allows WordPress to serve Facebook Tab Manager posts just like any other posts and avoids some of the hacks I use to short-circuit the normal theme selection / page generation process.

The default theme is just two files: index.php and style.css. I don’t break out header.php, footer.php as is customary in WordPress themes but you can do so if you wish to, or add other elements such as functions.php, or custom templates to be used with specific posts.

Here is what this looks like with the files copied to my themes directory and a custom template added:

fbtab theme with custom template

I can now go into my settings screen and select this theme from the list of all my installed themes. If you create your own theme, it will appear on this same list.

Setting the FBTab theme

There are a few peculiarities to note that make a theme for use with Facebook Tab Manager different from a regular theme.

  • The function fbtab_template_setup() must be called at the top of the file to implement the functionality of limiting what actions and filter functions will be executed on your content in a Facebook context.
  • The default template detects whether it is being run in the plugins directory before deciding where to fetch the associated style.css file. You can eliminate this hack for your own themes.
  • The function fbtab_head() must be included in the <head> section to output any custom CSS specified on the editing screen. It also determines whether to run the wp_head function, based on your selections.
  • There’s also an fbtab_footer() function included just before the closing </body> tag that outputs your resizing code, if specified.

Otherwise, you should be able to use all the same template tags and loop structures you would in any other theme template.

[Update: As of version 3.3.4, released December 2012, Facebook Tab Manager should work with more standard WordPress themes. This means you can omit the fbtab_head and fbtab_footer calls mentioned here in favor of the standard wp_head and wp_footer and you need not include a call to fbtab_template_setup(). If you use this approach, the checkmark options for calling header and footer code become irrelevant -- they will be called, regardless, if included in your theme -- but you may still need to tweak filters and actions to prevent the output of code that would be inappropriate in a Facebook tab. If you do start with a standard theme, you may also have to edit or configure it to prevent the appearance of navigation or other elements that don't make sense in a Facebook tab.]

Custom Templates

You can also create custom templates, similar to the custom templates for WordPress pages. Use your theme to define the default look you want for all of your Facebook tabs. Use a custom template if you want to use different styles or structures for selected Facebook Tab Manager posts.

A custom template is a file included with your theme that includes a simple header at the top of the file like this:

Custom Template

When you create or edit a post, you can then specify that this template should be used instead of index.php.

Setting an alternate template

Your custom template can reference different HTML, use a different variation on the WordPress Loop, or include just about any other custom code.

Another way of doing this, if you only want to use the template with a single post is to give it a name like fbtab-121.php where 121 is the fbtab post ID or fbtab-mystory.php where “mystory” is the pagename or slug for the post. WordPress will check for these variations and use them if found. Otherwise, it uses index.php.

Try it, and let me know how it works. If you discover changes to the CSS or other improvements that should be added to the default theme, please share them with me.

  • Peo Lekare

    I have a template that is too wide to use in an FB tab, fortunately, the template has another stylesheet that is ipad-compatible, and that layout fits perfectly in the 810px of a FB tab. Is it possible to use this plugin to choose that style automatically when one opens the FB tab?

    • http://www.carrcommunications.com David F. Carr

      That should work, yes. Try it and let me know!

    • http://www.carrcommunications.com David F. Carr

       Yes, this should be possible. You might try using the Theme Test Drive plugin to access the any administrative configurations that need to be set for the theme (without disrupting the look of your main website). As long as those options are saved, they should be used in the FB tab context.

  • Alejandro

    Hello,

    Thank you very much for this awesome plugin.

    Please I am trying to use my own wordpress theme and template on a facebook tab.

    When I put this line “fbtab_template_setup()” at my theme´s functions.php file, it breaks the site showing this error “Error HTTP 500 (Internal Server Error):” 

  • Alejandro

    It seems the problem is that I am using Genesis Framework and need to apply a child theme. When I try using twenty eleven theme everything is ok.

    So please, is there a way to use a child theme on the genesis framework?

    Thank you very much 

    • http://www.carrcommunications.com David F. Carr

      With the latest release, it should be possible to use a standard WordPress theme with only cosmetic modifications (for example, to omit or modify navigation links you don’t want displayed within the tab). The need for some of the modifications described in this post has gone away, including the need to call fbtab_template_setup().

      However, I have not done any testing with child themes and am not sure how well they will work with the plugin. You’ll have to experiment with it and let me know.

      • Alejandro

        Ok, now I am not doing any modifications (like fbtab_template_setup())

        The plugin does not work with child themes. As you know the Genesis Framework is a theme ilself. When I select Genesis theme it works. But when I select the child theme it does not.

        It is logical as the child theme can not work without the genesis framework.

        I suppose the plugin have to work the same way as wordpress with child themes. I mean, it needs the genesis framework installed but not active, only the child theme is active.

        Do you think it is possible in any way at this moment or you would have to tweak the plugin?

        Thanks a lot,

        Alejandro