Simple, customizable social sharing buttons
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
dist
docs
src
.eslintrc
.gitignore
bower.json
bundles.json
changelog.md
gulpfile.js
license.md
package-lock.json
package.json
readme.md

readme.md

Shr

Simple, clean, customizable sharing buttons.

Donate to support Shr

Checkout the demo

Why?

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.

Implementation

Check docs/index.html and docs/dist/docs.js for an example setup.

CDN

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

<link rel="stylesheet" href="https://cdn.shr.one/1.1.1/shr.css">
<script src="https://cdn.shr.one/1.1.1/shr.js"></script>

CSS

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 a request.

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

HTML

TBC. Shr uses progresive enhancement to add functionality to existing HTML. This means the links will still function with JavaScript disabled. For now please see the demo for example HTML.

JavaScript

Much of the behaviour of the player is configurable when initialising the library. Here's an example of a default setup:

<script src="dist/shr.js"></script>
<script>shr.setup();</script>

Options

TBC

Browser support

Safari Firefox Chrome Opera IE9 IE10+

Issues

If you find anything weird with Shr, please let us know using the GitHub issues tracker.

Author

Shr is developed by @sam_potts / sampotts.me

Donate

Shr costs money to run, not my time - I donate that for free but domains, hosting and more. Any help is appreciated... Donate to support Shr

Thanks

Fastly

Thanks to Fastly for providing the CDN services.

Copyright and License

The MIT license.