102012 2月

TumblrにGoogleAnalyticsとツイート/はてブ/いいね！/ぐぐたすを追加する方法

「最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた」を元にして、Tumblr用にしてみた。

  1. GoogleAnalyticsのコードを取得する。
  2. カスタマイズページでHTMLを編集する。

スクリプト部

UA-XXXXXXXX-Xの部分はGoogleAnalyticsで取得したコードを使用する。


//*********************
//  ソーシャルブックマークボタンのスクリプトと、Google Analytics をまとめて1ヶ所で非同期ローディング
//*********************
(function(w,d){
    w._gaq=[["_setAccount","UA-XXXXXXXX-X"],["_trackPageview"]];
    w.___gcfg={lang:"ja"};
    var c,e=d.createDocumentFragment(),f=d.getElementsByTagName("script")[0],
    a=function(a,b){if(!d.getElementById(b)){c=d.createElement("script");
    c.src=a;c.id=b||null;c.async=true;e.appendChild(c);}};
    a(("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js");
    a("https://apis.google.com/js/plusone.js");
    a("//b.st-hatena.com/js/bookmark_button_wo_al.js");
    a("//platform.twitter.com/widgets.js");
    a("//connect.facebook.net/ja_JP/all.js#xfbml=1","facebook-jssdk");
    f.parentNode.insertBefore(e,f);
})(this,document);

HTML部

{block:Posts}～{/block:Posts}の間に記載する。 XXXXXXはTwitterのID。無くても大丈夫だと思う。


<!-- Hatena -->
<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard" data-hatena-bookmark-url="{Permalink}">
    <img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="はてブに追加" width="20" height="20" style="border: none">
</a>
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="{Permalink}"
data-text="{block:PostSummary}{PostSummary}{/block:PostSummary}{block:IndexPage}{block:Title}{Title}{/block:Title}{block:Link}{Name}{/block:Link}{/block:IndexPage}"
data-via="XXXXXX">Tweet</a>
<!-- Google plusone -->
<div class="g-plusone" data-size="medium" data-href="{Permalink}"></div>
<!-- Facebook -->
<div class="fb-like" data-href="{Permalink}" data-layout="button_count" data-send="false" data-width="120" data-show-faces="false"></div>

「Google+」以外はテストしました。

「はてブ」はオプトアウト版ですのでご安心ください。

Posted: 3ヶ月前 | Tags: tumblr facebook Twitter | Notes: 14

＜＜
＞＞
Share
  1. dance-till-day-breakがbetatからリブログしました
  2. hot125がatm09tdからリブログしました
  3. betatがsatsea77からリブログしました
  4. atm09tdがsatsea77からリブログして、コメントを追加しました:
    ...ソーシャルブックマークボタンのスクリプトと、Google...
  5. satsea77の投稿です