Replacing Social Media Buttons with non-JS counterparts

Social media share buttons are a bit of an expected feature on today’s websites, love them or hate them they are going to hang around for a while.

Of course like anything on the internet there are arguments for and against them from a user experience point of view but one thing that there can be no arguments about is that they cause extra load on your webpage. All the major social media share icons as supplied by the services use JavaScript hosted on their websites.

What this means in practical terms is that if you have four social share buttons on your article you are adding in at least four additional network requests to your page load, there are worse things you could be loading in, each of the major players is smart enough to serve up pretty good code, but that isn’t the point — even the most efficient code in the world still requires a network request, a download, a parse, etc. etc.

Is this an issue? Probably not on your nice high-speed broadband, but is it an issue on your phone? You betcha. The entire reason I was looking at this in the first place was I received a bug report^* for something I was working on that on some mobile browsers the page was reporting it was only 95% loaded when all assets appeared to be served and working. The asset that was not loaded was a Facebook share button and until it loaded the page was in a mobile loading state, which is not nice for the user.

At first I started looking at better ways to load in the buttons, and there are plenty of good ones (http://socialitejs.com/ looked very good) but I started thinking about what I wanted to be doing which is passing the user over to their social networking site of choice to allow them to share my content.

Then in a moment of extreme clarity I remembered that HTML5 has an element that allows you to do just that, in fact it has been in HTML for a while, that’s right, the <a> element, all I want to do is allow the user to jump onto their social network at their sharing page and all the major ones allow it and HTML has supported links for a very long time.

Here is some sample code showing the four social networks I decided to target (including the actual links used in my project, I am too lazy to change them):

Share us on
<a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ftosbourn.com">Facebook</a>
<a target="_blank" href="https://twitter.com/intent/tweet?text=Find%20a%20digital%2C%20creative%20job%20in%20%23NI%20&url=http%3A%2F%2Ftosbourn.com&via=tosbourn">Twitter</a>
<a target="_blank" href="https://plus.google.com/share?url=http%3A%2F%2Ftosbourn.com">Google+</a>
<a target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Ftosbourn.com&title=Digital%20Creative%20Jobs%20in%20Northern%20Ireland&summary=Find%20a%20job%20in%20the%20Northern%20Irish%20Digital%20Creative%20Industry&source=Digital%20Creative%20Jobs">LinkedIn</a>

Not a single line of JavaScript required.

Of course this technique does have some downsides, the first is that you don’t have access to things like share counts and features like Facebook showing you if your friends have liked an article.

The second is that you can’t get them in a nice pop-up or expanding box like you can with JavaScript, you can just send them to a page.

Both of these things I am fine with, and other issues like not being able to track clicks onto them are easily mitigated with some JavaScript feeding into your analytics package.

There is also an added bonus in that you don’t need to have Facebook/Twitter/Etc cookies coming from your website.

^*Thanks to Derek for the feedback.