Archive for the ‘Tutorial’ Category.

Facebook Tab Manager for WordPress Video Tutorial

Facebook Tab Manager is a plugin for WordPress that allows you to create content and simple applications that will be displayed as tabs on your Facebook page.

Creating this tutorial video has been on my to-do list for a while. I thought it would be useful to be able to refer to this demo when explaining how the plugin is intended for work, particularly when helping troubleshoot problems for those who can’t quite get it to work for whatever reason. Some of the details are complicated, partly because I’ve had to keep pace with changes in the development environment that Facebook provides. However, the basic idea is simple — letting WordPress users take advantage of the familiar and very capable WordPress editor and the associated plugins when composing and updating content to appear on Facebook.

Thank you to TechSmith for providing me with a complementary copy of Camtasia Studio, which I used to produce this video. I haven’t had occasion to write much about them in my role as a tech journalist, but I’ll happily give them a plug here.

A note on finishing touches

Some of the demo content I used for this video was less than perfectly polished (i.e., sloppy) in that I hadn’t prepared images to represent all my tabs. Here are some “do as I say, not as I do” details.

For best results, you will want to create the image associated with your tab to the dimensions 111×74 pixels (Facebook will attempt to automatically resize images of other dimensions).

There are a couple of other icons you should supply to be thorough, square ones at 75×75 pixels and 16×16. The 16×16 one is somewhat important because it’s displayed on the navigational dropdown for moving from tab to tab. After producing this video, I belatedly supplied issues for some of the tabs but not for the Tall Tab.

Tab navigation icons

Tab navigation icons

When you don’t specify an image, Facebook uses a generic one that looks like a picture of an atom as its default tab / app icon. You probably don’t want your content to look quite that generic.

Live versions of the examples shown in the video can be found at https://www.facebook.com/TabManagerDemo

www.facebook.com/TabManagerDemo

www.facebook.com/TabManagerDemo

 

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.

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. Continue reading ‘Themes and Templates for Facebook Tab Manager for WordPress’ »