はてなブックマークとヤフーブックマークを設置する：MTOSで行こう！Movable Type Open Source

ソーシャルブックマークとは、何度も見るWEBサイトのURLアドレスを登録しておく「ブックマーク」「お気に入り」をネットワーク上に保存し、他のユーザと共有するサービス。ユーザはツールバーなどを使って通常のブックマークと同じ感覚でサイトを登録することができる。Webブラウザのブックマーク機能とは似ているようで意味がまったく違う。ブラウザのブックマークはそのコンピュータでしか見られないが、ソーシャルブックマークサービスに登録した自分のブックマークはインターネットにつながっていればどのコンピュータからでも閲覧できる。また、公開設定にすると、他のユーザもそのソーシャルブックマークに登録されたWEBサイトを閲覧することができる。

ソーシャルブックマークには、ヤフーブックマーク、はてなブックマークなど複数のサービスがある。ここでは代表的な「はてなブックマーク」と「ヤフーブックマーク」を設置する方法を説明する。

全ページに特定のタグを貼り付ける必要があるため、MTタグを使って記述することにした。はてなブックマークの設置方法は静的記述だがヤフーブックマークの記述はジャバスクリプトになっている。

カスタマイズデータを利用すると、ウィジェットセットの「3カラムのサイドバー(メイン)」の一番下に「ソーシャルブックマーク」が貼り付けてある。

上記の状態から、「ソーシャルブックマーク」の右にある「編集」という文字をクリックすると中身が編集できる。その「ソーシャルブックマーク」のウィジェットモジュールの中身は以下のとおり。

<div class="widget-archive widget-archive-category widget">
<h3 class="widget-header">ソーシャルブックマーク</h3>
<div class="widget-content">

<MTIf name="main_index">
はてなブックマーク：　
<a
href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>" rel="nofollow"><img
src="http://b.hatena.ne.jp/bc/de/<$MTBlogURL$>" class="bcounter"
alt="はてなブックマーク数" title="はてなブックマーク数" /></a>　
<a
href="http://b.hatena.ne.jp/entry/<$MTBlogURL$>" rel="nofollow"><img
src="<$MTBlogURL$>hatenaentry.gif" width="16" height="12"
style="border: none;" alt="はてなブックマーク" title="はてなブックマーク" /></a>　
<a
href="http://b.hatena.ne.jp/entry/<$MTBlogURL$>" rel="nofollow"><img
src="http://b.hatena.ne.jp/entry/image/<$MTBlogURL$>"
alt="はてなブックマーク" /></a><br />
</MTIf>
<MTUnless name="main_index">

<MTIfArchiveType archive_type="Category">
はてなブックマーク：　
<a
href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>" rel="nofollow"><img
src="http://b.hatena.ne.jp/bc/de/<$MTBlogURL$>" class="bcounter"
alt="はてなブックマーク数" title="はてなブックマーク数" /></a>　
<a
href="http://b.hatena.ne.jp/entry/<$MTArchiveLink$>" rel="nofollow"><img
src="<$MTBlogURL$>hatenaentry.gif" width="16" height="12"
style="border: none;" alt="はてなブックマーク" title="はてなブックマーク" /></a>　
<a
href="http://b.hatena.ne.jp/entry/<$MTArchiveLink$>" rel="nofollow"><img
src="http://b.hatena.ne.jp/entry/image/<$MTArchiveLink$>"
alt="はてなブックマーク" /></a><br />
</MTIfArchiveType>

<MTIfArchiveType archive_type="Individual">
はてなブックマーク：　
<a
href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>" rel="nofollow"><img
src="http://b.hatena.ne.jp/bc/de/<$MTBlogURL$>" class="bcounter"
alt="はてなブックマーク数" title="はてなブックマーク数" /></a>　
<a
href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" rel="nofollow"><img
src="<$MTBlogURL$>hatenaentry.gif" width="16" height="12"
style="border: none;" alt="はてなブックマーク" title="はてなブックマーク" /></a>　
<a
href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" rel="nofollow"><img
src="http://b.hatena.ne.jp/entry/image/<$MTEntryPermalink$>"
alt="ブログはてなブックマーク" /></a><br />
</MTIfArchiveType>
</MTUnless>
ヤフーブックマーク：
<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(window.location.href)+'&opener=bm&ei=UTF-8','popup','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0);"><img width="12" height="12" alt="Yahoo!ブックマークに登録" src="<$MTBlogURL$>ybm16.gif" /></a>
<script src="http://num.bookmarks.yahoo.co.jp/ybmno.php" type="text/javascript"></script>user
<br />
<a href="<$MTBlogURL$>" target="_top"><$MTBlogName$></a><br />
</div>
</div>