先日はてなから、ページに付いたブックマークのコメントを表示するブログパーツが公開されました。「自分のブログには付いているかな？」と調べてみた
ところ、わずか2件ではあるもののブックマークされていました。旧ドメインのqp3c.comでは15件もありました。小さなブログではありますが、なんとなく記事が役に立っているのでしょうか・・・ということで、今回コメントを表示するようにしてみました。
ブログパーツの解説ページを見てみると、アメーバブログやFC2ブログなど各種ブログサービスへの設置方法は掲載されていますが、自分でタグを組み上げて構築するMovableTypeの設置方法はありません。調べてみたところ詳細な解説ページに、ライブドアブログでの設置を例にカスタマイズする方法が掲載されていました。
<head>～<head>に下記を記述
<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.hatena-bookmark-marker', 'div.article-body-inner', 'div.blogbody div.mainmore', 'div.blogbody div.main', 'div.entry-body-main'];
HBBlogParts.insertPosition = 'after';
HBBlogParts.permalinkSelector = [ 'div.hatena-bookmark-marker a', 'div h3 a', 'h2.title a', 'h2.entry-title a', '.posted a' ];
HBBlogParts.permalinkPathRegexp = /\/archives\/\d+\.html$/;
HBBlogParts.permalinkAttribute = 'href';
</script>
コメントを表示させたい部分に下記を記述
<div class="hatena-bookmark-marker"><a style="display:none;" href="<$ArticlePermalink$>"></a></div>
結果として、パーマリンクの正規表現を指定する HBBlogParts.permalinkPathRegexp の内容をhtmlから当ブログを出力しているphpに変更、コメント出力部分でパーマリンクを設定するaタグのリンク先をライブドアブログ独自のタグ <$ArticlePermalink$> からMTでのパーマリンクを出力する <$MTEntryPermalink$> に変更することで表示できました。
細かな設定方法として、パーマリンクを取得する HBBlogParts.permalinkSelector と HBBlogParts.permalinkAttribute の替わりに、HBBlogParts.perlmalinkURI で取得するURIを直接指定できるとあります。
そこで、HBBlogParts.permalinkSelector と HBBlogParts.permalinkAttribute の記述を削除、HBBlogParts.perlmalinkURI に<$MTEntryPermalink$> でパーマリンクを指定してみました。
この方法だと、表示させたい部分のdivタグで囲まれたaタグは不要になり、また、HBBlogParts.commentInsertSelector でクラスを当てた既存のタグを表示部分として指定することで、divタグも不要となります。
表示部分に hoge というクラスを当てたdivタグを設置、ページをphpで出力した当ブログでのソースコードは下記のようになりました。
<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.hoge';
HBBlogParts.insertPosition = 'after';
HBBlogParts.perlmalinkURI = '<$MTEntryPermalink$>';
HBBlogParts.permalinkPathRegexp = /php$/;
</script>
こんなことを書きつつ、JavaScriptが全く分からないので記述方法が合っているのかちょっと不安・・・
