Share Button: Simple & Stylish Share Button

Share Button is a really simple and elegant share button for your website. No iframes, no JavaScript from the social platforms, and a beautiful compact layout. You can see an example here.

Installation

Download share-button.min.css and share-button.min.js from here. Then include the CSS file in the header of your website:

<link rel='stylesheet' href='path/to/share-button.min.css'
    type='text/css' media='all'/>

And include the JavaScript file before the closing </body> tag:

<script src="path/to/share-button.min.js"></script>

On your pages, include the <share-button></share-button> element where you want the share button to be rendered.

Finally, you’ll want to instantiate it:

$( document ).ready(function() {
  new ShareButton();
});

Options

In most cases, you’ll want to pass a few options when instantiating the share button. See here for a list of options. And here’s a quick example showing some options:

new ShareButton({
 networks: {
    whatsapp: {
      enabled: false
    },
    googlePlus: {
     enabled: false
    }
  },
 ui: {
    flyout: 'middle right'
    }
});

👉 There’s currently a bug in Chrome for the share button where the SVG icons don’t show up properly. See this issue thread for a fix.