ホーム > Web > はてブとTweetボタンをつけたのでメモ

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

2011/04/18 00:29
Web
CSS | HTML | JavaScript | Twitter | はてな

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

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

Topsy API を使ってブログに「つぶやかれ数」を自由にレイアウトする [C!]

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

被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以外を使うのでなければ指定しなくてよいそうです。