Creating a Basic Page Tab with Facebook Tab Manager for WordPress

The basic idea behind Facebook Tab Manager for WordPress is to make it relatively easy to create and edit content to be displayed as a tab on a Facebook business page. You can take advantage of a number of fancier features, such as posts or blocks of content within posts that will only be displayed to people who have clicked the Like button on your page. This tutorial concentrates on the basics.

I’m going to walk through how I created a tab for the Carr Communications Facebook page.

Facebook allows businesses, political campaigns, organizations, celebrities, and other entities trying to attract a big audience to create a Facebook page (see this tutorial if you need help with the basics of creating a page). A page can include any number of tabs (the navigation links displayed on the left hand side of the page) in addition to built-in features such as the Wall. Custom tabs can serve as landing pages for new visitors, or people driven to your page by an advertisement. They can include content or application functionality, such as contact forms or interactive product catalogs.

Here, I’m focusing on how you would display content created within WordPress (text, images, maybe an embedded video) on a Facebook page tab.

Creating a Facebook Tab post

Once you have Facebook Tab Manager installed, you will see a new Facebook Tabs menu in the WordPress administration system. You can click the link to “Add New” and create content for the Facebook tab much the same way you would create a blog post. Here is the content for this sample tab in the WordPress editor:

Facebook Tab Manager editor

Below the content editing window, you will see a number of configuration options. If you are creating relatively basic post, you can ignore many of those options. However, two checkboxes you might want to consider checking are “Open Links / Post Forms to a New Window” and “Hide post title, only show post content words / images.”

If you are linking to external content, you probably want it to be opened in a new window (not inside the frame of your Facebook page). The exception would be if you wanted to link between related posts created with Facebook Tab Manager.

Also, displaying the title of your post is often redundant because Facebook also displays a title for your page tab.

Once you save your post, you can preview it on your own website:

Preview

Registering your “app” on Facebook.

In Facebook, terminology you will be creating your own “app” that pulls in content from your website and displays it within an iFrame on Facebook.

See this February 2014 post on Creating and Registering a Facebook Page Tab for the most up-to-date information on the process.

What’s the Payoff?

Although setting up a tab with Facebook Tab Manager is a multi-step process, the long-term advantages come from being able to update your content using the WordPress editor. On the other hand, if your content is relatively static, you may want to consider using a Facebook app such as TabPress or Static HTML iFrames.

Other benefits of Facebook Tab Manager come into play if you use some of its more advanced features, described in other posts on this site.

Tweaks and Enhancements

By default, Facebook Tab Manager displays your content in a simple template with a white background and small fonts. The Cascading Style Sheets code is based on Facebook’s own CSS for font faces and sizes.

You can override the defaults by entering your own CSS code in the “CSS Styles” section of the editing screen. For example, to make the default paragraph font bigger, you could enter p {font-size: 14px;} in that box.

Another thing you may need to tweak is the default WordPress output, which in some cases may not be appropriate for display on Facebook. For example, if you have installed one of those plugins that adds a bunch of social sharing icons to the bottom of each blog post, you may also that those icons appear on your Facebook tab posts. To prevent that from happening, you can click the Show Advanced button in the Options section of the Facebook tab editor. This will display additional checkbox options.

In WordPress, functions that alter the content of a post are known as filters on “the_content.” Facebook Tab Manager allows you to selectively turn off these filters by checking the boxes for specific filter functions. This may take some guesswork and trial and error, but with any luck the function name will include the name of the plugin. For example, I would check the box labeled “sociable_display_hook” to eliminate the display of social media links generated by the Sociable plugin.