Twitter ツイートボタン、Facebook いいねボタン、Google +1 ボタン、LinkedIn ボタンを非同期に表示するための HTML・JavaScript コード

1-load-sdks.html

<!-- JavaScript SDK の非同期読み込み。Facebook のみ App Id が必要 -->

<script src="http://platform.twitter.com/widgets.js" async></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1&appId=123456789012345" async></script>
<script src="http://apis.google.com/js/plusone.js" async></script>
<script src="http://platform.linkedin.com/in.js" async></script>

2-social-buttons.html

<!-- ソーシャルプラグインボタンを Ajax など非同期で設置する -->

<div class="social-buttons">
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/path/to.html"></a>
  <div class="fb-like" data-href="http://example.com/path/to.html" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial"></div>
  <div class="g-plusone" data-size="medium" data-href="http://example.com/path/to.html"></div>
  <script type="IN/Share" data-url="http://example.com/path/to.html" data-counter="right"></script>
</div>

3-run-sdks.js

// 非同期に追加した要素に対して、JavaScript で各ソーシャルプラグインを呼び出す

// ページ内を全て走査し直す場合
twttr.widgets.load();
FB.XFBML.parse();
gapi.plusone.go();
IN.init();

// ページ内のパーツ単位でレンダリングする場合
$('.social-buttons').each(function(idx, elem){
    twttr.widgets.load(elem);
    FB.XFBML.parse(elem);
    gapi.plusone.go(elem);
    IN.parse(elem); // で行けるはずだけど、エラーが出る？
});