异步分享按钮 (G+、Facebook、Twitter)

Avatar of Chris Coyier
Chris Coyier

其中一些服务已经(明智地)以异步方式提供其脚本,这只是将它们组合成更有效、更井然有序、更易于理解的代码。

(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('//127.0.0.1/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'));

我是在浏览一些网站代码时发现的,我不记得是谁最初做到了这一点,但它看起来像尼古拉斯·加拉格尔或马蒂亚斯·拜恩斯的作品。如果我错了,请纠正我。

你需要在 HTML 中放置好脚本才能让它们放置内容

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