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.

Be Sociable, Share!

  • t-racer

    Wow. Looks pretty cool. Have downloaded and will hopefully have time to test later in the week.

  • Dave

    Hi thre,

    Thanks for the great plugin! I’ve just tried to install it, and i am getting this error:

    Fatal error: Call to undefined function wpsc_output_breadcrumbs() in/home/Shopnamehere/public_html/wp-content/plugins/wp-fb-commerce/fb-ec-theme/fb-wpsc-products_page.php on line 20

  • Anonymous

    Just checking, but do you already have WP e-Commerce installed? That’s a prerequisite, and something I should probably check for when you install my add-on plugin.

    If you do have WP e-Commerce already, do you have the current version? That call is my plugin making a call to a function in the “parent” plugin.

  • Emile McLennan

    Is there by any chance a work around, our site doesn’t use SSL as the payment is hosted by a third party processor? 

  • Dave

    Hi David,

    Yeah there is a copy of WP E-Commerce installed. But the version we got is rather old. it’s 3.7, so we’ll upgrade it and report back soon

    Thanks!

  • Eric

    Hello Dave,Thanks for the great plugin…just what we wanted. We’re using WP 3.2.1, and WP e-commerce 3.8.7, but:The plugin settings page is throwing this error:Warning: file_get_contents(/home/coffee/public_html/wp-content/plugins/wp-fb-commerce/fbtab.css) [function.file-get-contents]: failed to open stream: No such file or directory in /home/coffee/public_html/wp-content/plugins/wp-fb-commerce/wp-fb-commerce.php on line 399I couldn’t find a fbtab.css file anywhere. The wp-fb-commerce folder and files are in-place per the “storefront” article…but not the file. What did we miss?Thx,The Roasthouse.net team-Eric

  • http://www.carrcommunications.com David F. Carr

    This is fixed in release 0.2

  • Eric

    David,
    I sent some plugin settings vs. screenshot tests back to you (email). (Sent from my yahoo address.)

    -Eric
    roasthouse.net

  • Roc

    Thanks for the plug-in, this is very helpful. I just tried on our website, it works great. About “select Facebook featured products” is it possible to make it use the default wp-ecommerce  featured product, it’s not very convenient to select a product from the drop down menu. Another thing is the structure broken when click on the breadcrumb from facebook.(using the built-in theme) It seems a back to category link is necessary. 

  • http://www.carrcommunications.com David F. Carr

    Can you share a link to the Facebook page where you’re testing this and the store it’s associated with? One of my challenges is I got recruited to do this because of my work on Facebook Tab Manager for WordPress, but I don’t have a lot of experience with WP e-Commerce and how the stores are structured

  • Roc

    Sure, http://www.facebook.com/esgreen.page the”Store” tab. 

  • Christian

    It took me agaes to figure it out but finally i got my online store on my page . thanks heaps