Share widget - nschonni/wet-boew GitHub Wiki

français

This component facilitates sharing Web content on social media platforms.

Table of Contents

Overview

Project lead: Paul Jackson (@pjackson28)

Description

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.

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="{... options ...}" 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>

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.
addFavorite Boolean False favourite (same as addFavorite:true) Controls the display of the favourite link.
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.

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

There are no known technical issues at this point in time. If you find one, please contribute by filing an issue.

The Standard on Web Usability has not yet been updated to include the mandatory disclaimer.

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.

Version History

References

⚠️ **GitHub.com Fallback** ⚠️