Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

sharon

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sharon

A lightweight and modular social sharing library

  • 2.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13
decreased by-70.45%
Maintainers
1
Weekly downloads
 
Created
Source

Sauce Test Status

Sharon

A lightweight and modular social sharing library:

  • a toolkit to build your own share buttons;
  • supports 13 sharing platforms;
  • gzipped size is 1.72 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((err, count) => {
  if (err) throw err;
  console.log("Whoa, we have " + count + " shares!");
});

Table of contents

Setup

CommonJS

Install Sharon using npm:

npm install sharon --save

Load the whole library:

import sharon from "sharon";

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

import facebook from "sharon/facebook";
import twitter from "sharon/twitter";

Browser

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

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

API

Supported sharing platforms

Each sharing platform has its endpoint under the Sharon API:

Sharing platformEndpointShare count supportShare parameters
Buffersharon.bufferYesReference
Facebooksharon.facebookYes
Gmailsharon.gmail
LinkedInsharon.linkedinReference
Odnoklassnikisharon.okYes
Pinterestsharon.pinterestYesReference
Redditsharon.redditYesReference
Telegramsharon.telegram
Tumblrsharon.tumblrYesReference
Twittersharon.twitterReference
Vkontaktesharon.vkYesReference
Weibosharon.weibo
XINGsharon.xingReference

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

sharon.platform(url = location.href, parameters = { title: document.title })

  • 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.

Examples Share the current page:
sharon.twitter();

With a custom title:

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

Share example.com:

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

Share example.com with a custom title:

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

sharon.platform.href(url = location.href, parameters = { title: document.title })

  • 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.

Examples Get the share popup URL for the current page:
const link = sharon.twitter.href();

With a custom title:

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

For example.com:

const link = sharon.twitter.href("http://example.com");

For example.com with a custom title:

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

sharon.platform.count(url = location.href, callback)

  • 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.

Examples Share count for the current page:
sharon.facebook.count((err, count) => {
  if (err) throw err;
  console.log(count);
});

For example.com:

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

Share parameters

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:

Example

The set of features is different for most of the sharing platforms. To find them out, check their documentation, links 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 is automatically translated into one corresponding to a chosen platform.

More examples

Poor man's tweet button

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

React component

function LinkedInShareButton {
  const [count, setCount] = useState();

  useEffect(() => {
    sharon.linkedin.count((err, count) => {
      if (err) throw err;
      setCount(count);
    });
  }, []);

  const share = useCallback((event) => {
    event.preventDefault();
    sharon.linkedin();
  }, []);

  return (
    <a onClick={share} href={sharon.linkedin.href()}>
      Share on LinkedIn {count}
    </a>
  );
}

AngularJS

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

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

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

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

:heart:

Keywords

FAQs

Package last updated on 15 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc