Creating and Registering a Facebook Page Tab

This is an update on the process of creating and registering a page tab, using the latest edition of the Facebook Developers website, which has recently been updated. The process has changed several times in the last couple of years, so this post also serves to pull together some scattered documentation I’d created on the process.

I’ve boiled it down to a 6-step process.

  1. Create your Facebook tab post in Facebook Tab Manager. This should feel a lot like creating a blog post, with some additional options for modifying default WordPress behavior to make your app fit into the Facebook environment. (See: Creating a Basic Page Tab). Once you have saved your post, the parameters you need to provide when registering your Facebook tab will be listed at the bottom of the editor screen in WordPress.

    screenshot-2

    Parameters for registering your Facebook tab

  2. Create a New App in the Facebook Developers utility.

    screenshot-3

    Create a New App option on Facebook.

  3. Go to the Settings tab in the developers’ tool and click Add Platform. From the list of target platforms that pops up, pick Page Tab.

    Click the Add Platform button

    Click the Add Platform button

  4. Provide a name for the tab and copy-and-paste in the url paramaters obtained from Facebook Tab Manager. You can upload an icon to be associated with your page tab. The Settings screen also includes the App ID that you must copy-and-paste back into Facebook Tab Manager.

    New Facebook App Setup Screen.

    New Facebook App Setup Screen.

  5. Your app will initially be in “sandbox mode” (visible only to you). Go to the Status & Review screen in the Facebook developers app and toggle the button for making your app live from No to Yes. Confirm that you really want to make it live. You should be able to ignore the Submit Items for Approval option unless you’ve done something particularly fancy, beyond the functions Facebook Tab Manager itself provides.

    Activate your app, which is initially in "sandbox mode"

    Activate your app, which is initially in “sandbox mode”

  6. Once you have recorded the App ID provided by Facebook in Facebook Tab Manager you will see an Add to Page link appear within the Facebook Tab Manager user interface. Clicking that link will now take you to a screen on the Facebook website where you will be able to specify a page you want the tab added to.

    Add app to a specific page.

    Add app to a specific page.

Setting Up a Page Tab on the New FB Developer Tool

Got a report that something was broken with the new the plugin not working with the latest FB API and tool updates for developers, so I created and registered this quick-and-dirty tab to show that it does still work.

The Facebook setup screens have definitely changed, but the changes appear to be mostly cosmetic. From the app setup screen I had to click Add Platform. One of the choices on the popup screen is Page Tab.

Facebook-Add-Platform

Select Page Tab, and then fill in the parameters as below (click to see larger):

New Facebook App Setup Screen.

New Facebook App Setup Screen.

The other thing I had to remind myself to do was go to the Status & Review tab of the UI to click the YES I want to make this live button to take the tab out of “sandbox mode.” It should not be necessary to click the other button for submitting the app for approval – Facebook Tab Manager doesn’t use any of the fancier FB APIs.

Facebook Tab Manager 3.4: Support for Child Themes

Facebook Tab Manager allows you to designate a WordPress theme to be used for fbtab posts that is different from the theme used on your regular website. The default theme used with the plugin is plain vanilla, with simple text styles modeled on Facebook defaults. You can substitute another theme that displays well within the width of a Facebook Tab – some people have told me they use themes designed for display on the iPad, for example. Or you might simply choose one that does a good job of using responsive design to reflow elements for the available space.

One limitation has been that the selection of a theme didn’t work properly with child themes. I’m sorry it took so long for me to address this issue, but I think this is fixed in version 3.4. Try it and let me know.

One advantage of child theme support is this would allow you to create a child theme based on another WordPress theme that includes features you want to include on your Facebook page tab, altering it just enough to remove unwanted navigation and layout elements.

One remaining issue is that if you want to use a Theme that has a lot of configuration options, I don’t have a good way of making those accessible in the admin panel without causing conflicts with the current active theme for your website. So it’s generally better to choose (or create) relatively simple themes or child themes for use in a Facebook tab context.

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

 

Page Tab Resize Code Updated in Facebook Tab Manager 3.3

The latest release of Facebook Tab Manager alters the JavaScript code generated to resize page tabs. I’ve been getting intermittent reports of users tabs not resizing correctly for the last few weeks, apparently because Facebook is phasing out support for the code I have been using.

The new version makes it necessary to specify the App ID assigned by Facebook as part of the object initialization process in JavaScript. That means you must either record the App ID in Facebook Tab Manager or pass that ID as part of the URL you register with Facebook (?appid=123456789).

The code that is generated looks like this:


<script type="text/javascript" src="<a target="_blank" href="https://connect.facebook.net/en_US/all.js">https://connect.facebook.net/en_US/all.js</a>"></script> <script type="text/javascript" charset="utf-8">
FB.init({
appId : '[APP ID HERE]',
channelUrl : 'https://www.carrcommunications.com/wp-content/plugins/facebook-tab-manager/channel.php',
status : true,
cookie : true,
xfbml : true
});
window.onload = function() {
FB.Canvas.setAutoGrow();
}
</script>

The channelUrl parameter will point to a file on your own domain. This supposedly solves some cross-domain scripting issues with browsers.

Recording the App ID in Facebook is now part of the routine process of adding your tab to a specific page.

For existing tabs and reveal tabs, it may be easier to pass the information about the app ID to Facebook Tab Manager through a query string. For example, if you have a reveal tab registered as http://www.example.com/fbtab/?fbreveal=1142-1415&resize=1 you can add appid= to the end as in http://www.example.com/fbtab/?fbreveal=1142-1415&resize=1&appid=1234586

The Reveal Tab Setup utility will now insert that parameter into the string when you record the app ID there, but if you’re trying to retrofit existing content, it may be easier to make the change in the developer tool. That’s where you’ll have to go to look up the app ID anyway.

Note: I am still seeing some issues with this code not working in Firefox.

The 3.3.1 update tweaks the code for compatibility with Firefox.

Facebook Tab Manager Update for Timeline Pages

The 3.2 release of Facebook Tab Manager for WordPress adds support for the Timeline for Pages 810-pixel-wide tab layout introduced at the beginning of March. I had previously published some workarounds but this is the first update to bake support for the new tab layout into the plugin.

There is now a Tab Layout dropdown menu under options. For existing tabs, it defaults to the 520-pixel layout. For new tabs, it defaults to 810 pixels. Facebook Tab Manager sets this width on the HTML <body> tag for your tab content to prevent it from overflowing the width of the iFrame that contains it and causing scroll bars to appear.

Layout option

When you record the parameters for your app in Facebook, you must also specify the 810-pixel width there. The new tabs (which Facebook now also refers to as “page apps”) also seem to require you to record the canvas URL parameters under “App on Facebook” in addition to the tab url parameters under “Page Tab.”

Facebook developer utility

You should also take the time to edit the large icon associated with your app, which will be used as the source for the image used to advertise your tab on the Timeline.

The larger icon must be set

You can see the results here. You can run this test yourself by creating a fbtab post containing the shortcode [fbtab_width_test]. Note that the border of the 810-pixel width box is clipped off because it’s right at the limits of the body width.

 

How Timeline for Facebook Pages Impacts Page Tabs

Note: portions of this post (minus the details specific to Facebook Tab Manager) were published as a report for Information Week’s The BrainYard.

Facebook has just officially announced Timeline for Facebook Pages, giving developers and designers 30 days to make adjustments before the change becomes mandatory.

Having recently been tinkering with The BrainYard page at https://www.facebook.com/thebyard, trying to build it into the community resource it ought to be for readers, I took the jump and activated the new Timeline today, after scrambling to make some quick changes. Although existing page tabs will display under the new layout, they are displayed differently, and there are several design and setup changes to be made.

Timeline for Pages looks great in the video Facebook released celebrating the change, and on some of the pages whose designers got an early heads-up such as those for The New York Times, Lance Armstrong’s Livestrong organization, and the NBC’s Today Show. However, the Facebook Developers discussion thread on the changes is filled with more complaints than praise.

One of the ways Facebook Page owners used to entice people to click the Like button on their pages was by defining a default page tab, usually displaying an image and message urging people to like the page in order to get access to subscribers-only content. After the visitor clicked the button, the page would refresh, displaying that special content.

With the new design, those welcome pages are no longer supported.

You can still set a tab to show different content to people who have and have not liked a page. However, if they click the like button, the page does not automatically refresh to show the fan content. There is a bug report that’s been filed on this. , but I’m not sure Facebook will acknowledge this as a bug or if it’s how they want things to work now. Or maybe it will emerge that there’s some bit of JavaScript you can add to your page to get the refresh-on-like behavior. No one seems to have the answer on this yet. Update March 2, 2pm ET: FB developer relations now says: “This is a bug and the fix should be in soon. Thanks for your patience!” So it wasn’t intentional after all, or if so they changed their minds.

Adjusting to the new design requires some other changes.

Here is how the BrainYard page looked pre-Timeline:

The BrainYard page pre-Timeline

And after I initially turned on the preview:

The BrainYard Page with Timeline layout

Note that the menu of tabs on the left hand side of the page is gone. Instead, tabs are represented by the row of four icons at the top of the page. Photos is always shown as the first icon, but you can rearrange or select the others.

Note that I now have a generic icon for the BrainYard Stories tab, where before I had a small image of the colored ball icon used in our logo next to the tab. Fixing this required adding a larger image (which previously only used to be used for content displayed as an “app” rather than as a tab).

For example, the screen shot below is from a custom tab I registered to display clips of my work. Note that the small scissors icon is set, but the larger one isn’t – until now, it didn’t need to be.

The larger icon must be set

IMPORTANT: Another thing you will need to set through the developers utility — which didn’t necessarily used to be important, but now is — would be the urls for the app or canvas display of your content. When I first turned on the Timeline preview for the BrainYard page, which included a tab for which I hadn’t provided the parameters, the tab did not display when I clicked on the icon for it. Then, when I tried to turn off Timeline preview, I found that the tab was no longer displayed on the menu in the old layout. Adding the canvas url parameters on the form and saving my app again cleared up that problem.

There is some history here. When Facebook introduced the current iframe-based incarnation of page tabs, you were always required to specify the url for the app canvas first because the tab content was registered as if it were a file or a directory beneath the level of the canvas. So the url to your tab content had to be something like site.com/fbtab/canvas/tab/. A few months later, the app registration tool was redesigned to allow the app and the tab to be defined as two independent urls.

Facebook Tab Manager was designed to support the same content being displayed as either an app or a tab, and the instructions displayed in WordPress always provide the parameters for registering an app canvas version. However, I personally have gotten out of the habit of entering those parameters when I’m not specifically planning to display the content as anything other than a tab. It just wasn’t important. Now, it is.

Here is what that custom tab for displaying a list of headlines looked like, pre-Timeline:

A custom tab in the old layout

Here is what it looked like after activating Timeline, before making any other changes:

Existing tab in the new layout

Note that must of the wrap-around Facebook content is gone, leaving the app floating centered in the middle of the page with a lot of white space all around. Facebook tabs used to be limited to a 520-pixel width, but now they can be displayed as wide as 810 pixels. Designers will probably welcome having more room for larger images and other custom content, but initially the transition could be awkward.

The technology Facebook uses to embed apps and page tabs is the HTML iframe, a technique for embedding one web page inside another. Apps and page tabs are registered using a developer tool on the Facebook website where the developer records the urls of the web pages that will be referenced. When a Facebook user navigates to a tab, the website generates an iframe to contain the content from that external application.

There is now a radio button setting in the app registration tool that lets you toggle between the 520 and 810-pixel widths for the iFrame. Initially, your tab will still be displayed within a 520-pixel wide iframe, with that frame centered on the page. Here is the same tab in the 810-pixel layout.

A custom tab with initial CSS tweaks

Because Facebook Tab Manager sets a width on the body element to prevent scroll bars from being displayed, I had to override the default css by adding this code in the CSS styles field of the Facebook Tab Manager post editor.

body { width: 810px;}

Update 3/17/2012: Wider tabs are supported without this workaround in version 3.2.

Here is what my initial redesign of this Facebook page came out, with the tab icon fixed and a cover image added.

Initial redesign

This could still use some love from a professional designer, but it’s workable for now.

References:

Facebook Tab Manager Ranks #5 on WordPress Aisle List

Facebook Tab Manager came in at #5 on WordPress Aisle’s list of the 20 Best WordPress Facebook Plugins for WP Websites. Looks like a pretty good list. Tab Manager comes in behind some of the plugins for promoting your blog through Facebook.

mstore.de

https://www.facebook.com/mstore.de

This page for a computer services / computer store business in Hamburg, Germany uses Facebook Tab Manager for this promotional welcome screen and several other page tabs.

mstore.de

mstore.de on Facebook

From the creator: Julian Hutabarat The Newsletter tab is the most complex tab so far. I embedded the subscription form via the “Post Snippets” plugin to prevent possible conversion errors by WP. I will let you know, when I’ll build more advanced tabs and fan gate tabs.

 

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.