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 probably going to hang around for a while.
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, obviously 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>
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.
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.