Social Collaboration for Dummies book launch at JiveWorld

JiveWorld Moderation

Doing onstage interviews at JiveWorld; here with Lisa Araonson of Allstate

The release of my Social Collaboration For Dummies book turned out to be just in time for JiveWorld13, the Jive Software user conference I participated in. I do mean just in time — the books turned up in the warehouse at Wiley the Friday before the event and had to be overnighted to Los Vegas to catch up with me.

In addition to a holding a book signing at the show, I participated on an analysts panel and conducted a series of onstage interviews with JiveWorld customers Allstate, American Airlines, and Steelcase.

One of the neat things about the Allstate story is they tried instituting social collaboration a few years ago but very tentatively, deciding at that time that employees associated with crucial operations such as claims shouldn’t have access to the enterprise social network because it might be a distraction to them. Today, the organization has done a 180 — figuring out that the claims group needs this technology precisely because it is so critical. In part, that’s because social collaboration could fill a knowledge transfer role, giving younger workers a medium for getting questions answered by more experienced workers, with the record of those Q&A interactions preserved online. With the addition of a mobile client, the social network has also become more useful to personnel in the field, who often need to look up a document or get a question answered while on the go.

Allstate and Steelcase both had a combination of stories about internal social networking and the creation of collaboration groups for external constituencies (independent insurance agents and furniture dealers, respectively).

American Airlines was using the social collaboration network partly to demonstrate a new spirit of transparency and cooperation to a workforce badgered by years of turmoil. At the same time, it is moving cautiously in how it opens up that resource because of workforce and union tensions. Another common large company use for social collaboration is to bridge the gaps between business units brought together through mergers and acquisitions, and American has some plans to use the network to help it integrate United Airlines — assuming that one survives a current challenge by the justice department.

Facebook Tab Manager 2.8.7 Adds Theme / Template Options, Preloader Image

I figured out how to address a few requests for greater customization options and also how to add a preloader image if a pages are sometimes slow to load. The theme option was also partly inspired by my recent work on a Facebook extension to WP e-Commerce, which was a sort of spin-off of Facebook Tab Manager code.

I’m just starting the process of moving most documentation over to facebooktabmanager.com, so see the links below for more details.

Facebook Extension for WP e-Commerce

Based on the success of Facebook Tab Manager, I got contacted a few weeks ago by the makers of the WP e-Commerce plugin to consult on creating an extension that would allow merchants to display products with a version of their storefront embedded in a Facebook business page tab.

An early version is available for download here – http://wordpress.org/extend/plugins/wp-fb-commerce/ – and I’m at the stage where it would be helpful to get feedback. Also, since I don’t currently run a live e-commerce store, I’d like to to see what this looks like with a real assortment of products loaded into it. I’ve got a little Facebook Specials demo store running on the Carr Communications Facebook page, but the product listings aren’t particularly realistic.

This isn’t up in the WordPress plugins repository yet. Here is the description from the readme.txt

WP FB Commerce

WP FB Commerce is a companion plugin to GetShopped’s famous WP e-Commerce. Market featured products or your whole catalog on Facebook.


Contributors: davidfcarr, mufasa
Donate link: http://www.rsvpmaker.com
Tags: facebook, iframe, page tab, e-commerce, wp-e-commerce, shop, cart, paypal, authorize, stock control, ecommerce, shipping, tax
Requires at least: 3.0
Tested up to: 3.2.1
Stable tag: 0.1


Description

WP FB Commerce is a companion plugin to GetShopped’s famous WP e-Commerce. Display featured products or your whole catalog on Facebook and allow customers to check out directly within your Facebook business page.

This early release includes code adapted from Facebook Tab Manager for WordPress, customized for the e-commerce application. Use the provided theme for displaying products on Facebook or provide your own.

WP FB Commerce was created for GetShopped by Carr Communications Inc. http://www.carrcommunications.com

For more information about WP e-Commerce visit http://getshopped.org


Installation

  1. Upload the folder wp-fb-commerce to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. Optionally, copy the fb-ec-theme subfolder to /wp-content/themes/ directory. This will allow you to modify the template files and style.css independently of the plugin code. It may also perform better.
  4. Register the URL for your storefront in the Facebook Developers utility (see explanation under Frequently Asked Questions).

Frequently Asked Questions

How do I add my storefront to Facebook?

WP FB Commerce displays your storefront as a tab on a Facebook business page. You will register a URL pointing to your web server in the Facebook Developers utility at https://developers.facebook.com/apps

Click ‘Create a New App’ and follow the instructions. Many of the fields on the app registration form are optional. The most critical fields to fill in for our purposes are in the Page Tab section where you will enter a Page Tab Name, Page Tab URL, and Secure Page Tab URL. You must be able to host SSL secured / https pages for this to work properly.

You can find the URLs to record on the ‘Products -> FB Featured’ and ‘Settings -> WP FB Commerce’ pages. You have a choice of either displaying products from the default view of your WP e-Commerce product catalog or a select list of featured products set on the Products -> FB Featured screen. The URLs include a query string parameter in the form of ?fbx=1 for the featured products list or ?fb=commerce for the default listing.

After saving the settings for your “app”, click the link on the left hand sidebar to View App Profile Page.

From the profile page, click the link for ‘Add to My Page’. Facebook will display a listing of all the pages you own or have editing rights to. Click the Add to Page button next to the page or pages you want this storefront view to appear on. Then navigate to your business page, and you should see the new tab displayed on the menu on the left side of the page.

If you are logged in as an administrator of the page, an ‘Edit’ link will be displayed at the bottom of the list of tabs (navigation links within the content for your page). This allows you to delete or rearrange the tabs. If you have a long list of tabs, you may need to click ‘More’ before the ‘Edit’ link will be displayed.

You can edit or rearrange the tabs.

How do I select Facebook featured products?

Look for an additional menu item under Products titled FB Featured. You may select up to 20 products to be displayed as featured offers.

How do I customize WP FB Commerce?

  • Visit the settings screen at Settings -> WP FB Commerce. You can add header (for example, including a logo) or footer, add custom CSS to be added dynamically, and specify navigation options.
  • You can create your own themes specifically for use with WP FB Commerce. When you add a theme to the ‘wp-content/themes’ and select it from the Settings -> WP FB Commerce, it will be displayed instead of your default theme when your site is viewed from within Facebook.

How does WordPress know to display the Facebook theme?

When a visitor first accesses the Facebook Page Tab containing your storefront, the query string at the end of the URL tells WordPress to display the Facebook theme. As the visitor continues to navigate through the product catalog, a PHP session variable tells WordPress to continue to display content with the Facebook theme.

Note: If the visitor subsequently navigates to your external website, this session variable can cause the website to be displayed within this alternate theme. However, this should only be momentary — a JavaScript routine detects that the site is no longer being viewed within the Facebook iframe and redirects with a parameter that terminates the session, causing your site to be viewed within its normal theme.

What is the to-do list for this plugin?

  • Improve display of shopping cart contents after user clicks the Add to Cart button. Would be good to have something similar to the sliding cart effect used in the WP e-Commerce sidebar widget. However, the Facebook layout doesn’t leave room for a sidebar.
  • Better AJAX / JavaScript effects for product display and checkout. Need a better way of showing that items have been added to cart. JavaScript for ‘fancy_notifications’ doesn’t seem to be working properly.
  • A way of giving special discounts to users who come through the Facebook channel.
  • The ability to add an additional discount, or display special offers, for people who have “Liked” the merchant’s Facebook page. (Currently, this status is detected and stored in the session variable $_SESSION[“like”] but the variable is not being used to affect product display or pricing.)
  • A hacked version of the thickbox JavaScript is provided — altered to address certain positioning issues when the lightbox is displayed within an iFrame. Would appreciate help from anyone who can come up with a better solution.

Screenshots

  1. A product listing embedded in a Facebook business page.

Changelog

0.1

This is a preliminary test release. Shopping and checkout functions should function much the same as they would on an independent website. However, the plugin needs further testing with WP e-Commerce options.

Facebook Tab Manager 2.8.5 – Tweaks to CSS and Reveal Tab Setup

The latest release of Facebook Tab Manager includes tweaks to the default CSS and handling of custom CSS. I also updated the Reveal Tab Setup Utility.

From the changelog:

  • CSS changes to prevent display of scroll bars, even when too-wide content such as a large image is included (width set on body, with overflow hidden)
  • Changed the way custom CSS is loaded into template. Should perform better.
  • Reveal Tab Setup utility now displays 10 most recent combinations of Fan / Non-fan pages and corresponding URLs.
My intent with the changes to the Reveal Tab Setup utility was to make it more obvious how the URLs generated by the tool related to the content that would be displayed:
Reveal Tab Setup Utility

Reveal Tab Setup Utility

Clippings From Information Week’s The BrainYard, Enterprise Social Media Coverage

Here is some of the work I’ve been doing for Information Week’s enterprise social media microsite, The BrainYard (see realtime updates).

David F. Carr | Aug 08, 2011
Crowd Factory CEO Sanjay Dholakia explains how to apply and measure social interactions across all marketing channels.
David F. Carr | Aug 05, 2011
Jive, Salesforce.com, and Lithium at the head of the pack, but the research firm says enterprise use still experimental.
David F. Carr | Aug 05, 2011
Mobile device makers uses Telligent social platform to build Web community to collaborate on product development.
David F. Carr | Aug 04, 2011
Like Twitter chats during television shows? Check out HarQen’s intriguing beta product that adds social chat to a conference call for later search…
David F. Carr | Aug 04, 2011
College deal site Kembrel embeds its social store in Facebook, but doesn’t insist on closing the deal there. Continue reading Clippings From Information Week’s The BrainYard, Enterprise Social Media Coverage

How To Use Contact Form 7 with Facebook Tab Manager

One of the more useful features of Facebook Tab Manager for WordPress is that you can use it conjunction with other plugins to embed their functionality in a Facebook page tab. I’ve particularly gotten a number of requests for guidance on how to use Facebook Tab Manager with Contact Form 7, a popular forms management plugin.

You can do this by including a Contact Form 7 shortcode, which looks something like this: [contact-form 1 “Contact form 1”]

That code is generated by the administrator’s screen for the plugin. I’m not going to cover that in detail, but this utility allows you to lay out your form and the email notice you will get when someone completes it. You then copy and paste the corresponding shortcode into your page or post — in this case, into an fbtab post.

Here, I’m going to walk through an example of how to display a form only to page fans, while also including the JavaScript and CSS needed for Contact Form 7’s AJAX functions.. You could make this the landing page shown to newcomers, with a message asking them to click the Like button. Once they do so, Facebook Tab Manager detects that this person is now a fan of the page and displays the fan-only content, which includes the form. Perhaps once the person becomes a fan, you give them the option of filling out the form to enter a contest or get some special offer. The business scenario is up to you.

You can see the live example on the Carr Communications Facebook Page. Here is how it appears in the WordPress editor, with the contact form shortcode wrapped inside an fblike shortcode with a like=”1″ parameter to indicate it should only be shown to fans. An alternate bit of content is designated to be displayed to non-fans.

Shortcodes to Display Form to Page Fans

To get the styles and scripts for Contact Form 7 included properly, I need to let WordPress output the wp_head and wp_footer actions just as it would on a regular web page. The tricky part of this is deactivating functions that don’t make sense in a Facebook context. On my website, I have to be careful to turn off a function of my site’s theme that outputs a custom background image, a plugin function that outputs social media icons for my blog, and a few other things. The exact list of tweaks you will need to make varies from site to site, depending on the theme and plugin you have installed, so this is just an example – be prepared to experiment.

Checkbox options:

  • NO -Open Links / Post Forms to New Window
  • YES – Template should execute theme/plugin code in HTML head – wp_head() command
  • YES – Template should execute theme/plugin code in page footer – wp_footer()

Click the Show Advanced button and check off the plugin and theme action/filter functions you want to exclude.

the_content filters to exclude

  • sociable_display_hook

wp_head actions to exclude

  • _custom_background_cb

wp_footer actions to exclude

  • dsq_output_footer_comment_js
  • wp_admin_bar_render
  • stats_footer

Note: Make sure you have the latest release. While preparing this example, I found errors in the code for excluding wp_head and wp_footer action functions. This was fixed in version 2.8.3. Version 2.8.4 also fixed an issue with the Reveal Tab Setup utility and works better with the alternate approach below.

Using the Reveal Tab Utility

Facebook Tab Manager also includes a Reveal Tab Setup utility for designating alternate posts to be displayed to fans versus newcomers. To make this example with that approach, you would create one fbtab post containing the shortcode for the form, and check all the same boxes I explained in the previous example. You would then create a second post telling people why they should register to get access to your wonderful form.

In the Reveal Tab Setup utility, your choices look something like this:

Reveal Tab Setup for a Form

Reveal Tab Setup for a Form

You can see a live example on my business page.

In version 2.8.4, I tweaked the way the special url generated by the Reveal Tab Setup utility is processed by WordPress, making it redirect to the permalink for fans of the page. This was necessary to make it work properly with Contact Form 7, which was otherwise confused by the non-standard URL.

Facebook Tab Manager for WordPress 2.8, Fix for Nesting of Shortcodes

Version 2.8 of the Facebook Tab Manager for WordPress has just been released. It fixes one important error with the handling of the included shortcodes for conditional display of content based on whether someone has liked your Facebook page. Something like the example below for displaying a form created with Gravity Forms only to page fans should now work.

[fbtab like=”1″ ]Thanks for liking us! Here is the entry form:[gravityform id=3]
[/fbtab]

I had misunderstood this documentation and thought that nesting of shortcodes was automatically supported, but it turned out I needed to include a do_shortcode call in my shortcode function. Thanks to Jason Lane for pointing out the error.