An easily configurable social share libary that uses the social data in your document's head by default.
1.6kb gzipped
npm i sharable --saveAdd 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()Change the attribute you want to bind with Sharable. Default: data-social.
const share = sharable({
selector: 'data-social-link'
})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>data-urldata-descriptiondata-hashtags- comma separated listdata-via- appendsvia @handleto the end of the tweet
data-url
data-urldata-titledata-descriptiondata-image
data-urldata-imagedata-description
data-urldata-title
Binds any new links and fetches fresh meta data from the head.
share.update()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()- More networks (anyone care to contribute?)
- Tests
MIT License