MovableTypeではてなブックマークのコメントを表示させてみた 

先日はてなから、ページに付いたブックマークのコメントを表示するブログパーツが公開されました。「自分のブログには付いているかな?」と調べてみたところ、わずか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が全く分からないので記述方法が合っているのかちょっと不安・・・


記事を参考にしたり興味を持たれた方はペンギンアイコンをクリックしてブログ管理人に拍手を送ってください!
管理人だけが読める秘密のコメントを投稿したい場合はアイコン下のテキストボックスに入力すると同時に送信されます。
今後の励みになりますのでよろしくお願いします!




 

 

現在の感情は?

 絵文字を使う クリックで絵文字を使用

  • サインインして投稿したコメントは即時公開されますが、サインインしない場合はスパム対策のため一旦保留とし、管理者の承認後に公開されます。
  • 英文のみの投稿やシステムがスパムと判断した内容は公開されません。また、管理者が不適切と判断したものは削除します。
  • タグは使用出来ません。
  • Gravatarによるアバター画像の表示に対応しています。
ブログパーツ
Recent Entries
Recent Comments
Categories
Monthly Archives
Information
ツイッター
Facebookページへ
ブログの更新はツイッターフェイスブックページでお知らせしています。Windows8以降のライブタイルにも対応しています。
 プロフィールページ
 メールフォーム
 フォトサムネイル
 投稿動画
 mixi
 YouTube
 ニコニコ動画
RSS