Share widget - nschonni/wet-boew GitHub Wiki
This component facilitates sharing Web content on social media platforms.
Project lead: Paul Jackson (@pjackson28)
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.
- <div class="wet-boew-share"></div> to the Web page.
- Specify a width for the widget (e.g., class="span-5 margin-bottom-none")
- 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.
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>
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. |
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:
- js/workers/share.js - contains the JavaScript code for the share widget
- js/sass/includes/_share.scss - contains the css for the share widget
- js/sass/includes/_share-ie7.scss - contains the IE7 specific css for the share widget
- js/images/share/ - contains the images for the share widget
- js/dependencies/bookmark.js - main jQuery Bookmark script file
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.
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.
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.
- 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.