❤
npm
Sign UpSign In

sharable

1.0.1 • Public • Published

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

Pinterest

  • 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

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

MIT License

Readme

Keywords

Package Sidebar

Install

npm i sharable

Repository

github.com/estrattonbailey/sharable

Homepage

github.com/estrattonbailey/sharable#readme

Weekly Downloads

7

Version

1.0.1

License

MIT

Unpacked Size

12.1 kB

Total Files

5

Last publish

Collaborators

  • estrattonbailey
  • iamkevingreen
Try on RunKit
Report malware