New Commerce Feature: Social Bookmarking

One of the new social features added to this latest release of Four Roads Commerce is social bookmarking. Over the last couple of years there have been several methods of doing this, from CS Modules to Chameleon controls, all with configuration via the CommunityServer.config.

We decided to take a different approach by using the third party service AddThis. AddThis provides a configurable button that when added to your site allows users to share links with every conceivable social bookmarking and sharing service out there. You do have to sign up for an account with AddThis, but there are extra benefits to that such as being able to track the number of bookmarks that are created from your site, which pages are bookmarked most, and what the most popular bookmarking services your customers are using.

AddThis provides you with some javascript that you can add to the pages of your site, after selecting what you want your button to look like and how you want it to behave. We took this even further by creating a Chameleon control that is embedded into the pages of a Shop Item, so that you can control it's placement when skinning your site. It is completely configurable via a control panel page within the shop or via properties on the control itself.

One of the benefits of wrapping the button code in a control and configuring it via properties is that we were able to automatically create a datasource for the control the way all Chameleon controls do, and make certain assumptions on what data to provide AddThis. For instance AddThis needs 3 things to make it work. First, an account name. This is the account name you set up when creating your account with AddThis. You can configure the account name via the Shop control panel. Next it needs a Title and a URL. Given that we assume a Post object as the datasource, we can derive the Title from the Subject of the Post, and the URL from the Post object itself.

With this methodology, the control becomes usable anywhere within Community Server, and so what we have created is a generic social bookmarking control that can be dropped into any page of Community Server as long as there is a Post datasource in its parent heirarchy. The Control Panel configuration however, is only available to the control within the Shop pages, which means that anywhere else you decide to put the control, it must be configured via the control properties. Examples will follow.

Configuring the AddThis control via the Commerce Control Panel

This configuration only applies to use of the AddThis control within Commerce pages, as the use of the control is slightly different in these pages.

Navigate to the Shop Management page for your shop, select the Global Settings tab, and then the Shop Options tab. You will see a tab labeled AddThis Settings, select this tab.

You should see a page that looks like the following screenshot:

 

After enabling AddThis, entering your account name, selecting your button style and the button behavior (all of these are the same options available at the AddThis site), simply click Save and the AddThis control will be visible from your Shop Item pages, as shown in the following screenshot.