このブログにも設置してある「はてなブックマークウィジェット」が、タイトルが長すぎる場合に勝手に省略されるのをなんとかしてみます。
はてブの元データの中身を確認
まず、どの段階でタイトルが省略されているかを確認します。
このブログのはてなブックマークデータ（JSON）
http://b.hatena.ne.jp/entrylist/json?url=http://rrvf.blogspot.com
上記のURLから取得できるデータが、はてなブックマークウィジェットで利用されるデータになります。このデータを取得する時点で、タイトルが省略されてしまっているのが確認できます。
上記のデータ元からだとどうすることもできないので、他の方法を使います。
RSSから取得してみる
はてなで公開されているAPIは、JSONの他にRSSも利用することが可能です。
このブログのはてなブックマークRSS（XML）
http://b.hatena.ne.jp/entrylist?mode=rss&url=http://rrvf.blogspot.com
RSSから取得するデータでは、タイトルが省略されないので使用できそうです。
しかし、ここで問題になるのが「Access-Control-Allow-Origin Header」です。JSONでは、外部サイトからのデータ読み込みが行えるのに対して、フィード(XML)の場合は、配信元が許可するヘッダを出力してくれない限り不可能です。
もちろん自前でサーバを用意できればすぐに解決できるのですが、この問題のために用意するはもったいないです。
Google Feed API を使ってみる
ここで天下のGoogleさんの出番です。
JSON Developer's Guide for the Google Feed API - Google Feed API - Google Developers
この「Google Feed API」は、フィードをXMLからJSONに変換して出力する機能を持っています。今回はこれを利用してみます。
ヘルプにしたがってURLを作ってみると、以下のようになります。
URLがエンコードされてしまっているので、理解し難いことになっていますが、以下のようなURL構成となっています。
https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=取得するエントリ数&q=はてなブックマークのRSSアドレスこれでデータの準備ができたので、jQuery.ajaxなどで読み込んであげれば問題なく利用が可能です。
データからはてブ数が消えてる…
しかし、この「Google Feed API」を通してRSSをJSONに変換すると一番重要な、はてなブックマーク数がデータから消えてしまいます。
この問題は、はてなが公開している別のAPIで代用が可能です。
http://b.hatena.ne.jp/entry/image/http://rrvf.blogspot.com/2011/11/android-40.html
上記のように「http://b.hatena.ne.jp/entry/image/+記事のURL」という形式のURLから、はてブ数の画像版が取得できるので、Google Feed APIから取得したJSONと組み合わせれば無事解決となります。
ここまでできてしまえばもう簡単ですよね？
[2014.1.20 追記] このはてなブックマーク数画像は、レスポンスが非常に悪いです（最大600msのレイテンシ）。よってこのブログでは挿入しない設定になっています。
参考までに
最後にこのブログで使っているJavascriptを見てみます。
var q = {url: "http://hogehoge.com/", sort: "count", element: "#hatebu", filterWords: "hoge"};
jQuery.ajax({
type: "get", dataType: "jsonp",
url: "https://ajax.googleapis.com/ajax/services/feed/load",
data: {
v: "1.0", num: "20",
q:"http://b.hatena.ne.jp/entrylist?mode=rss&sort=" + q.sort + "&url=" + q.url
},
success: function(data) {
var entries = data.responseData.feed.entries, li = "";
for(var i=0, length = entries.length; i < length; i++) {
var e = entries[i];
e.title = e.title.replace(q.filterWords, "");
li += "<li><a href=\"" + e.link + "\">" + e.title + "</a>" + "<span class=\"hatena-bookmark-count\"><a href=\"http://b.hatena.ne.jp/entry/" + e.link + "\"><img src=\"http://b.hatena.ne.jp/entry/image/" + e.link + "\"/></a></span></li>";
}
jQuery(q.element).append("<ul>" + li + "</ul>");
}
});
一番最初に宣言している"q"という部分で設定を行っています。設定値は以下の通りです。
- url : サイトのトップアドレス
- sort : "count"(はてブ数順) 又は "all"(新着順)
- element : はてなブックマークを挿入するHTML要素
- filterWords : 指定した文字列を取得したタイトルから削除する
これでこのブログの右側に表示されている、はてなブックマークウィジェットと同じような感じにできると思います。