Social sharing buttons have been around for a few years now. They’re ridiculously popular for three reasons:
- They bring traffic to your site, for free
- They’re super easy to integrate
- They’re hosted, so no additional HTTP connections are required of your server to display them
What’s amazing to me though, is that almost every website I visit hasn’t implemented them properly. Have you ever sat and waited 15 seconds for a website to load, while the status bar at the bottom reads: waiting for http://platform.twitter.com?
This happens often, and it’s so easily avoidable. What’s happening is platform.twitter.com is tackling a very large load at the time, and requests are processed very slowly. You have absolutely no control over this, because it’s a hosted button. I’m not just picking on Twitter, I’ve seen this happen with Facebook, Pinterest and Google Plus. Knowing this, care should be taken in determining when and how the hosted sharing button is loaded.
When you insert the following code into your site:
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
You’re telling your web browser, “STOP! Load the twitter widget and don’t do anything else until you do!” Yikes, that’s really placing a lot of faith in Twitter.
It usually goes deeper than that. I often see:
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
The code above goes beyond instructing your browser to stop, drop and load, it says to your website visitors, “Displaying the social buttons on this site is far more important than putting our products and services in front of you – so please, like us on Facebook!”
Those that are aware of this issue many times opt to place their entire block of social button code at the very bottom of the site, then simply display it via absolute or fixed positioning in their CSS. This is one step closer to perfection, but it still mixes HTML with JavaScript, and is not a very elegant solution.
The next step closer is to place all of the script tags at the bottom of the site – now you’re getting there. But, there’s a better way still, the asynchronous way. If the code you copy/paste for your share button doesn’t load it asynchronously, you can easily modify it to do so. The final, perfect way to load social buttons follows:
<div id="social">
<div class="sbutton"><fb:like layout="button_count" show_faces="false" font=""></fb:like></div>
<div class="sbutton"><a href="http://twitter.com/share" class="twitter-share-button" >Tweet</a></div>
<div class="sbutton"><g:plusone size="medium"></g:plusone></div>
<div class="sbutton"><su:badge layout="2"></su:badge></div>
<div class="sbutton"><script src="" type="text/javascript"></script><a class="DiggThisButton DiggCompact"></a></div>
<div class="sbutton"><a href="http://bufferapp.com/add" class="buffer-add-button" data-count="horizontal" data-via="SiteKickr">Buffer</a></div>
</div>
<div id="fb-root"></div>
<script type="text/javascript">(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=437150472976137"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">(function() { var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = ('https:' == document.location.protocol ? 'https:' : 'http') + '://platform.twitter.com/widgets.js'; s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(node, s); })();</script>
<script type="text/javascript">(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = ('https:' == document.location.protocol ? 'https:' : 'http') + '://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>
<script type="text/javascript">(function() { var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true; li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s); })();</script>
<script type="text/javascript">(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'http://widgets.digg.com/buttons.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>
<script type="text/javascript">(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'http://static.bufferapp.com/js/button.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>
As a bonus, here’s a quick CSS snippet that will fix the social bar to the bottom of your site. This is easily adjusted to fix it to the left side of your site, simply by changing the bottom and left styles.
#social { position: fixed; bottom: 0; left: 50%; margin-left: -350px; padding: 4px 0;
border: 1px solid #000; border-bottom: 0; border-radius: 5px 5px 0 0;
background-color:#eff3fa; z-index: 100000; }
#social .sbutton { float: left; margin: 0 1em; }