Author: | Selz |
---|---|
Views Total: | 156 views |
Official Page: | Go to website |
Last Update: | August 19, 2018 |
License: | MIT |
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.&url=http%3A%2F%2Fcssscript.com&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&media=http%3A%2F%2Fplacehold.it%2F500x500&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