Ninja Pokémon Master

    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

    Keywords

    Install

    npm i sharable

    DownloadsWeekly Downloads

    10

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • estrattonbailey
    • iamkevingreen