はてブとTweetボタンをつけたのでメモ

被ブクマ、被Tweet数とか載せてみたいけどほぼ全てのページで0だから0の時は表示されないようにできないかなーと調べてたら、API使ってできそうなのでやってみた。

(8/21 単数形と複数形に分けるように修正(参考:jQuery を使って各 SBM サービスからのブクマ数を取得して表示してみた | Unformed Building)、他全体的に書き換え)


(2013/5/30 Topsy APIによるカウントは有料のAPI keyが必須になった模様。いちおう30日の無料期間あり。)

上記ページのコードをちょろっと書き換えて使わせてもらいました。

被Tweet数を表示(Topsy APIを利用)
function topsyUrlinfoCallback(json) {
    var target_element = document.getElementById('topsy_tweets_counter');//埋め込み先タグのID
    if ( !target_element ) {
        return false;
    }
    
    if ( json.response.trackback_total ) {
        var link_url = json.response.topsy_trackback_url;
        link_url = link_url.slice(0,-17);//クエリを削除
        var user = (json.response.trackback_total > 1) ? ' tweets' : ' tweet';
        target_element.innerHTML = '<a href="' + link_url + '">' + json.response.trackback_total + user + '</a>';
    }
}
script = document.createElement('script');
script.type = 'text/javascript';
script.src  = 'http://otter.topsy.com/urlinfo.js?callback=topsyUrlinfoCallback&url='+jQuery("link[rel=canonical]").attr("href");
document.getElementsByTagName('head')[0].appendChild(script);
はてなブックマーク用に書き換え
function MyCallbackFunction(val) {
    var target_element = document.getElementById('hb_counter');//埋め込み先タグのID
    if ( !target_element ) {
        return false;
    }
    
    if ( val ) {
        var user = (val > 1) ? ' users' : ' user';
        target_element.innerHTML = '<a href="http://b.hatena.ne.jp/entry/' + jQuery("link[rel=canonical]").attr("href").slice(7) + '">' + val + user + '</a>';
    }
}
script = document.createElement('script');
script.type = 'text/javascript';
script.src  = 'http://api.b.st-hatena.com/entry.count?url='+jQuery("link[rel=canonical]").attr("href")+'&callback=MyCallbackFunction';
document.getElementsByTagName('head')[0].appendChild(script);
Tweetボタン
サンプル(修正前の画像なので”1tweets”になってますが実際は”1tweet”になります)

Tweet数表示のCSSは下記。

span#topsy_tweets_counter a {
  color: #fff;
  font-size: 90%;
  font-weight:bold;
  background-color: #3b87bd;
  background: -moz-linear-gradient(center top, #68b1e6 11%,#008CD2 69%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.11, #68b1e6),color-stop(0.69, #008CD2));
  padding: 2px 5px;
  border-radius: 3px;
  box-shadow: 1px 1px 1px #aaaaaa;
}
span#topsy_tweets_counter a:hover {
  color: #ccc;
}

いつも通り「とりあえず動くのでOK」の精神でやってますのでそのへんはご了承ください。URLは正規化したものを使ったほうがいいみたいなのでjQueryでlink rel=canonicalから持ってくるようにしてます。おれは素人なのでクエリとかhttp://とか削除するのにslice使ってるんですがもっとスマートにできるんですかね……

あとせっかくなので公式のボタンも貼り付けたら、はてブもTwitterもHTML5じゃないとValidにならないコードだったのでとりあえずヘッダのあたりだけ書き換えてページのほうもHTML5 Validにしてみた。http-equiv="Content-Script-type" content="text/javascript"のところでエラーが出る理由がなかなかわからなかったんですが、どうやらJavaScript以外を使うのでなければ指定しなくてよいそうです。

その他役立ちそうなリンク

%d人のブロガーが「いいね」をつけました。