A lightweight and modular social sharing library:

• a toolkit to build your own share buttons;
• supports 14 sharing platforms;
• gzipped size is 1.71 KB;
• you can cherry-pick which sharing platforms to use to make it even smaller.

Here how it looks when you want Sharon to open a tweet popup:

sharon.twitter({
  title: 'One last quarter as defending champs!',
  hashtags: ['SuperBowl', 'DenverBroncos']
});

Or to get a Facebook share count for your page:

sharon.facebook.count(function (err, count) {
  if (err) throw err;
  console.log('Whoa, we have ' + count + ' shares!');
});

• Setup
  • CommonJS
  • Browser
• API
  • Supported sharing platforms
  • sharon.platform(url = location.href, parameters = { title: document.title })
  • sharon.platform.href(url = location.href, parameters = { title: document.title })
  • sharon.platform.count(url = location.href, callback)
  • Share parameters
• More examples
  • Poor man's tweet button
  • Angular
  • React component

Install Sharon using npm:

npm install sharon --save

Load the whole library:

var sharon = require('sharon');

Or cherry-pick platforms for smaller Webpack, Browserify or Rollup bundles:

var facebook = require('sharon/facebook');
var twitter = require('sharon/twitter');

<script src="dist/sharon.js"></script>

For the sharon.js file check the dist directory of the installed module or directly download it:

• Production version – 1.71 KB, minified and gzipped
• Source map

Each sharing platform has its own endpoint under the Sharon API:

This table also shows which of the platforms support retrieving share counts and links to the share parameters references.

• url <String> The URL to share. Defaults to the current location.
• parameters <Object> Share parameters. Default to an object with the title property equal to the current page title.

Opens a share popup.

sharon.twitter();

sharon.twitter({title: 'Check it out'});

sharon.twitter('http://example.com');

sharon.twitter('http://example.com', {title: 'Check it out'});

• url <String> The URL to share. Defaults to the current location.
• parameters <Object> Share parameters. Default to an object with the title property equal to the current page title.
• Returns: <String>

Returns a share popup URL.

var link = sharon.twitter.href();

var link = sharon.twitter.href({title: 'Check it out'});

var link = sharon.twitter.href('http://example.com');

var link = sharon.twitter.href('http://example.com', {title: 'Check it out'});

• url <String> The URL of which to retrive the share count. Defaults to the current location.
• callback <Function(err, count)> A callback function that receives the count.

Retrieves the share count of a URL.

sharon.facebook.count(function (err, count) {
  if (err) throw err;
  console.log(count);
});

sharon.facebook.count('http://example.com', function (err, count) {
  if (err) throw err;
  console.log(count);
});

When using sharon.platform or sharon.platform.href functions you can specify the share parameters by passing an object as the last argument. They are added to the query parameters of the share popup URL and are specifying additional features:

sharon.twitter({
  title: 'One last quarter as defending champs!',
  hashtags: ['SuperBowl', 'DenverBroncos']
});

This produces a popup with a predefined title and hashtags:

The set of the features is different for the most of the sharing platforms. To find them out check their documentation, links to which are provided in the Supported sharing platforms table.

There is an inconsistency between different platforms: for instance, Twitter expects the text parameter to contain a link title, while Pinterest expects the description one. Sharon normalizes this behavior: when you pass a title parameter it's automatically translated into a one that corresponds to a chosen platform.

<button type="button" onclick="sharon.twitter()">Tweet</button>

<a ng-click="share($event)" ng-href="{{href}}">Share on Facebook {{count}}</a>

$scope.href = sharon.facebook.href();

$scope.share = function (event) {
  event.preventDefault();
  sharon.facebook();
};

sharon.facebook.count(function (err, count) {
  if (err) throw err;

  $scope.$apply(function () {
    $scope.count = count;
  });
});

class LinkedInShareButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {href: sharon.linkedin.href()};

    sharon.linkedin.count((err, count) => {
      if (err) throw err;
      this.setState({count});
    });
  }

  share(event) {
    event.preventDefault();
    sharon.linkedin();
  }

  render() {
    return <a onClick={this.share} href={this.state.href}>Share on LinkedIn {this.state.count}</a>;
  }
}