How to Add Social Media Sharing Buttons Without JavaScript

July 02, 2014

socialbuttons

If you’re like me, you are conflicted on the issue of social media buttons on your site.

  1. You want people to be able to share your content, but

  2. You hate the performance hit that comes with social media buttons

Social media buttons seem innocent enough until you look at your site loading with them. They usually add significant requests to your site loads, and result in poor performance.

Some people don’t care about such things. I’m not one of those people.

Text-based social media “buttons”

One options is to do as I have and go completely text-based on your “buttons”, meaning instead of getting the shiny icons that you see everywhere else, you instead get text saying “Like”, or “Tweet”, etc.

The advantages are compelling.

First of all, loading these “buttons” is nearly instantaneous. It’s just a few extra bytes of text in your server’s response. Another possible advantage, which I’ve not yet confirmed, is that text-based calls to action, such as, “Submit to X” may be more compelling to users than the now ubiquitous set of icons.

The code

textshare

You can see above what the links look like when they render, and I’ve included the full code for them in the Gist below:

Let me know if you have any others to add.

Notes

  1. The LinkedIn link is designed for WordPress, but can be easily modded to pull a generic link as well.

Related posts: