This site is running on a backup copy of the database that is missing many recent blog posts and comments. I’m working on getting it back in shape.
Category: Web Development
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.
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
- Upload the folder
wp-fb-commerceto the/wp-content/plugins/directory - Activate the plugin through the ‘Plugins’ menu in WordPress
- 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. - 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
- 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.
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.
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:
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.
I presented this speech to Toastmasters Club Awesome in Coral Springs as a way of practicing for the Enterprise 2.0 conference in Boston, which is coming up the week of June 20. I’ll be moderating a panel on Big Data and Social Analytics, and the introduction will go something like this:
By the way, the critique I got from my fellow Toastmasters was that I did too many random things with my hands and ought to be more deliberate with my body language. But they seemed to think I sounded like I knew what I was talking about.
One of the things I’ve enjoyed about promoting this plugin is seeing how people use it, often in ways I wouldn’t have thought of. The other day, I stumbled across a blog post by Michael Brandvold who showed me a different way of adding a page tab that uses Facebook Tab Manager but shortcuts some of the steps related to futzing with the Facebook Developer app.
He suggests using one of the freely available Facebook applications that have been created to help page owners manage their tabs from within Facebook. He recommended the Static HTML app, which mimics some of the functionality of the late, lamented Static FBML app that Facebook no longer makes available for new development. I also tested his technique with the HyperArts TabPress app (which, despite the name, has nothing to do with WordPress) and it worked equally well.
These tools let you paste in a block of HTML code that you want displayed, and you can also then edit and update that code from within Facebook. But what if you would rather take advantage of WordPress and its rich text editor?
Brandvold’s hack is to paste in a snippet of redirection code that points to your Facebook Tab Manager content, something like this:
<html><head><meta http-equiv='Refresh' content='0; url=https://www.carrcommunications.com/fbtab/welcome-to-carr-communications/' /></head></html>
So instead of a whole page of HTML, you include just enough to redirect to the content you’re managing in WordPress.
There are a few tradeoffs to consider:
- The page might load slightly slower because the viewer’s browser has to follow that redirect.
- You can’t customize the icon that appears next to the tab name. You get the ones provided by the creators of the Static HTML and TabPress apps. TabPress also adds a little promo for itself at the bottom of your tab content (although HyperArts will sell you a “white label version” if it’s important enough to you).
- You should probably have the redirect point to an https (SSL encrypted) web address to avoid triggering browser security warnings, particularly in Internet Explorer.
Here is a rundown on the latest updates to Facebook Tab Manager. More explanation after the bullet points. I will be doing a webinar on the use of the plugin Thursday April 14, 2011 at 7 pm ET (www.anymeeting.com/davidfcarr), and a recording will be available if I can figure out how to push the right buttons.
Changes in version 2.6.2 2.6.4
- Added
[fblike]shortcode as an alias to[fbtab nodecode="1"]. Recommended for situations where you are wrapping a block of text and image content inside a shortcode that indicates whether it should only be shown to people who have not yet liked, or who have liked your page. Example[fblike like="0"]CONTENT TO SHOW TO NEW VISITORS[/fblike] [fblike like="1"]FAN-ONLY CONTENT[/fblike] - To display an existing page in the fbtab template, you can add the query string ?fb=tab to the end of the page url. You can also use resize=1 to invoke the resizing JavaScript. Example:http://www.carrcommunications.com/contact/davids-resume/?fb=tab&resize=1
- Update: version 2.6.4 also lets you set query parameters new=1 (links should open in a new window) head=1 (execute wp_head) and footer=1 (execute wp_footer). I think that’s about as fancy as I’d want to make it from options you can pass through the url, but I came across cases where these would be useful in my own experiments.
- Users who don’t like my template can now specify their own should be used instead. Only recommended for advanced users with their own plugin/template development skills.
- Better conformance with WordPress coding standards.
Here is the background. I originally set up the fbtab shortcode to cover a couple of different scenarios, one of which was a technique for including inline JavaScript like one of the snippets you might get from the Facebook Social Plugins page. The idea was to let users paste in the script snippet in the WordPress editor’s visual mode as if you were entering a code sample for display rather than execution. I’d then let the shortcode function decode any HTML entities transformations added by the editor.
The like=”0″ and like=”1″ attributes came later. It worked fine if what you wanted to include or exclude based on whether the visitor had liked your page was a JavaScript snippet or a blog listing generated using the query parameter. But what if you wanted to just include a block of content between the tags? You might have content that ought to be encoded as HTML entities, so the decode routine wouldn’t be appropriate for that and might cause problems. At some point, I added support for a decode=”0″ parameter to indicate the HTML decode should not be applied.
In an attempt to clean this up a little, I’ve added fblike as another shortcode tag you can use with all the same parameters, but it’s specifically intended to be used around snippets of regular HTML content.
Another request I got was for an easy way to turn an existing post into a Facebook tab. So now you can just add ?fb=tab as a query string added to the url for a WordPress post or page, and it will be displayed in the fbtab template. This essentially strips away the regular WordPress navigation and substitutes uses a stylesheet with smaller Facebook body and headline fonts. You can use ?fb=tab&resize=1 to get the template to include the resize JavaScript snippet.
Note that pages that include fancy layouts or large images may not translate neatly into content suitable for a Facebook page tab. But in some cases, I can see this as a reasonable way to have one piece of content you can manage through WordPress that appears on both your website and your Facebook page.
Finally, several people have found reasons why they wanted to make their own hacks to the template file. To allow them to do that without breaking compatibility with future upgrades to the plugin, I’ve added the ability to specify a file path to your own plugin that should be used as a substitute for the default.
This is a work in progress for a client of mine, showing how to create a Facebook reveal tab – a page tab that reveals more information once a visitor has clicked the “Like” button – using Facebook Tab Manager.
Because this is for an optometry practice, I had Beth Anne mock up an eye chart illustration that comes into focus when you click the button. Then, once we’ve gotten our point across, the eye chart vanishes using a jQuery animation effect, revealing the practice’s current special offer. This is still under development, so I’d appreciate your help getting a critical mass of likes on the Marciano Family Optometric page (even if you unlike it later).
Here is how it works:
The effect is based on two blocks of content, tagged using these shortcode patterns:
[fbtab like=”0″]INVITE “LIKE” CONTENT[/fbtab]
[fbtab like=”1″]FAN ONLY CONTENT[/fbtab]
As part of the fan only content, I wrapped the image in div tag with “eyechart” as the ID. and included this JavaScript:
<script type=’text/javascript’ src=’http://YOURDOMAINHERE/wp-includes/js/jquery/jquery.js’></script><script>jQuery(document).ready(function($) {$(‘#eyechart’).delay(2000).slideUp(600);});</script>
One of the things the fbtab shortcode lets you do is paste a block of JavaScript into the WordPress editor in its visual mode. The function invoked by the shortcode fixes the entity references etc. introduced by the TinyMCE editor and transforms it back into executable JavaScript. So it’s a technique for including inline JavaScript. In this case, I’m not having FBTab manager output the wp_head action code content, so my inline JavaScript has to load the jQuery library first before invoking the animation functions.
As I say, it’s a work in progress, so I’d welcome your feedback.
I am hosting a webinar Thursday April, 14 2011 at 7 pm ET on the use of the Facebook Tab Manager WordPress plugin I created, which allows a website operator to include blog posts and other content on a Facebook page for a business, campaign, or other organization. For an example, see the “Clip File” tab on http://www.facebook.com/carrcomm.
Thursday April, 14 2011 at 7 pm ET, details: http://www.anymeeting.com/davidfcarr
I will present a tutorial and answer questions.
I also want to hear from those of you who have done interesting things with Facebook Tab Manager.
Background: Facebook Tab Manager is a WordPress plugin that lets you incorporate blog and website content into a Facebook page for a business or organization. You can create posts specifically for Facebook and designate content that will only be shown to people who Like your page
Last night I posted an update to Facebook Tab Manager in an attempt to keep up with recent changes in the Facebook platform — in particular, HTTPS URLs for tabs and canvases and a change in the rules for tab URLs.
Download it at http://wordpress.org/extend/plugins/facebook-tab-manager/
The bottom line is the instructions I provided for registering apps and tabs on Facebook had drifted out of synch with the Facebook Developers app registration form.
The most consequential of these changes is that you can now specify HTTPS encrypted URLs as alternative sources of your canvas or tab content. This solves a problem I only heard about recently concerning people who take advantage of the “secure browsing” feature Facebook introduced earlier this year, which allows users to specify that all facebook.com addresses should be loaded in HTTPS mode. If your app or tab was not available at an HTTPS address, Facebook simply wasn’t displaying it (and your browser would probably have complained about mixed insecure / insecure content anyway).
The catch: this only fixes the problem if your web server is configured to support HTTPS. If you want to make your content available to the broadest audience, maybe it’s time to spring for the required SSL certificate. Even if you don’t do e-commerce on your website, you will get some additional benefits such as being able to better protect your password when you log in as administrator.
The other Facebook change I’m reacting to is that you now specify the full URL that tab content will be pulled from.
Previously, the form forced you to specify your canvas as a directory style URL with a trailing slash like http://www.mysite.com/fbtab/canvas/ and the tab had to be a file or directory below that level like http://www.mysite.com/fbtab/canvas/tab/ and the form had you fill in just the last part of the address for the tab as in “tab/” in the tab section.
I’ve updated my instructions to reflect this change, including the fact that you can now use the same fbtab post serve as the basis of both an app canvas and a page tab. Facebook Tab Manager still lets you choose to create a tab/canvas pair of posts, with the canvas taking advantage of the wider content area, where that is worthwhile.
Other changes:
- I eliminated the banner I had appearing on pages when viewed on your own website. Caused more problems than it solved.
- Tweaked the handling of stylesheets to be served as a static document when no custom CSS is being used. Should help with performance.
As always, let me know where you see room for improvement (most of you aren’t shy about that).
You must be logged in to post a comment.