Skip to content
An easily configurable social share library that uses the social data in your document's head by default.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
browser
.babelrc
README.md
index.js
package.json

README.md

Sharable npm

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="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

Pinterest

  • data-url
  • data-image
  • data-description

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

  1. More networks (anyone care to contribute?)
  2. Tests

MIT License

You can’t perform that action at this time.