Turn simple <a> tags into share links for social media sites. Links will open a share dialog in a popup window.

Roughly 1.9kb footprint when minimised.

Supported platforms:

• Facebook
• Twitter
• LinkedIn
• Pinterest
• Whatsapp
• Tumblr

• None

npm install --save sharelinks

Some HTML:

<a href="#" class="share" data-platform="twitter">Share this page on Twitter</a>

Some JS:

import Sharelinks from 'sharelinks';
new Sharelinks('.share');

Provide a callback for when a link is clicked:

const sharelinks = new Sharelinks('.share', {
    callback: e => {
        console.log('Link Shared');
        console.info('Platform', e.platform);
        console.info('Url', e.url);
    }
);

Add a custom platform

const sharelinks = new Sharelinks('.share', {
    platforms: [
        name: 'mycustomsite',
        href: 'https://example.com/share?u=%URL%&title=%TITLE%&image=%IMAGE%',
        width: 400,
        height: 500,
    ],
};

See index.html for examples.

You may wish to (i.e. you probably should) replace the href attribute with an actual URL. See below.

Sharelinks is an ES6 Class so you should be able to use require or import in a ES6/browserify/webpack/whatever type situation.

Are options are set per-link by using data attributes. Available options are as follows:

The social media platform to share on. Available options are: facebook, twitter, linkedin, whatsapp, tumblr.

The width and height of the popup window.

By default the URL in the href of the link is used.

The title of the page being shared. By default the title of the current window is used. Only used by LinkedIn.

Overrides the URL of the image to share. By default the image defined in <meta property="og:image" content="THIS BIT HERE"> is used. Only used by Pinterest.

To increase accessibility, Sharelinks will replace the href attribute of the selected links so that opening links in a new window will work. However If you want the links to work without javascript then you should manually populate the href attribute. You can find the URLs easily at the top of Sharelinks.js - just replace %URL% and %TITLE% with url-encoded versions of the url and title of the page you wish to share.

Install dependencies

npm install

Compile automatically as you work

npm run start

Build for production

npm run build