Grow your CSS skills. Land your dream job.

Last updated on:

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>

Comments

  1. Why are you passing ‘script’ into the anonymous function?

  2. i like that, very usefull. Thank you very much.

  3. 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

  4. 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/

  5. Permalink to comment#

    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

  6. Why using id && (js.id = id); instead of if(id) js.id = id; ?
    It doesn’t save bytes and the second one is a bit more readable, I think.

    Nice script anyway.

  7. Phil
    Permalink to comment#

    Hi
    Little question: the script works like a charm but the trade off for me was giving up the twttr variable. Now I’d like to implement the google analytics for the twitter button (Link) so I really need it.
    What is on your eyes the best way of getting this capability while remaining generic and clean at the same time?
    Thanks

  8. Permalink to comment#

    I’m a newbie in ASYNC and maybe I don’t completely understand it but…

    I did a small test to compare load time/size using ShareThis (http://www.sharethis.com/get-sharing-tools/) and the ASYNC method above loading in all the needed JS for sharing…

    With 5 sharing buttons (FB, LinkedIn, Pinterest, Google + and Twitter) the load size increased about 5% using the method above.

    Might be worth doing your own test but this answered some questions for me. I concluded that using ShareThis helped performance when using several share buttons. I can’t say the same in the case of using one or two select buttons.

    Would this be a proper conclusion or am I missing the point of ASYNC?

  9. Permalink to comment#

    hello Async Loaded the jquery.min.js but working?? this

    script async src=’/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/

    no works :( and this
    (function(){var po=document.createElement(‘script’);po.type=’text/javascript';po.async=true;po.src=’ bla bla';var s=document.getElementsByTagName(‘script’)[0];s.parentNode.insertBefore(po,s)})();
    eny idea?,,

  10. Permalink to comment#

    In answer to Matt,

    As far as I know, the purpose of Async code is not to make the social buttons load faster or smaller, but rather to prevent the load time of the social buttons from slowing down the load time of the rest of the page. Since the social buttons have to contact several different servers (facebook, google, twitter,etc.) it can take extra time to load those. In a traditional loading manner, the whole page stops loading until the buttons load. This way, the buttons and the page can load at the same time, so that the load speed of the major page content is not negatively affected.

    Great article. Thanks Chris.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".