Social sharing buttons without the pain

This post from the team caught my eye the other day, and in particular this quote (which got bounced around Twitter a lot):

We prioritise rigorously based on evidence of user need, and this particular feature has been queued for a long time because zero end users have ever requested it, and all users in several rounds of guerrilla testing were able to share GOV.UK links to social networks easily by copying and pasting them.

Nothing surprising there; users aren't demanding this feature because they can already do for themselves what this feature does. However, having buttons right there on the page removes a little friction, and the visual prompt could encourage more people to share the page — that would surely be good news for almost any site.

The trouble is, using the embedded widgets for social sharing (e.g. the Twitter "Tweet Button") is a bit of a performance problem.

The problem

I tested this quickly by measuring the performance of a page containing only the embedded widgets for Twitter, Facebook1, Google+ and Pinterest. If you care about front-end performance, you won't like the results2:

Screenshot of Chrome DevTools network tab showing 41 requests, 395KB transferred and 19.73s load time

As well as the performance problem (which in my opinion is a deal-breaker on its own) there is also privacy to think about — all of these widgets track the user to one degree or another, and as distaste for this sort of thing becomes more common, you don't want to be seen as complicit.

The solution

Happily, it is possible to have social sharing buttons without these downsides, because although they'd very much prefer you to use their custom embedded widgets, the four social services I mentioned a moment ago all offer a way to share content via a good old-fashioned URL with query string parameters:

Service URL Query Params Details
Twitter url, text, via, related Intents
Pinterest url, media, description Pin It Button
Facebook u Share Button
Google+ url Share Link

These URLs will redirect the user to the normal/mobile version of the service as appropriate, so whether your site is responsive or you have separate sites, the URLs will always be the same.

Using these URLs, the markup for a social share module will look something like this:

<div class="sharethis">
    <h2>Share this</h2>
    <ul class="group">
        <li><a class="twitter" href=";text=About+David+Goss&amp;via=davidjgoss&amp;related=davidjgoss">Twitter</a></li>
        <li><a class="pinterest" href=";description=About+David+Goss">Pinterest</a></li>
        <li><a class="facebook" href="">Facebook</a></li>
        <li><a class="googleplus" href="">Google+</a></li>

As for styling, you have a blank slate, so you can do whatever is best for your site. This way, the buttons won't look awkward next to one another or stick out from the rest of your site's design. If you want to include icons, all the popular sets and fonts have them, and if you want to get the brand colours right, here's a cheat sheet:

Service Hex RGB
Twitter #00B0ED 0,176,237
Pinterest #CC2127 204,33,39
Facebook #3B5998 59,89,152
Google+ #DF4A32 223,74,50

If you need inspiration for the styling, several designers on Codepen have come up with great concepts:

With the performance and privacy downsides now removed, adding these social buttons to a site should be a lot more palatable than before.

  1. Facebook makes this difficult; unlike the other three services, you have to be logged in to a Facebook account (which I don't have, so I had to use my wife's) in order to generate a share button. This seems like a needless hoop to make developers jump through. 
  2. In fairness, these widgets have been improved a lot. If I'd done this exercise a couple of years ago, the results would undoubtedly been much worse.