Async Sharing Buttons (G+, Facebook, Twitter)
Some of these services already (smartly) provide their scripts in an async fashion, this just combines them into more efficient, organized, and understandable code.
(function(doc, script) {
var js,
fjs = doc.getElementsByTagName(script)[0],
frag = doc.createDocumentFragment(),
add = function(url, id) {
if (doc.getElementById(id)) {return;}
js = doc.createElement(script);
js.src = url;
id && (js.id = id);
frag.appendChild( js );
};
// Google+ button
add('http://apis.google.com/js/plusone.js');
// Facebook SDK
add('//connect.facebook.net/en_US/all.js#xfbml=1&appId=200103733347528', 'facebook-jssdk');
// Twitter SDK
add('//platform.twitter.com/widgets.js');
fjs.parentNode.insertBefore(frag, fjs);
}(document, 'script'));I found it going through some site code and I forget exactly who originally did it but it seems like a Nicolas Gallagher or Mathias Bynes kind of thing. Correct me if I'm wrong.
You'll need the HTML in place for the scripts to put their stuff:
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<div class="g-plusone" data-size="medium" data-count="true"></div>
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-action="recommend"></div>
Why are you passing ‘script’ into the anonymous function?
That’s explained here: http://mathiasbynens.be/notes/async-analytics-snippet In this case, there’s no real run-time performance gain, it only saves a few bytes. Passing
documentavoids scope lookups though, and thus slightly improves run-time performance.So, it would seem if he had made the incoming parameter a single letter, and especially since he used it more than once, it would save quite a bit more bytes. In this example, it doesn’t really help much…
i like that, very usefull. Thank you very much.
Hey Chris,
You’re right — this is Nicolas’s generic async script loader function based on my research on the subject (and on the Google Analytics snippet in particular).
:)
One thing worth mentioning is that these will still hold up document complete (loaded). Aaron Peters refactored it slightly to wait on window load before firing to handle that.
http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough
That change doesn’t affect the user experience at all, though. See the comments on that article.
There is a better way to add button!
Basically create a locally hosted image sprite for all social icons. Put some API for count fetching. You will get much lighter and cleaner code (without iframes, etc)
We already have a WordPress plugin to add sharing buttons for various social sites as proof of concept.
Its called rtSoical – http://wordpress.org/extend/plugins/rtsocial/
Thats really great to see this! Perfect combination of javascript with the right CSS code.
Better than plugins because plugins usually increase the load time
Why using
id && (js.id = id);instead ofif(id) js.id = id;?It doesn’t save bytes and the second one is a bit more readable, I think.
Nice script anyway.