動的に作成したエントリにはてなスターをつける
JavaScriptで動的に作成したエントリに、はてなスターをつけられるようにするサンプルです。
HatenaStar.jsを取り込むと、ドキュメントロード時に指定されたルールに従ってはてなスター対象となるエントリが検索され、☆追加ボタンや☆数の表示が行われますが、JavaScriptなどでロード後に動的にエントリを作成した場合、何もしないとはてなスターの対象になりません。
まぁ、エントリの作成後に
Hatena.Star.EntryLoader.loadNewEntries(node);
してやれば表示されるらしいんですが(→はてなスター日記 HatenaStar.jsを更新しました(技術者向け))、更新のたびにエントリの再スキャンが走るのはもったいないなーと思って、API呼び出しでダイレクトに追加するようにしてみました。
ということで、実装は次のような感じです。
// 認証用トークン Hatena.Star.Token = '3af70277d2a57880e4b63ae5a4c99e5d86a9c866'; var ROOT = "http://unageanu.sakura.ne.jp/blog-samples/080323/"; var id = 0; /** * はてなスターがつけられるエントリを動的に作成する。 * -エントリをJavaScriptで動的に追加し、 * -はてなスターのボタンと☆数を表示する。 */ function nextEntry() { if (id > 5) { id=0; } // エントリを作成 var str = '<div>' str += 'エントリー' + id + ' : '; str += '<span id="add_star' + id + '"></span>'; str += '<span id="comment' + id + '"></span>' str += '</div>'; document.getElementById("entry").innerHTML = str; // はてなスター対象として登録。 var c = Hatena.Star.EntryLoader; var uri = ROOT + "#" + id; var entry = new Hatena.Star.Entry({ uri: uri, title: "エントリー" + id, star_container: document.getElementById('add_star' + id), comment_container: document.getElementById('comment' + id) }); // ☆追加ボタンなどを表示 entry.showButtons(); // ☆情報を取ってきて表示。 c.entries = [entry]; c.getStarEntries(); id++; }
HatenaStar.jsのAPIをいろいろ直呼びしています。HatenaStar.jsの内部実装が変わると動かなくなる可能性があるのが難点。やっぱ「loadNewEntries()」を使ったほうがいいのかなー。