Sharable NPM | npm.io

Sharable

An easily configurable social share libary that uses the social data in your document's head by default.

1.6kb gzipped

Install

npm i sharable --save

Usage

Add social data to your head as normal.

<html>
<head>
  <meta prefix="og: http://ogp.me/ns#" property="og:description" content="A javascript sandbox, by Eric Bailey."/>
  <meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="Sandbox"/>
  <meta prefix="og: http://ogp.me/ns#" property="og:title" content="Sandbox" />
  <meta prefix="og: http://ogp.me/ns#" property="og:image" content="https://s3.amazonaws.com/StartupStockPhotos/uploads/20160503/3.jpg" />
  <meta prefix="og: http://ogp.me/ns#" property="og:url" content="http://estrattonbailey.com" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Sandbox">
  <meta name="twitter:description" content="A javascript sandbox, by Eric Bailey.">
  <meta name="twitter:image" content="https://s3.amazonaws.com/StartupStockPhotos/uploads/20160503/3.jpg">
</head>
<body>

  <a href="#0" data-social="twitter">Twitter</a>
  <a href="#0" data-social="facebook">Facebook</a>
  <a href="#0" data-social="pinterest">Pinterest</a>
  <a href="#0" data-social="email">Email</a>
  <a href="#0" data-social="tumblr">Tumblr</a>

</body>
</html>

import sharable from 'sharable'

const share = sharable()

// ES5
var sharable = require('sharable/browser')
var share = sharable()

Options

options.selector

Change the attribute you want to bind with Sharable. Default: data-social.

const share = sharable({
  selector: 'data-social-link'
})

locals

You can also pass data to individual links via data attributes to override the default data from the head.

<a href="#0"
  data-social="tumblr"
  data-description="Description for the tumblr post."
  data-url="http://estrattonbailey.tumblr.com"
  >
  Tumblr
</a>

Supported Networks and Attributes

Twitter

data-url
data-description
data-hashtags - comma separated list
data-via - appends via @handle to the end of the tweet

Facebook

data-url

Tumblr

data-url
data-title
data-description
data-image

data-url
data-image
data-description

Email

data-url
data-title

API

sharable.update()

Binds any new links and fetches fresh meta data from the head.

share.update()

sharable.getMeta()

Scrape the document.head for all social related meta tags. Returns an object with the shape propertyName: propertyValue i.e. image: 'https://urltomyawesomeimage/image.jpg'.

share.getMeta()

TODO

More networks (anyone care to contribute?)
Tests

MIT License

social share

@everything-registry/sub-chunk-2746

5 years ago

9 years ago

9 years ago

9 years ago

9 years ago

9 years ago