Lightweight custom sharing buttons

Last month I wrote a post about Shareaholic's sharing buttons and the extra page weight that comes with them. Rather than simply moan about the situation I decided to build my own sharing buttons tool. It's incredibly simple and offers no particular features, but it's very lightweight, simple to implement and a good starting point.

You can see an example of it in action on the side of this very page. It's pretty straightforward - a chunk of HTML, associated CSS and a few SVG files, combined with a script that figures out the current page's URL and inserts it into the links accordingly. And yes, I know it overlaps the side of the page a bit on smaller screens, but for the purposes of this example that doesn't matter to me.

If you can't be bothered to set up sharing buttons and don't care about tracking or anything it's ideal - and why would you? Frankly, there's enough tools out there already that do that for free - see for example this site I found on my first google. I see my total number of site shares is currently zero. Splendid.

Anyway, the code is on my github if anyone's interested. The code in the repo isn't responsive (although the example on this page is, if you want some hints) - I leave that, and much more customisation, up to you.


I've recently improved this code by adding responsive styles and further sharing button customisation. Specifically, the code now extracts content such as the page title and description from the metadata tags, and uses them in the appropriate place for the sharing links. For example, sharing on Twitter now creates a new tweet containing both the page meta description and the link to the original page.

Plus, the buttons are now hidden by default until the page has finished loading, at which point they are configured and shown, so it's no longer possible to click on them before they're ready to use.

Having extended it like this, this code is now proving extremely useful, particularly if you're building something for a client and don't know what URL they're eventually going to put it on. Hope you find it useful.


This article is tagged with