「ブックマークに追加」 ボタン応用編

以前のエントリーで紹介した、小技の効いた 「ブックマークに追加」 ボタンですが、コメント欄にて同一ページ内に複数の追加ボタンを設置するには？というご質問を頂いたので、返答エントリー。

基本的な設置方法について詳しくは、先のエントリーを参考にしていただきたいのですが、同一ページ内に複数の「ブックマークに追加」ボタンを設置する時に変更しないといけないのが、ボタン表示用の HTML ソース内に指定された id 属性の値と、menu.js の内容になります。

いちいち説明するのもなんですので、いきなりソースから。ちなみに今回は、Movable Type で構築した Blog で、トップページやカテゴリー / 日付アーカイブページなどエントリーが一覧表示されるようなページに設置する場合を想定しています。

まずは、ボタンの HTML ソース。

<MTEntries>
 <ul class="add_bookmarks_block">
  <li><a href="#" onmouseout="ad<$MTEntryID$>.hidePopup('ad<$MTEntryID$>')" onmouseover="ad<$MTEntryID$>.showPopup('ad<$MTEntryID$>')" title="各種ブックマークに追加"><img src="/img/icon/add-bookmarks.gif" width="14" height="14" alt="各種ブックマークに追加" /></a>
   <ul id="ad<$MTEntryID$>" style="display:none" onmouseout="ad<$MTEntryID$>.hidePopup('ad<$MTEntryID$>')" onmouseover="ad<$MTEntryID$>.showPopup('ad<$MTEntryID$>')">
    <li><a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>" rel="nofollow" title="Hatenaブックマークに追加"><img src="/img/icon/hatena.gif" width="16" height="16" alt="Hatenaブックマークに追加" /></a></li>
    <li><a href="http://del.icio.us/post?url=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="del.icio.usに追加"><img src="/img/icon/delicious.gif" width="16" height="16" alt="del.icio.usに追加" /></a></li>
    <li><a href="http://pookmark.jp/post?url=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="POOKMARK Airlinesへ追加"><img src="/img/icon/pookmark.gif" width="18" height="16" alt="POOKMARK Airlinesへ追加" /></a></li>
    <li><a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="livedoorクリップへ追加"><img src="/img/icon/livedoor_clip.gif" width="16" height="16" alt="livedoorクリップへ追加" /></a></li>
    <li><a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="ニフティクリップへ追加"><img src="/img/icon/nifty_clip.gif" width="16" height="16" alt="ニフティクリップへ追加" /></a></li>
    <li><a href="http://bm.saaf.jp/bm/add?url=<$MTEntryPermalink encode_url="1"$>" rel="nofollow" title="Saafブックマークへ追加"><img src="/img/icon/saaf.gif" width="16" height="16" alt="Saafブックマークへ追加" /></a></li>
    <li><a href="http://newsing.jp/nbutton?title=<$MTEntryTitle encode_url="1"$>&url=<$MTEntryPermalink$>" rel="nofollow" title="newsingへ投稿"><img src="/img/icon/newsing.gif" width="16" height="16" alt="newsingへ投稿" /></a></li>
    <li><a href="http://www.choix.jp/bloglink/<$MTEntryPermalink$>" rel="nofollow" title="Choixへ追加"><img src="/img/icon/choix.gif" width="16" height="16" alt="Choixへ追加" /></a></li>
    <li><a href="http://www.furl.net/storeIt.jsp?t=<$MTEntryTitle encode_url="1"$>&u=<$MTEntryPermalink$>" rel="nofollow" title="Furlへ追加"><img src="/img/icon/furl.gif" width="16" height="16" alt="Furlへ追加" /></a></li>
    <li><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="Blinklistへ追加"><img src="/img/icon/blinklist.gif" width="16" height="16" alt="Blinklistへ追加" /></a></li>
    <li><a href="http://reddit.com/submit?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" rel="nofollow" title="Redditへ追加"><img src="/img/icon/reddit.gif" width="16" height="16" alt="Redditへ追加" /></a></li>
   </ul>
  </li>
 </ul>
</MTEntries>

これで、エントリーごとに異なる id 属性がふられたボタン設置ソースが生成されます。一番最初の class 属性はもともとのソースでは id 属性だったところですが、これはボタンの動作とは関係ありません。1ページに複数設置されるので、重複不可な id 属性から、class 属性に変更しています。

そしてお次は、menu.js ですが、こいつも Movable Type ならテンプレート化して簡単に。インデックステンプレートとして、テンプレートを新規作成し、下記のソースを貼り付けてください。

//Timeout your Mouseovers (http://www.pjhyett.com/articles/2006/07/05/timeout-your-mouseovers)
<MTEntries>
 var ad<$MTEntryID$> = {
  timeout : null,
  showPopup : function(){
   clearTimeout(this.timeout);
   if($('ad<$MTEntryID$>').style.display == 'none'){
    this.timeout = setTimeout(function(){new Effect.BlindDown('ad<$MTEntryID$>', {duration:.3, fps:40})},400);
    }
   },
 hidePopup : function(){
  if($('ad<$MTEntryID$>').style.display == 'none'){
   clearTimeout(this.timeout);
  }else{
   this.timeout = setTimeout(function(){new Effect.BlindUp('ad<$MTEntryID$>', {duration:.3, fps:40})},300);
   }
  }
 }
</MTEntries>

出力ファイル名を 「menu.js」 にして保存すれば完了。

あとは、menu.js、prototype.js、effects.js を <head> ～ </head> 内で読み込むようにテンプレートを修正し、エントリーを投稿すれば OK。

あと、サンプル CSS 内の

ul#add_bookmarks_block

という記述は、

ul.add_bookmarks_block

に変更してください。