The default share buttons used by the social networks are not only ugly to look at (sorry, they just are) but they usually depend on iframes and all sorts of other horrible, slow code. That led to creating shr (short for share).

Features

Accessible - built right, using progressive enhancement.
Lightweight - just 1.9KB minified and gzipped.
Customisable - make the buttons and count look how you want with the markup you want.
Semantic - uses the right elements. There's no <span> as button type hacks.
Fast - uses local storage to cache results to keep things fast.
No dependencies - written in vanilla JavaScript, no jQuery required.

Oh and yes, it works with Bootstrap.

Changelog

Check out the changelog

Planned development

More networks

If you have any cool ideas or features, please let me know by creating an issue or of course, forking and sending a pull request.

Setup

To set up Shr, you first must include the Shr CSS and JS along with the sprite that contains the social icons. There are two ways you can load the CSS and JS:

CDN

If you want to use our CDN, you can use the following:

<link rel="stylesheet" href="https://shr.one/2.0.0-beta.1/shr.css" />
<script src="https://shr.one/2.0.0-beta.1/shr.js"></script>

Include Your Own Files

If you want to use the default css, add the shr.css file from /dist into your head, or even better use shr.less or shr.scss file included in /src in your build to save an HTTP request.

<link rel="stylesheet" href="dist/shr.css" />

You will also need to add the shr.js file from the /dist into your head.

<script src="dist/shr.js"></script>

Loading the Sprite

To get the beautiful images for each social network, you must include the sprite.svg that is distributed with Shr. To do this, add the following script to your document near the closing body tag:

<script>
    (function(d, u) {
        var x = new XMLHttpRequest();
        var b = d.body;

        // Check for CORS support
        // If you're loading from same domain, you can remove the if statement
        // XHR for Chrome/Firefox/Opera/Safari
        if ('withCredentials' in x) {
            x.open('GET', u, true);
        }
        // XDomainRequest for older IE
        else if (typeof XDomainRequest != 'undefined') {
            x = new XDomainRequest();
            x.open('GET', u);
        } else {
            return;
        }

        x.send();
        x.onload = function() {
            var c = d.createElement('div');
            c.setAttribute('hidden', '');
            c.innerHTML = x.responseText;
            b.insertBefore(c, b.childNodes[0]);
        };
    })(document, '../dist/sprite.svg');
</script>

What this does, is creates a new XMLHttpRequest and loads the sprite.svg file. Make sure you update the file path to the right location for your project.

The sprite.svg contains all of the SVG icons for the social networks. If you jump ahead to any of the social networks you will see a <use> tag (Ex: Google: <svg><use xlink:href="#shr-google"></use></svg>+1). The href attribute in the use references a single SVG within the sprite. We load the entire sprite so it's only one HTTP request and it speeds up your site!

Initializing

Now that everything has been loaded correctly, all you have to do is call:

shr.setup({});

You can pass a JSON object of all of the different options to this setup function.

Options

There are a ton of options that ship with Shr. These allow you to customize the library to your needs.

Debugging

Default: false

If you are are just debugging Shr in a development environment, you can turn on debugging when you setup.

shr.setup({
    debug: true,
});

Selector

Default: data-shr-network

The selector is the attribute on the element that Shr is binding to. This contains the network for the button (ex: data-shr-network="google"). You can change this if you want to use a different selector.

shr.setup({
    selector: 'data-your-selector-name',
});