Video: Create a Welcome Page with Facebook Tab Manager for WordPress

One of the recent posts on the WordPress.org support forum was from someone asking for a better tutorial on the process for creating a “reveal tab” or “gate tab” that displays a different message to newcomers, enticing them to click that Like button so they can access whatever special content you make available for page fans only. In the process of thinking about how to explain it, I realized it would help if I tried to simplify the process with a little redesign of the software. That’s part of the story behind version 3.1, which reworks the “Reveal Tab Setup” utility to make it easier to record a Facebook App ID associated with your content.

The video below walks you through the process. It ends abruptly because I recorded it using Jing (the poor man’s Camtasia, limited to 5 minutes). Still, I think it covers the essentials, ending right as I show how to register a Reveal Tab URL in Facebook, record the App ID provided by Facebook in WordPress, and then follow the Add to Page link that allows you to add this tab to a specific Facebook page for your business or organization.

This video can also be viewed at http://www.screencast.com/t/7UsV5XryV

Unable to display content. Adobe Flash is required.

Facebook Tab Manager 3.03 – Simplifying “Add to Page,” Adding Custom Capabilities

With the release of Facebook Tab Manager 3.0, I introduced a more flexible scheme for assigning user editing capabilities. A couple of bug fixes later, we’re now at 3.03, which also puts the the Add to Page link (for adding your tabs to one or more page) to the overview screen that shows all the tabs available for posting. If you haven’t recorded the required App ID # Facebook assigns, you will instead see a link back to the editor, prompting you to enter that information.

Add to Page / Sett App ID links

I’m doing my best to make this as convenient as possible.

Setting Editing Capabilities

Previously, I made the assumption that Facebook tab content (fbtabs) should be treated like pages, rather than posts, meaning that you had to be an editor or administrator to create or edit them. At least one user contacted me to say he also wanted authors to have access. So now there is a checkbox on the Settings screen asking if you want authors and contributors to have the same sort of rights to create and edit fbtabs as they would for posts.

It’s also possible for website owners to assign their own custom capabilities / permissions schemes, either using custom PHP code or a plugin such as Members or Role Scoper. For example, you could expand the fbtab editing capabilities of an author (one of the standard WordPress roles), or create a custom role such as “Facebook Tab Editor” with the capabilities you assign. For example, someone with this role might have full rights to edit fbtab content but not have access to the editor for pages.

The relevant roles are:

  • delete_fbtabs
  • edit_fbtabs
  • edit_published_fbtabs
  • publish_fbtabs
  • delete_others_fbtabs
  • edit_others_fbtabs
  • edit_private_fbtabs
  • read_private_fbtabs

Other capabilities might have to be set for a custom role — for example, the “upload_files” capability applies across pages, posts, custom post types, and the media tab on the site administration screens. The WordPress.org site offers more details on the Roles and Capabilities scheme. Took me a while to wrap my head around it, I confess.

Incorporating RSS Feeds

Activate the “WordPress RSS shortcode” to include headlines from an RSS feed. This works the same as it would in a WordPress post or page.

Example:

[rsstag url=”http://www.informationweek.com/thebrainyard/rss/” show_summary=1 show_date=1 show_author=1]

Renders as:

[rsstag url=”http://www.informationweek.com/thebrainyard/rss/” show_summary=1 show_date=1 show_author=1]

TabMgr.com Or Facebook Tab Manager On Your Own Site: Which Is Right For You?

A TabMgr.com subscription promises to be simpler for some users who do not currently have SSL configured on their own websites. Here are the trade-offs.

Choose Facebook Tab Manager on your own site if …

  • You want the convenience of editing web and blog content, as well as Facebook tabs on your own dashboard.
  • You will be taking advantage of the tab manager shortcodes for listing WordPress blog content headlines or articles within a tab.
  • You have other reasons for wanting to SSL-secure your website.

Choose TabMgr.com if …

  • You want a simple way of creating and Facebook page tabs, or landing pages, using WordPress editing tools.
  • You want to avoid conflicts with other plugins or theme-related functions unrelated to your Facebook content.
  • Upgrading your self-hosted website to support SSL is more trouble than it is worth to you.

New “Add to Page” method in Facebook Tab Manager 2.9.6

Download the latest version of Facebook Tab Manager for a smoother experiencing adding your tabs to one or more Facebook pages.

Facebook’s decision to eliminate the automatically created profile pages for apps invalidates the instructions I previously supplied, which relied on clicking an “Add to Page” link on the profile page for your app. Hard to do that if the app profile page isn’t there!

Instead, Facebook is providing new instructions for apps to add tabs to pages. I’ve tried to simplify this process by modifying the documentation and tools displayed within the editor for Facebook Tab Manager. If you record the App ID provided by Facebook, Facebook Tab Manager will now display its own Add to Page link.

Look for the App ID field under the “Install This as a Facebook Tab” section of the documentation.

Record the App ID here

Then click the Add to Page link that will be displayed …

Add to Page link

And you will get the dialog for adding the tab associated with that App ID to one or more pages.

Update 12/20/2011: There is now an Add to Page admin screen in Facebook Tab Manager (version 2.9.7) that allows you to register the App IDs associated with a reveal tab URL or another custom URL (for example, re-purposing an existing page or blog post with the ?fb=tab query string).

The utility creates a link in the format:

https://www.facebook.com/dialog/pagetab?app_id=APP_ID_GOES_HERE&redirect_uri=https%3A%2F%2Fwww.facebook.com

 

Important Facebook Platform Change

See the updated explanation of how this problem has been addressed.

The procedure for adding a tab to a specific Facebook page has changed, following Facebook’s decision to eliminate the automatically created profile pages for apps. That means the “Add to Page” button you used to find on platform pages has vanished, too.

Instead, you need to access a URL in the following format.

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

The App ID would be a numeric code you get from the Facebook developers utility. The URL would be the target for your iFrame, such as http://www.domain.com/fbtab/my_tab/

I will work on changes to Facebook Tab Manager to make this easier, to the extent I can, but I just found out about this.

Update: This change is addressed in the latest update to Facebook Tab Manager.

Reveal Tab Setup Utility for Facebook Tab Manager

One of the things Facebook Tab Manager is used for is to create “reveal tabs” or “gate tabs” where the user has to “Like” the page before they can see some exclusive content. The super-special content serves as the attraction to build your base of “likes” or “fans” – subscribers to your updates.

The plugin supports two methods, using shortcodes or the Reveal Tab Setup utility described here.

The advantage of the Reveal Tab Setup method is you don’t have to clutter your posts with code. You create two clean posts, and designate one to be viewed by page fans and another to be shown to newcomers. The URL you register with Facebook uses a query string in the format ?fbreveal=100-200 where 100 is the ID of a post to be shown to the new people and 200 is the post for fans.

The Reveal Tab Setup utility helps you construct this URL, which can also include a number of other options such as specifying that links should be opened in a new window. In addition to Facebook tabs, the utility lets you select existing blog posts and page tabs, which will be displayed in the Facebook template rather than your website’s default template.

Reveal Tab Setup Utility

One potential advantage of this approach is performance. Instead of loading a base post and then looking up additional content based on shortcode parameters, this method avoids some of the default WordPress processing and cuts straight to loading the fan or non-fan content (translation for programmers: the action for detecting a URL in this format is called on “init” before most of the normal database queries run).

When you select a Facebook Tab posts to include, it will be displayed with the filter options you specified in the Options panel of the post. If you select an ordinary page or post, use the checkbox options specified here to set broad options. Selecting “Minimize the_content filters” specifies that only a minimum set of WordPress options should be executed on the main content of the post (preventing effects intended for regular WordPress posts, such as the output of social media sharing icons).

By default, the reveal tab effect uses a preloader animation effect. This works well for most content, but may not work with some posts featuring inline JavaScript. Check “Use redirect instead of AJAX / loading animation” to use a redirect instead.

Facebook Tab Manager Webinar: Thursday, September 15, 11 am ET

I will host a webinar on the use of Facebook Tab Manager and answer questions on Thursday, September, 15 2011 at 11:00 AM to 12:00 PM (Eastern Time).

I did this once before in April, and people seemed to find it valuable. A few things have changed in recent months, so I’ll try to cover both the things that are new and some of the basics.

Sign up here:

http://www.anymeeting.com/davidfcarr

Topic: This is a tutorial and Q&A session on the Facebook Tab Manager plugin for WordPress. I will cover the basic setup and use of the plugin, plus some advanced features introduced in the last few months. Facebook Tab Manager for WordPress has been downloaded more than 33,000 times since it was released in February and has a nearly perfect 5-Star rating from its users. It allows you to create and edit content to displayed on Facebook using the WordPress editing tools. You can also display existing WordPress content within the Facebook template provided with the plugin – either whole posts, or lists of headlines linking to your site.

Showcase: Nu Skool Solutions

Hello we are nuskoolsolutions.com. We have created over 50 tabs using this wonderful plugin. Our Faceook page is http://www.facebook.com/Nuskoolsolutions. We are able to do multi-navigation and e-commerce (paypal buttons) with this plug-in. Pretty much anything you can imagine you can do with this plug-in. Feel free to click on the image to see the landing tab on Facebook.

Showcase: Mapping Organic Farms

Fabio Correa: I created a nice feature to my page that allows my users to find Farmer Markets where they live. It leverages Bing Maps and Facebook Tab Manager. Check it out at https://www.facebook.com/ILikeItOrganic?sk=app_251320301545627

Search Farmers Markets