今まで割と殺風景だった当ブログですが、今日からはてなブックマークなどのソーシャルブックマークへの登録アイコンを追加しました。
どうせ追加するならいっぱいゴロゴロ並べてやろうと思ったのですが、意外にそういう情報がまとまってなくて追加先を探すのに苦労したので、ここにメモしておきます。
MovableTypeのテンプレートにコードを追加すればいいだけです。
現在のところ追加先は以下のようになっています。
Googleブックマーク
Yahoo!ブックマーク
livedoorクリップ
newsing（ニューシング）
Choix（チョイックス）
Buzzurl [バザール]
イザ！ブックマーク
FC2ブックマーク
ニフティクリップ
del.icio.us
はてなブックマーク
Yahoo!ブックマークなど、公式にはJavaScriptを使用するようにされているものも、JavaScript無しに書き換えています。
ページタイトルやURLをJavaScriptで取得するようになっているのですが、それだと記事毎のページにしか設置出来ないためです。（出来なくはないけどIf文付けるのめんどくさい）
以下が設置方法です。
●設置方法
１．画像収集
アイコン画像を適当に取ってきて、適当なところに置いてください。
※当サイトからの直リンクはご勘弁を
２a．テンプレートタグ追加
テンプレートの、ブックマークアイコンを追加したいところに以下のコードを書き込みます。
[画像を置いたパス]の箇所は、それぞれ画像ファイルを置いたパスに書き換えてください。
※読みにくいため空行を間に入れていますが、実際には空行は必要ありません。
<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<$MTEntryPermalink$>&title=<$MTEntryTitle$> (<$MTBlogName encode_html="1"$>)"><img src="[画像を置いたパス]google.gif" alt="この記事をGoogle Bookmarksに登録する" border="0" /></a>
<a href="http://srd.yahoo.co.jp/BMK/sec=bm/R=aore/bmtype=url/**http%3A//bookmarks.yahoo.co.jp/action/bookmark%3Fu=<$MTEntryPermalink$>%26t=<$MTEntryTitle$>(<$MTBlogName encode_html="1"$>)%26r=url%26v=1"><img src="[画像を置いたパス]ybm16.gif" alt="この記事をYahoo!ブックマークに登録する" border="0" /></a>
<a href="http://clip.livedoor.com/page/<$MTEntryPermalink$>"><img src="[画像を置いたパス]clip.gif" alt="この記事を含むlivedoorクリップ" border="0" /></a>
<a href="http://newsing.jp/nbutton?<$MTEntryTitle$> (<$MTBlogName encode_html="1"$>)&url=<$MTEntryPermalink$>"><img src="[画像を置いたパス]newsingit_s.gif" alt="この記事をnewsingに登録する" border="0" /></a>
<a href="http://www.choix.jp/bloglink/<$MTEntryPermalink$>"><img src="[画像を置いたパス]choix_it.gif" alt="この記事をChoixに登録する" border="0" /></a>
<a href="http://news.ecnavi.jp/entry/<$MTEntryPermalink$>"><img src="[画像を置いたパス]buzzurl.gif" alt="この記事をBuzzurlに登録する" border="0" /></a>
<a href="http://www.iza.ne.jp/bookmark/add/regist/back/<$MTEntryPermalink$>"><img src="[画像を置いたパス]iza_ico.gif" alt="この記事をイザ！ブックマークに登録する" border="0" /></a>
<a href="http://bookmark.fc2.com/search/url?url=<$MTEntryPermalink$>"><img src="[画像を置いたパス]fc2_ico.gif" alt="この記事をFC2ブックマークに登録する" border="0" /></a>
<a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle$> (<$MTBlogName encode_html="1"$>)"><img src="[画像を置いたパス]nifty_ico.gif" alt="この記事をニフティクリップに登録する" border="0" /></a>
<a href="http://del.icio.us/1?url=<$MTEntryPermalink$>"><img src="[画像を置いたパス]delicious.gif" alt="この記事をdel.icio.usに登録する" border="0" /></a>
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img src="[画像を置いたパス]hatena.gif" alt="この記事を含むはてなブックマーク" border="0" /></a>
私の場合は最後のところにはてブの登録ユーザー数も表示するようにしているので、以下も追加してあります。
複数箇所に設置したい場合は、モジュール化すると便利です。
一応その方法も書いておきます。
２b．テンプレートモジュール化
※モジュール化しない場合はこの工程は要りません。
テンプレートの「モジュール」を選び、「モジュールを新規作成」をクリックします。
テンプレート名を適当に入力してください。私は“ブックマーク”としました。
「モジュールの内容」欄に、上（２a）のコードを書き込みます。
保存します。
次に、各テンプレートのブックマークを追加したい箇所に以下を追加します。
当ブログの場合は、メインページ、エントリー・アーカイブ、カテゴリー・アーカイブ、日付アーカイブにそれぞれ追加しました。
３．再構築
再構築したら終了です。
お疲れ様でした。
【ご注意】
実は私ははてなブックマーク、Yahoo!ブックマーク以外のIDを持っていませんので、そういうサイトは実際に試していません。
おかしい挙動をするようでしたら教えてください。
【補足】
当コードはMovableType以外でも利用可能です。
ただ、<$MTEntryTitle$>や<$MTEntryPermalink$><$MTBlogName encode_html="1"$>はそれぞれ「エントリータイトル」「エントリーのURL」「ブログ名」となっていますので、書き換えて使用してください。