TabMgr - Facebook Tab Manager for WordPress http://tabmgr.com Use WordPress to Create and Edit Facebook Content - Documentation, Showcase and Hosting Sat, 14 Apr 2012 12:48:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Page Tab Resize Code Updated in Facebook Tab Manager 3.3 http://tabmgr.com/blog/2012/04/14/page-tab-resize-code-updated-in-facebook-tab-manager-3-3/ http://tabmgr.com/blog/2012/04/14/page-tab-resize-code-updated-in-facebook-tab-manager-3-3/#comments Sat, 14 Apr 2012 12:30:26 +0000 David F. Carr http://tabmgr.com/?p=142 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.

]]> http://tabmgr.com/blog/2012/04/14/page-tab-resize-code-updated-in-facebook-tab-manager-3-3/feed/ 1 Facebook Tab Manager Update for Timeline Pages http://tabmgr.com/blog/2012/03/17/facebook-tab-manager-update-for-timeline-pages/ http://tabmgr.com/blog/2012/03/17/facebook-tab-manager-update-for-timeline-pages/#comments Sat, 17 Mar 2012 14:32:28 +0000 David F. Carr http://tabmgr.com/?p=133 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.

 

]]> http://tabmgr.com/blog/2012/03/17/facebook-tab-manager-update-for-timeline-pages/feed/ 8 How Timeline for Facebook Pages Impacts Page Tabs http://tabmgr.com/blog/2012/02/29/how-timeline-for-pages-impacts-page-tabs/ http://tabmgr.com/blog/2012/02/29/how-timeline-for-pages-impacts-page-tabs/#comments Wed, 29 Feb 2012 17:38:43 +0000 David F. Carr http://tabmgr.com/?p=117 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:

]]> http://tabmgr.com/blog/2012/02/29/how-timeline-for-pages-impacts-page-tabs/feed/ 20 Facebook Tab Manager Ranks #5 on WordPress Aisle List http://tabmgr.com/blog/2012/02/29/facebook-tab-manager-ranks-5-on-wordpress-aisle-list/ http://tabmgr.com/blog/2012/02/29/facebook-tab-manager-ranks-5-on-wordpress-aisle-list/#comments Wed, 29 Feb 2012 13:27:55 +0000 David F. Carr http://tabmgr.com/?p=115 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.

]]> http://tabmgr.com/blog/2012/02/29/facebook-tab-manager-ranks-5-on-wordpress-aisle-list/feed/ 0 mstore.de http://tabmgr.com/blog/2012/02/29/mstore-de/ http://tabmgr.com/blog/2012/02/29/mstore-de/#comments Wed, 29 Feb 2012 02:40:23 +0000 David F. Carr http://tabmgr.com/?p=110 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.

 

]]> http://tabmgr.com/blog/2012/02/29/mstore-de/feed/ 0 Video: Create a Welcome Page with Facebook Tab Manager for WordPress http://tabmgr.com/blog/2012/02/27/video-create-a-welcome-page-with-facebook-tab-manager-for-wordpress/ http://tabmgr.com/blog/2012/02/27/video-create-a-welcome-page-with-facebook-tab-manager-for-wordpress/#comments Mon, 27 Feb 2012 01:02:25 +0000 David F. Carr http://tabmgr.com/?p=96 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.

]]> http://tabmgr.com/blog/2012/02/27/video-create-a-welcome-page-with-facebook-tab-manager-for-wordpress/feed/ 0 Facebook Tab Manager 3.03 – Simplifying “Add to Page,” Adding Custom Capabilities http://tabmgr.com/blog/2012/02/17/facebook-tab-manager-3-03/ http://tabmgr.com/blog/2012/02/17/facebook-tab-manager-3-03/#comments Fri, 17 Feb 2012 03:21:35 +0000 David F. Carr http://tabmgr.com/?p=91 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.

]]> http://tabmgr.com/blog/2012/02/17/facebook-tab-manager-3-03/feed/ 6 Incorporating RSS Feeds http://tabmgr.com/blog/2012/01/22/incorporating-rss-feeds/ http://tabmgr.com/blog/2012/01/22/incorporating-rss-feeds/#comments Sun, 22 Jan 2012 23:17:16 +0000 David F. Carr http://tabmgr.com/?p=37 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:

]]> http://tabmgr.com/blog/2012/01/22/incorporating-rss-feeds/feed/ 2 TabMgr.com Or Facebook Tab Manager On Your Own Site: Which Is Right For You? http://tabmgr.com/blog/2012/01/22/tabmgr-com-or-facebook-tab-manager-on-your-own-site-which-is-right-for-you/ http://tabmgr.com/blog/2012/01/22/tabmgr-com-or-facebook-tab-manager-on-your-own-site-which-is-right-for-you/#comments Sun, 22 Jan 2012 16:08:16 +0000 David F. Carr http://tabmgr.com/?p=27 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.
]]> http://tabmgr.com/blog/2012/01/22/tabmgr-com-or-facebook-tab-manager-on-your-own-site-which-is-right-for-you/feed/ 0 New “Add to Page” method in Facebook Tab Manager 2.9.6 http://tabmgr.com/blog/2011/12/14/new-add-to-page-method-in-facebook-tab-manager-2-9-6/ http://tabmgr.com/blog/2011/12/14/new-add-to-page-method-in-facebook-tab-manager-2-9-6/#comments Wed, 14 Dec 2011 01:54:10 +0000 David F. Carr http://tabmgr.com/?p=193 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

 

]]> http://tabmgr.com/blog/2011/12/14/new-add-to-page-method-in-facebook-tab-manager-2-9-6/feed/ 7