Share widget

Overview

Project lead: Paul Jackson (@pjackson28)

Purpose

Having a share widget on your site enables users to quickly share content with their networks, hence increasing the reach of your website. This increase in reach comes at very minimal cost as all it requires is the inclusion of a share widget somewhere on your page.

Recommended usage

Use when

Use on specific content that you want users to share or that users would find useful to share with others via their social media outlets. Use the filtered version if you want to target certain platforms, for example, if your research indicates that your target audience tends to use one or a few platforms over others.

Content

Rather than automatically including the share button on every page of your site, think about users and when and where they may want to take a call to action to digg, share, tweet or follow. A well designed site will facilitate a 'frictionless' experience for the user where they would otherwise have to copy and paste. (Source).

A disclaimer must be included that states no endorsement is implied through use of social media icons.

Do not use when

  • The page does not contain useful content (e.g., splash pages)
  • The page does not have a unique URL. Sharing the page would send people to a different page if users clicked on the shared link.
  • Automatically on every page.

Implementation

  1. <div class="wet-boew-share"></div> to the Web page.
  2. Specify a width for the widget (e.g., class="span-5 margin-bottom-none")
  3. Configure the options either globally or on a page-by-page basis. Options are configured globally by adding var wet_boew_share = { ... options ...}; to settings.js or on a page-by-page by applying configuration classes or data_wet_boew_share='{"option1": value1, "option2": "value2", ...}' to the widget element.

Global configuration example:

var wet_boew_share = {
   "sites" : ["del.icio.us", "digg", "facebook", "google", "linkedin", "reddit", "stumbleupon", "twitter", "yahoobuzz"]
};

Global configuration example

Page configuration example:

<div class="wet-boew-share" data-wet-boew='{"sites":["digg","facebook","twitter"]}'></div>

Adding additional social media sites

If a social media site is not in the list of supported sites, there are two ways to add your own starting in v3.0.8 and v3.1.2.

In settings.js (using the form 'id': {display, icon, lang, category, url}):

var wet_boew_share = {"addSites": {"pinterest": {"display": "Pinterest", "icon": "/img/pinterest.jpg", "lang": "en", "category": "other", "url": "http://pinterest.com/pin/create/button/?url={u}&title={t}"}}};

Using data-wet-boew:

data_wet_boew='{"addSites": {"pinterest": {"display": "Pinterest", "icon": "/img/pinterest.jpg", "lang": "en", "category": "other", "url": "http://pinterest.com/pin/create/button/?url={u}&title={t}"}}}'

Configuration options

Parameter (global and data-wet-boew) Value Default Configuration class Description
addEmail Boolean false email (same as addEmail:true) Controls the display of the email link. Related to the >emailSubject and emailBody parameters.
addAnalytics Boolean false analytics (same as addAnalytics:true) Controls the enabling of Google Analytics for links. Related to the analyticsName parameter.
addFavorite Boolean false favourite (same as addFavorite:true) Controls the display of the favourite link.
analyticsName String '/share/{r}/{s}' where '{s}' is the site code, '{n}' is the site name, '{u}' is the full URL, '{r}' is the relative URL, and '{t}' is the title n/a The 'URL' that is passed to Google Analytics.
description String n/a Description of the page/site. Replaces {d} in generated text.
emailBody String "I thought you might find this page interesting:\n{t} ({u})" / "J'espère que cette page vous intéresse :\n{t} ({u})" n/a The body of the email generated by the email link. {t} is replaced by the page title, {u} is replaced by the page URL, and {d} is replaced by the page description (if any). Use \n for new lines. Related to the addEmail and emailSubject parameters.
emailSubject String "Interesting page" / "Page qui est intéressante" n/a Subject for email generated by the email link. Related to the addEmail and emailBody parameters.
sites Array [] n/a List of bookmarking sites to include in the widget (e.g., sites:['digg','facebook','twitter']). Leave blank to include all supported bookmarking sites.
sourceTag String n/a Extra tag to add to URL to indicate the source of the bookmarking.
title String n/a Title to bookmark. Leave blank for the title of the current page.
url String n/a URL to bookmark. Leave blank for the current page.

Configuring emailBody and emailSubject text

Add the following to settings.js:

var wet_boew_share;
if ($('html').attr('lang') === 'fr')
    wet_boew_share = {
        'emailSubject': 'French subject of the email',
        'emailBody': 'French body of the email. Use {t} for the page title, {u} for the page URL and {d} for the page description.'
    };
else {
    wet_boew_share = {
        'emailSubject': 'English subject of the email',
        'emailBody': 'English body of the email. Use {t} for the page title, {u} for the page URL and {d} for the page description.'
    };
}

Examples

Development

The share widget is dependent on jQuery Bookmark (MIT license, GPL license).

The code for the share widget is located in several places within the source folder of WET:

Known Issues

None at this time.

Version History

References