Social networks are everywhere online. Share, like and tweet buttons are popping up on a lot of webpages these days. The social buttons however have a big impact on the performance of a website. They load a ton of resources and slow down websites.
In this post I'll tell you why I hate these social buttons so much. I'll also walk you through the process of building the static share buttons that I use on my website.
Impact on performance
So why do I hate these social buttons so badly? Let me demonstrate my hate towards these buttons. I created two empty HTML pages and inserted the code for a Share button and Tweet button. The results speak for themselves:
|Facebook share button||Load Time||1.42 seconds|
|DOM Content Loaded||243 ms|
|Twitter Tweet button||Load Time||2.74 seconds|
|DOM Content Loaded||224 ms|
Simply adding a Facebook Share button makes your website load 1.42 seconds longer and 147KB bigger. Keep in mind that I disabled my cache to perform these tests. Most people probably have a cached version of these resources, so they load faster. These buttons also load asynchronously so they don't block page rendering (thank God!).
Still, they add a lot of bulk to your webpages. I compared these numbers with those for my website's homepage. I cried when I saw the results:
|Savjee.be (with Google Analytics enabled)||Load Time||494ms|
|DOM Content Loaded||314ms|
|Savjee.be (with Google Analytics disabled)||Load Time||295ms|
|DOM Content Loaded||287ms|
(My website uses Gzip compression to make sure pages are as small as possible. Read more here.).
If I would integrate a share button on my homepage, I would make my page 6 times heavier (going from 21.7KB to 168.7KB). And that's only the Facebook button! Let's say I want to add Twitter and Google+ as well.
I'm sorry, but that's unacceptable to me!
Many might not care about loading an additional 57 or 147 KB. But I do! I hate loading more resources than actually necessary. These buttons might not have a big impact on modern computers with high-speed internet connections. The story is different when you load these social buttons on a smartphone with a much slower Egde or 3G connection. I want my website to be fast no matter where you live, what device you're using or how fast your internet connection is.
Easy solution: static!
The simplest solution to this problem is using static share buttons. I've used a static Tweet button on my website for a couple of months now. The idea is easy: create a button and use the Twitter share URL like this:
This share URL takes 3 parameters:
url: The URL to tweet (this should be URL encoded!).
text: The text that should be placed before the url.
via: A Twitter username of the author. This will be appended to the tweet as 'via @Savjee'.
Facebook has a similar URL that allows you to share stories:
Making the buttons count!
Both Facebook and Twitter have a URL that let's you check how many shares or tweets a given link has. Twitter's URL is not officially supported (read: might break in the future) but has been working for quite some time. You can use one of the following URLs:
I borrowed most of the code from David Walsh's blog post. I just wrapped everything in one object.
Note that you can use a regular Ajax request for retrieving the share count from Facebook. This works because Facebook sets the Access-Control-Allow-Origin header to
*. Sadly you can't use the same technique for Twitter since they don't set that header. Shame!
Designing the buttons
I started looking around for a design for my social buttons. I wanted a simple design that's flat and didn't include any images (retina-friendly!). I found a nice set of social buttons on Dribble designed by Maki Myers. I downloaded his code and refactored it so it doesn't use floats or relative positioning.
Here's the HTML code that I use on my website for the social buttons:
There are some Liquid tags in this piece of HTML code that are being filled in by Jekyll. I previously wrote a blog post on static blogging with Jekyll. By default URLEncoding is not available in the Liquid templating engine but you can add it using this simple filter.
My modified CSS code looks like this:
The buttons are rendered correctly on every type of device. No need for responsive CSS. However, the only thing I did for my website is increase the size of the buttons for mobile devices. This makes them easier to tap:
Result & Limitations
Here's a screenshot of the finished product:
You can see them in action at the bottom of each blog post on my website.
You can have static share buttons for a number of social networks. Want Google+, LinkedIn, Pintrest, ...? Then check out this gist for additional information on other social networks.
Sadly, you can't have a static Like button. This requires the Facebook SDK.
The source code is available on GitHub. Check it out: https://github.com/Savjee/static-social-buttons.