jQueryとはてなブックマークエントリー情報取得APIを使ってURLのサムネイル表示をする

サンプル

http://www3.plala.or.jp/y2y/hatena_api_1/ にあります！

[必要なもの]

jQuery

jQuery本体をダウンロードしてきてもいいのですが、面倒なのでgoogleの提供するajaxのapiを使います。
ヘッダ(〜)に以下を追記します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>

jQuery Tooltip plugin 1.3.0

上のリンクからjquery.tooltip_1.zipをダウンロードして以下の２つのファイルを使います。

jquery.tooltip.js
jquery.tooltip.css

実際に使うときはこんな感じでヘッダに以下を追記します。

<link rel="stylesheet" href="./jquery.tooltip.css" />
<script type="text/javascript" src="./jquery.tooltip.js"></script>

jQuery Tooltip pluginはjQueryでツールチップ表示を可能にするプラグインです。
cssファイルはツールチップのスタイルが書いてあるので、実際に使う場合は自分で書き換えるといいと思います。

[jQuery Tooltip pluginの使い方]

jQuery Tooltip plugin 1.1までは、ツールチップを表示させる場合 aタグの中のtitle属性に書くことで動いていましたが、
1.3からは引数にキーと値の組み合わせからなるハッシュを指定する仕様になっています。(Javascriptらしくなった)
主なキーを以下に書いておきます。他にも色々ありますが、ここではこの5つを使います。

bodyHandler: 　ツールチップにするDOMを定義する。ほぼこれで用が足りると思う。
track: 　trueにするとマウスオーバ時にツールチップがマウスに追従する。
delay: 　ツールチップが始まるまでの時間(ミリ秒)
showURL: 　trueにすると自動的にツールチップにurlを挿入する
fade: 　フェードイン・フェードアウト時間(ミリ秒)

使用例

//urlTitleはURLのタイトル
//screenshotUrlStringはスクリーンショットのURL
$("#hoge").tooltip({         //idがhogeのところに対してtooltipを表示させる
        bodyHandler: function() {    //ツールチップ用に返すDOMをこんな感じで定義する
            var thumbnail = $("<div />");
            $(thumbnail).append(urlTitle + "<br />")
                            .append($("<img />").attr("src",screenshotUrlString));
            return thumbnail;
        },
        track: true, 
        delay: 0, 
        showURL: true, 
        fade: 250 
});

[はてなブックマークエントリー情報取得APIからjQueryで情報を取得する]

はてなブックマークエントリー情報取得APIはタイトルやはてなブックマークのタグなどの情報が返ってくるのですが、
実ははてなスクリーンショットの情報なども返ってきます。
JSONPによるコールバックでJSONの情報が返ってくるのでjQuery.ajax()を使います。
jQuery.ajax()についての情報はここを見ると詳しいことが書いてあるので省略します。

使用例

$.ajax({
        url : "http://b.hatena.ne.jp/entry/json/",
        dataType : "jsonp",
        data : {
                url : urlString
        },
        jsonp : "callback",
        success : function(json){
                //json.titleには対象のURLのタイトルが、
                //json.screenshotには対象のURLのスクリーンショットが格納されている
                if(json!==null && json.title!==null){
                    //大きなスクリーンショットにする
                    var hatenaScreenshot =  json.screenshot.replace('/120x90/', '/200x150/');
                    //タイトルが長い時は省略する
                    var urlTitle = json.title.substr(0,60);
                    //※※※※
                    //ここでツールチップの情報をtooltip()によって書き換える処理を入れる
                    //hatenaScreenshotとurlTitleを引数としたメソッドで上のtooltip()を呼び出せばよい
                    //ここでは仮にtooltipUrl()とする
                    tooltipUrl(hatenaScreenshot,urlTitle);
                }
        },
        error : function(){}
});

これで上のページみたいなものが作れると思います！

はてなブックマークされていないページでは使えませんが、
大抵の有名なページは既にはてなブックマークされているので意外と使えると思います。