Any self respecting web developer out there probably has the same problem I do, share buttons don’t play well together.
Here is an example screenshot from Backup Box
It seems kind of ok at first, except that none of the bubbles are the same size. Google is the worst for this, at least the vertical height of the Facebook, Twitter, LinkedIn, and Buffer widgets are equal.
Ignoring bubble size, lets look at how I implemented this.
First up, Facebook:
1 2 3 4 5 6 7 8 | <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_GB/all.js #xfbml=1&appId=210899475625228"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> |
<div class=”fb-like” data-href=”http://www.mybackupbox.com” data-send=”false” data-layout=”box_count” data-font=”verdana” style=”top:-3px;right:-1px”></div>
I need to add a div for them, for whatever reason, then paste in a bunch of wonky JS to get the right tags and link to their script. The final part is the actual like div, which I expect. They make use of the HTML5 compliant data attributes, which is awesome. You’ll notice that I had to modify the styles to actually line it up with the other widgets. One should not have to do that. You’ll also notice that their JS source is a nice // instead of http or https, this gets around browser rules about insecure content. More about this later.
Next we have Twitter, they’re my second favourite:
1 2 3 | <a class="twitter-share-button" data-url="http://mybackupbox.com" data-via="BackupBox" data-text="Scheduled transfers between FTP and Dropbox, and lots more!" data-count="vertical">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> |
Twitter uses an a tag instead of an, no big deal. They also make use of data attributes, so thumbs up. I add a line of javascript but I still have to actually write some JS instead of just linking… *sigh*
Now Google:
1 2 3 4 5 6 7 8 9 10 | <div class="g-plusone" data-size="tall" data-href="//mybackupbox.com"></div> <script type="text/javascript"> window.___gcfg = {lang: 'en-GB'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> |
What the heck? 10,000 engineers can’t come up with something a bit simpler than this? I’ll give them credit for using a sprite (since if you manually change the height of their iframe in the console you can see all the images), but not much else. Data attributes are good. Tons of stupid javascript is not.
LinkedIn, the best share button implementation on the internet!:
1 2 3 | <script src="//platform.linkedin.com/in.js" type="text/javascript"></script> <script type="IN/Share" data-url="http://mybackupbox.com" data-counter="top"></script> |
Damn, that was simple! Two lines! There is ONE problem with LinkedIn’s implementation that I’ll mention further down.
Last but not least is Buffer. These guys are new to the scene, doing an awesome job, so I try to support them:
1 2 3 | <div style="display:inline; margin-left:5px"><a href="http://bufferapp.com/add" data-text="Scheduled transfers between FTP and Dropbox, and lots more! via @BackupBox" data-url="http://mybackupbox.com" data-count="vertical">Buffer</a> <script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script></div> |
Ok, Buffer does a great job too, following in the footsteps of Twitter and LinkedIn, no doubt. Their only mark against them is they don’t support HTTPs. I actually had removed them from our homepage at the time of writing because of this.
The BIGGEST problem that ALL of these buttons have is that they don’t support a data-href without a protocol prefix, ie. //. Every one, excluding Google+ requires me to specific http:// or https://. This is a serious problem if you have an SSL certificate. For example, Facebook discriminates likes between https and whether you include the www prefer in your domain. There’s a potential four different like counts the we can have. I can either change the code to https://mybackupbox.com and lose our likes or leave it as http://www.mybackupbox.com and retain them. I shouldn’t have to make this decision 
For new companies like Buffer, having their javascript link not support SSL means that I have to remove them or have the “mark of the beast” beside my URL.
"Mark of the beast 2.0"
A few things to mention. A good share button will have:
- One <div> tag where the button will go
- One <script> link to an external file
- All settings are defined using HTML5 data attributes
- Support for non-prefixed links to their scripts, eg. //twitter.com/plugin.js
- Support for non-prefixed data-href links for their buttons so developers are forced to choose.
This post barely scratches the surface when it comes to share buttons. We’re only using the bubble count style and each widget has multiple form factors. Hopefully these companies can get it together and standardize on things. Maybe that’ll be my next project? Who knows.
If you liked this post you should follow me on Twitter: @EricWarnke
You should also check out our latest project, http://mybackupbox.com
