Archive for the ‘News’ Category.

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.

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.

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:

  • Microsoft Smartphones Drop Nokia Name October 25, 2014
    Microsoft is finally ready to sell smartphones under its own brand -- but where are the flagship models?
    Michael Endler
  • Facebook Rooms: 5 Privacy Facts October 25, 2014
    Facebook's new Rooms app lets you post pictures, videos, and messages anonymously. Here's a look at the data it collects, the privacy of your posts, and more.
    Kristin Burnham
  • Samsung Knox Is Weak, Researcher Says October 24, 2014
    Samsung's Knox security software for Android devices handles passwords in a way that undermines encryption, an anonymous researcher says.
    Thomas Claburn
  • DeSalvo Joins HHS In Fight Against Ebola October 24, 2014
    Dept. of Health and Human Services taps ONC's Dr. Karen DeSalvo to help address Ebola and other public health concerns.
    Alison Diana
  • Facebook Rooms App Allows Any Identity October 24, 2014
    An email address is all that's required to create a user account. Hello, retro chatrooms?
    Thomas Claburn
  • Amazon Moves Into Germany October 24, 2014
    On the heels of a losing third quarter, AWS opens a new data center in Frankfurt, Germany -- and the global stakes are high.
    Charles Babcock
  • This Week In 60 Seconds: Crypto Outcry, Compliance & More October 24, 2014
    Hot stories this week include saying 'No' to crypto backdoors for law enforcement, new roles for IT on Wall Street, and more.
    Andrew Conry Murray
  • Google Inbox Won't Fix CYA October 24, 2014
    Google Inbox: Because, if we use yet another tool, people won't BLANKET THE PLANET WITH CYA EMAIL.
    Grumpy IT Guy
  • SAP Unleashes Major Hana Upgrade October 24, 2014
    SAP Hana Service Pack 9 adds multi-tenancy, data tiering, and streaming analysis, while answering a longstanding cost complaint.
    Doug Henschen
  • Google Enhances Android Wear October 24, 2014
    Google's first major update to its Android Wear platform helps devices rely less on smartphones.
    Eric Zeman