2009年12月25日にリリースされた「はてなブックマークブログパーツ」をブログ Movable Type につけてみた。
ブログサービスをお使いの方は、利用しているブログのボタンを押すだけでコードが取得できる。それを貼り付けるだけ。
Movable Type や WordPress などブログソフトウェアでは、
を参考に以下のコードをブログ記事のテンプレートに貼り付け設置。新しくテンプレートモジュールを作成して管理もいいだろう。
<script type="text/javascript" charset="utf-8" src="http://b.hatena.ne.jp/js/bookmark_blogparts.js">
</script>
<script type="text/javascript">
HBBlogParts.commentInsertSelector = 'div.hateana-bookmark-comment';
HBBlogParts.permalinkSelector = 'div.asset-header h1 a';
HBBlogParts.permalinkAttribute = 'href';
HBBlogParts.permalinkPathRegexp = /\/archives\/\d+\.html$/;
</script>
<div class="hateana-bookmark-comment"></div>
設定は以下の4つが最低限必要。
- 「HBBlogParts.commentInsertSelector」にコメントが挿入される DOM Element を CSS セレクタで指定。「div.hateana-bookmark-comment」にしてみた。
- 「HBBlogParts.permalinkSelector」にブログのパーマリンクが記載されている DOM Element を CSS セレクタで指定。標準のままのテンプレートなら「div.asset-header h1 a」で可。
- 「HBBlogParts.permalinkAttribute」に HBBlogParts.permalinkSelector で取得した要素のどこにブログのパーマリンクの URL が記載されているか属性を指定。
- 「HBBlogParts.permalinkPathRegexp」にブログのパーマリンクにマッチする正規表現。アーカイブマッピングによって正規表現を調整。
ほかにも細かな設定が可能だ。デザインもスタイルシートで設定できる。