sampotts/shr is a open-source project on GitHub, written primarily in JavaScript. It has 150 stars. Simple, clean, and customizable social sharing buttons.
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
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, are slow and generally heavy. That led to me creating shr (short for share).
Features
Accessible - built using progressive enhancement
Lightweight - just 3KB 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>s as buttons type hacks
Fast - uses local storage to cache results to keep things fast
No dependencies - written in "vanilla" ES6 JavaScript
Changelog
Check out the changelog
Setup
To set up Shr, you first must include the JavaScript lib and optionally the CSS and SVG sprite if you want icons on your buttons.
1. HTML
Here's an example for a Facebook button, see HTML section below for other examples.
This markup assumes you're using the SVG sprite (which is optional) and the default CSS. If you're not using either of these then you can omit the shr__* classNames completely and the <svg>. The href attribute value is used to determine the type of network. It is also used as the fallback so must be valid.
Once Shr has been initialized on a button and data has been fetched, it is manipulated as below:
Note: Shr.setup will also look for mutations of the DOM and and matching elements will also be setup if they are injected into the DOM after initial setup.
3. CSS (optional)
You don't have to use the Shr CSS. You're free to style the buttons how you like. You can either include the SASS in your build or use the CDN hosted CSS in your <head>:
Ir you want to display the icons for each social network as per the demo, you can use the included SVG sprite. If you already have a sprite system, then you can include the SVG icons as-is. Otherwise, you can use something like sprite.js.
API
A few useful methods are exposed. To call an API method, you need a reference to the instance. This is returned from Shr.setup or your call the the constructor (new Shr), e.g.:
const button = new Shr('.js-shr-facebook', { ...options });
button
.getCount()
.then(count => {
// Do something with count 😎
})
.catch(error => {
// Something went wrong 😢
});
Method
Parameters
Description
getCount()
-
Returns a Promise that will either resolve with a count or an error.
openPopup(event)
Event
Open the associated dialog. This will be blocked unless it is as a result of user input. We'd suggest calling this as the callback for addEventListener or similar and passing the relevant event.
The following needs revision.
Options
There are a ton of options that ship with Shr. These allow you to customize the library to your needs.
debug
Default: falseType: Boolean
If you are are just debugging Shr in a development environment, you can turn on debugging when you setup.
Shr.setup('.js-shr', {
debug: true,
});
count.className
Default: shr__countType: String
When adding the share count element to the screen, this is the className used to style it.
Sometimes your URL has not been shared yet. You can choose whether or not you want to display 0 shares or not. Some APIs don't allow for the actual count, so those APIs will just be a link to share (such as Twitter) and won't show the count if this is turned on or not.
By default, Shr shortens the amount of shares to an easier to read number. Say you have a URL that went viral and you have over 1 million shares. By default, Shr shows this as 1 M. You can, however, turn this off and show the exact amount of shares.
By default, the number of shares shows up after the social icon. This means it's to the right of the icon. You can change this to be before the social icon (the left of the icon) by setting this value to before.
When the user clicks the share icon, we automatically update the count. However, this is assuming that the user went through with the sharing. This is for speed and reactivity. If you don't want this behavior, you can set this value to false.
{
enabled: Boolean, // Whether storage is supported
key: String, // Key to be used in local storage - (NOTE: can't contain special characters or whitespace)
ttl: Number, // Seconds to keep the storage valid
}
To save requests and speed up your site, Shr saves all of the values used to local storage. The two keys you can set are the key of the local storage and the time to live (AKA: how long do you want these values to last before we refresh). These can be customized to your liking in the setup like.
Shr provides a ton of networks that can be used on your site. Each button has certain attributes that need to be defined in order for Shr to operate efficiently and effictively. Below are descriptions and an example of each button and how to use it.
Twitter
This button allows you to tweet a URL on Twitter. A count is not available for this button due to Twitter deciding to remove the API endpoint, for whatever reason.
When entering your URL for Facebook, make sure it's properly URL encoded! The number of shares will appear next to the button for the URL you are sharing.
GitHub
This button allows you to star a repo on GitHub and shows the current number of stars for the project.
The most recent commit recorded on sampotts/shr was 3.6 years ago, based on the GitHub push timestamp. The repository has 19 forks — one of the better signals of community interest.
How many stars does sampotts/shr have?
sampotts/shr has 150 GitHub stars — refresh the page for the live number, or check github.com/sampotts/shr. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is sampotts/shr open source?
Yes — sampotts/shr ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/sampotts/shr.
What is sampotts/shr?
sampotts/shr (sampotts/shr) is a JavaScript project on GitHub. From the project's own README: Simple, clean, and customizable social sharing buttons.
What language is sampotts/shr written in?
sampotts/shr is written primarily in JavaScript. GitHub's language field is based on the largest share of bytes in the default branch.
What license does sampotts/shr use?
sampotts/shr is released under the MIT license. Always verify the LICENSE file directly on GitHub for the authoritative terms — license strings can be edited out of sync with a project's actual stance.
Where do I read more about sampotts/shr?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/sampotts/shr is the definitive source.
Read full README in the tab above.
Still deciding about shr?
One click hands the question to an AI along with this page — see what it says about shr.
/shr
(https://www.fastly.com/)