[blogger]ソーシャルボタンのスクリプトを非同期コードを使って整理する。

段々ソーシャルボタンを増やしてきて、スクリプトの重複がないかと調べたりしているときに、

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…
ひょんなことから normalize.css のページを覗いていたら、Google Analytics、Google +1、Twitter、Facebook の各 JavaScript をまとめて非同 ...

こちらのサイトで、まとめてスクリプトの呼び出しコードを非同期にするプラスアナリティクスコードも含めてあるのを見つけて、導入してみました。

サイトでは、海外で作られた「twitter」「facebook」「google+1」「Analitycs」の非同期スクリプトに、「はてな」を加えた

<span><script>
(function(w,d){
    w._gaq=[["_setAccount","UA-XXXXXXXX-X"],["_trackPageview"]];
    w.___gcfg={lang:"ja"};
    var s,e=d.getElementsByTagName("script")[0],
    a=function(u,i){if(!d.getElementById(i)){s=d.createElement("script");
    s.src=u;if(i){s.id=i;}e.parentNode.insertBefore(s,e);}};
    a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");
    a("<a href="https://apis.google.com/js/plusone.js">https://apis.google.com/js/plusone.js</a>");
    a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
    a("//platform.twitter.com/widgets.js","twitter-wjs");
    a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
})(this,document);
</script>
</span>

こちらのコードを公開されています。

• 3行目、アナリティクスコードの「UA-XXXXXXXX-X」の部分には、使用しているアナリティクス解析用コードIDを入れて下さい。
• 12行目、「facebook」のコードはiframe版だけを使っていたら消しても大丈夫。縦並びなどで表示を「いいね」から「Like」にしたい場合は、「ja_JP」の部分を[en_US」に変更して下さい。

このコードを書けば、４つのソーシャルボタン用スクリプトは呼び出しOKになるので、公式のスクリプトコード、外部スクリプト呼び出しコードは削除出来ますので、多少すっきりするかと。

導入

私の場合、このまま書いたら、「google+1」だけ、何故か表示されず。
テスト用のブログではうまく動いたので、他の何かをぶつかってるんだろうとは思うんですが、原因が今のところ分からなかったので、「google+1」だけ、別で公式の非同期コードを書くことにしました。

<span><script>
(function(w,d){
    w._gaq=[["_setAccount","UA-XXXXXXXX-X"],["_trackPageview"]];
    var s,e=d.getElementsByTagName("script")[0],
    a=function(u,i){if(!d.getElementById(i)){s=d.createElement("script");
    s.src=u;if(i){s.id=i;}e.parentNode.insertBefore(s,e);}};
    a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js","ga");
    a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
    a("//platform.twitter.com/widgets.js","twitter-wjs");
    a("//connect.facebook.net/ja_JP/all.js#xfbml=1&amp;appId=XXXXXXXXXXXXXXX","facebook-jssdk");
})(this,document);
</script></span>
  <script type='text/javascript'>
  window.___gcfg = {lang: 'ja'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
  </script>

こんな感じです。
「google+1」分のコードを消して、後ろに公式のスクリプトコードを書いています。

facebookのコードの「~~~xfbmi=1&」の後ろに続いているのは、OGP導入時によくわからないままアプリIDと関連付けるために作ったアプリIDです。
公式とコードを見比べた時に付いていたのでくっつけていますが、実際の動きについては勉強不足。必要ないかもしれません。

どこに書くか？

このまとまったコードをどこに入れるか、少し迷いました。
スクリプトの定番？だと、「</body>」の直上だと思ったのですが、画面一番上にボタンはあるし、「</head>」でも・・・みたいに。

んで、実際表示速度を簡単に調べました。

思ったような結果になりませんでしたｗ
</head>上のほうが早いかな？って思っていたんですが。
それぞれの左側の数値が「個別ページ」、右側のものが「トップページ」です。

トップページ側は、プロフィール下につけた「likebox」が引っ掛かったような印象がありました。
likeboxに関しては、何度か動かしてみたんですが、HTML5版やXFBML版にしても押した時にコメント欄が出る様子がなかったので、動きの早いiframe版でもいいのかな？というのが現段階の印象です。

何回か試すと結果も違ってきたので（数値が逆転するとか）、位置は誤差の範囲なのかな？とも思います。実際に自分で開いてみて、早いと感じる場所でいいのかもしれませんね。