Facebook Tab Manager Updated

A tab for listing recent blog posts.

An update for Facebook Tab Manager is out, version 3.6.2, verified for compatibility with WordPress 4.8 and factoring out legacy features related to the “like gate” functionality Facebook no longer supports (showing different content depending on whether someone has liked the surrounding page).

The plugin remains a handy solution for using content pulled from a WordPress site within the context of a Facebook page. I’ve used it in combination with plugins such as Contact Form 7 and my own RSVPMaker to display registration forms, for example. Or you might simply want to use the WordPress editing tools to update a page of content that will appear on Facebook.

Here’s a fresh example showing blog posts related to my WordPress for Toastmasters project:

https://www.facebook.com/TabManagerDemo/app/2014427805475157/

There are no particular new and improved features, but I wanted to get rid of that “This plugin hasn’t been updated … ” message on WordPress.org. This also gave me an excuse to step through the process of registering a new tab. The process is essentially the same, but the layout of the screens on Facebook’s developer site has changed somewhat.

Here’s an overview:

Create an App

 

Select a platform: Page Tab

 

Add the url for your tab and a page tab image

Copy the App ID

 

The basic process is still:

  • Create your page tab content in WordPress
  • Register the URL on Facebook’s Developer website
  • Plug the App ID into the WordPress editing screen for your page tab.
  • Follow the Add to Page link to associate the tab with a specific page

At this point, your custom tab will be added to the bottom of the list of all your page tabs (navigation links) including the default ones from Facebook. Go into the Settings screen for your page, then Edit Page to rearrange the tabs via drag-and-drop.

Edit Page: change the order of tabs

Blog Listing Example

For the blog listing page tab, I used the fbtab shortcode with the query parameter set to “posts_per_page=15″ (could also be narrowed to a category using something like query=”category_name=facebook-tab-manager”). See the documentation for the query_posts function for other possible values.

The tab editor in WordPress also allows you to add some custom CSS. To create a background color and a little padding, I added

body {background-color: #626eba;}
div#content {background-color: #fff; margin: 20px; padding: 20px;}
.jp-relatedposts-headline {display: none;};

Update: I added the reference to .jp-relatedposts-headline because that was the only way I could find to eliminate the JetPack related posts headline from appearing at the bottom of the listing.

I also checked the options to

  • Open Links / Post Forms to New Window
  • Set resize/autoresize (for tabs taller than 800 pixels)
  • Remove all but essential filters on post content