Asynchrone Sharing-Buttons (G+, Facebook, Twitter)

Avatar of Chris Coyier
Chris Coyier am

Einige dieser Dienste stellen ihre Skripte bereits (geschickt) asynchron zur Verfügung. Dies hier fasst sie in effizienteren, organisierteren und verständlicheren Code zusammen.

(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('https://apis.google.com/js/plusone.js');
    // Facebook SDK
    add('//#/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'));

Ich habe es beim Durchgehen von Website-Code gefunden und ich vergesse genau, wer es ursprünglich gemacht hat, aber es scheint eher eine Sache von Nicolas Gallagher oder Mathias Bynes zu sein. Korrigieren Sie mich, wenn ich falsch liege.

Sie benötigen das HTML vor Ort, damit die Skripte ihre Sachen einfügen können.

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