Simple Fast Custom Social Buttons With Counters – Shr.js

Preview:

Description:

Shr.js is a simple, lightweight JavaScript library used for generating customizable, semantic, fully accessible and SVG based social share buttons on the webpage.

How to use it:

Load the required JS and CSS files in the document.

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

<span class="button-addon">
  <a href="https://cssscript.com" target="_blank" class="button button-github" data-shr-network="github">
      <svg><use xlink:href="#shr-github"></use></svg>Star
  </a>
</span>
<span class="button-addon">
  <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcssscript.com" target="_blank" class="button button-facebook" data-shr-network="facebook">
      <svg><use xlink:href="#shr-facebook"></use></svg>Share
  </a>
</span>
<a href="https://twitter.com/intent/tweet?text=Simple+sharing+buttons+for+social+networks.&amp;url=http%3A%2F%2Fcssscript.com&amp;via=sam_potts" target="_blank" class="button button-twitter" data-shr-network="twitter">
  <svg><use xlink:href="#shr-twitter"></use></svg>Tweet
</a>
<span class="button-addon">
  <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fcssscript.com&amp;media=http%3A%2F%2Fplacehold.it%2F500x500&amp;description=Simple+sharing+buttons+for+social+networks." target="_blank" class="button button-pinterest" data-shr-network="pinterest">
      <svg><use xlink:href="#shr-pinterest"></use></svg>Pin it
  </a>
</span>
<span class="button-addon">
  <a href="https://plus.google.com/share?url=http%3A%2F%2Fcssscript.com" target="_blank" class="button button-google" data-shr-network="google">
      <svg><use xlink:href="#shr-google"></use></svg>+1
  </a>
</span>

Initialize the Shr.js.

shr.setup();

Load SVG defs.

(function(d, u){
  var x = new XMLHttpRequest(),
      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");

All default config.

selector: '[data-shr-network]', // Base selector for the share link
count: {
    classname: 'share-count', // Classname for the share count
    displayZero: false, // Display zero values
    format: true, // Display 1000 as 1K, 1000000 as 1M, etc
    position: 'after', // Inject the count before or after the link in the DOM
    increment: true, // Increment the count on click?
    html: function(count, classname, position) {
        return '<span class="' + classname + ' ' + classname + '--' + position + '">' + count + '</span>';
    },
    value: {
        facebook: 'share_count',
        github: 'stargazers_count',
    },
    prefix: {
        github: 'data',
    },
},
urls: {
    facebook: function(url) {
        return 'https://graph.facebook.com/?id=' + url;
    },
    pinterest: function(url) {
        return 'https://widgets.pinterest.com/v1/urls/count.json?url=' + url;
    },
    github: function(repo, token) {
        return (
            'https://api.github.com/repos' + repo + (typeof token === 'string' ? '?access_token=' + token : '')
        );
    },
},
popup: {
    google: {
        width: 500,
        height: 500,
    },
    facebook: {
        width: 640,
        height: 270,
    },
    twitter: {
        width: 640,
        height: 240,
    },
    pinterest: {
        width: 750,
        height: 550,
    },
},
storage: {
    key: 'shr',
    enabled: (function() {
        // Try to use local storage (it might be disabled, e.g. user is in private mode)
        try {
            var key = '___test';
            window.localStorage.setItem(key, key);
            window.localStorage.removeItem(key);
            return true;
        } catch (e) {
            return false;
        }
    })(),
    ttl: 300000, // 5 minutes in milliseconds
},
tokens: {},

Changelog:

v1.1.0 (08/19/2018)

• Added increment option for on click to add 1 to the count (if supported). This assumes the share was successful of course
• Cleaned up the default CSS for the buttons etc and freshened the styles slightly.
• Fixed bug with before count option not displaying correctly
• Removed the need for a countainer around the button and count (beware, this may result in wrapping)
• Fix for Facebook API change