- Minimal JavaScript, CSS, HTML
- Mobile Responsive with JS event listener
- Doesn't load anything thirdparty on load
- Mutation observer loads pinterest share js file only when button is clicked.
- Compressed/Minified SVG icons by SuperTinyIcons (https://github.com/edent/SuperTinyIcons)
https://www.jucktion.com/share/
Upload the contents on a folder inside your server. Fix the paths to work properly
<link rel="stylesheet" type="text/css" href="css/sharer.min.css">
<div id="shrme" class="fb rdt mstdn twt pint"><div>
<script src="js/sharer.min.js"></script>
Facebook,Twitter,Mastodon,Reddit,Pinterest
Addition currently needs a little work. Many SVG icons are available on the icons folder.
.mstdn a{
background-image:url(../img/mastodon.svg);
}
allows you to display the svg icon to represent the social site
{"shd":"mstdn",
"link":"https://mastodon.social/share?text=%t+%l"}
Place the mstdn
as a classname for the JavaScript and CSS entity we created above
<div id="shrme" class="fb rdt mstdn twt pint">
shd is the shorthand to be used as CSS selector, which is used to reference a element in the html. Making it unique and same for HTML, CSS, and JS is important. Add a different shorthand for your new site, then link represents the format of share link on the said site. The %t represents the page title and %l represents the link. These are replaced accordingly through javascript.
Free to use with attribution