Web Development

小技の効いた 「ブックマークに追加」 ボタン

サイトリニューアルの際に、旧デザインで各エントリーページに付けていた、hatena ブックマーク、del.icio.us 等ソーシャルブックマークへの追加ボタン...

公開日
更新日

ソーシャルブックマークサイトリニューアルの際に、旧デザインで各エントリーページに付けていた、hatena ブックマーク、del.icio.us 等ソーシャルブックマークへの追加ボタンをはずしてそのままにしていたのですが、これを再度掲載することに。

その際、単にアイコンを並べただけでは味気ないので、ちょこっと小技を効かせてみました。

ブックマークへの追加

実物はエントリータイトル横のアイコンにマウスオンしてもらえればわかるかと思いますが、せっかくなのでソースとか公開。

2007年12月14日 追記
サイトリニューアルでボタンが変わったので、サンプルを下記に移動しました。

さて、今回の材料は、

  • アイコン画像
  • JavaScript ファイル 3種
  • 本ボタンの XHTML ソース
  • 本ボタン用 CSS の追加

JavaScript ファイルはマウスオン、オフ時の動きを制御するために使用。これは 「PJ Hyett」 で公開されている 「Timeout your Mouseovers」 をカスタマイズ。 「Timeout your Mouseovers」 はマウスオーバーのタイムアウトを利用してロールオーバーアクションを制御してくれるスクリプト。

PJ Hyett サイトのサンプルでは、JavaScript コードを HTML ファイル内に直記述してあるのですが、今回は、「menu.js」 という名前で外部ファイルに。さらに、こいつを動かすには 「prototype.js」 と 「effects.js」 の JavaScript ライブラリが別途必要です。

で、上記の材料一式は下記にすべてまとめて置いてありますのでよろしければどうぞ。

材料がそろったところで調理開始です。まずは 3つの JavaScript ファイルとアイコン画像をサーバにアップ。解凍した zip ファイル内の 「add_bookmark_icon」 フォルダにある 「js」、「img」 フォルダをドメインのルートディレクトリにアップすれば OK。

お次にボタンの XHTML ソースをページ内に追加します。今回は各エントリーアーカイブのページにボタンを配置するわけですが、当サイトは Movable Type を使用しているので、エントリーアーカイブテンプレートに下記のソースを追加します。

<ul id="add_bookmarks_block">
 <li><a href="#" onmouseout="add_bookmarks.hidePopup('add_bookmarks')" onmouseover="add_bookmarks.showPopup('add_bookmarks')" title="各種ブックマークに追加"><img src="/img/icon/add-bookmarks.gif" width="14" height="14" alt="各種ブックマークに追加" /></a>
  <ul id="add_bookmarks" style="display:none" onmouseout="add_bookmarks.hidePopup('add_bookmarks')" onmouseover="add_bookmarks.showPopup('add_bookmarks')">
   <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>

追加する場所はお好みで。当サイトの場合は、このページのソースを見ていただければわかりますが、ボタンのソース自体はエントリー本文の下に記述されています。

次に同じくエントリーアーカイブテンプレートの <head> ～ </head> 内に 3つの JavaScript ファイルを読み込みます。

<script src="/js/menu.js" type="text/javascript"></script>
<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/effects.js" type="text/javascript"></script>

これで、エントリーアーカイブテンプレートを再構築すれば、ボタンが現れ、マウスオンでボタンが現れるはず。うまくいかない場合は画像や JavaScript のパスなどを確認しましょう。

あとはスタイルを定義してあげるだけ。先ほどの zip ファイル内にサンプル CSS が入れてありますのでそのまま使ってもらえれば、当サイトのものと同じ見た目になります。

ただ、スタイルの中に

ul#add_bookmarks_block {
   margin:0;
   padding:0;
   text-align:center;
   list-style:none;
   position:absolute;
   top:32px;
   left:390px;
   width:30px;
   }

という記述がありますが、この中の

   position:absolute;
   top:32px;
   left:390px;

は、ウチのサイトのタイトル横に表示させるための position 指定ですので、そのままだと変なところにボタンが配置されると思います。そこは適当にいじってください。

Firefox、Opera、IE6、IE7 では動作確認していますが、その他の古いブラウザは知りません。あと Mac はさっぱりなので、もし Mac 使いの方がいましたら確認お願いします。（他力本願）

10月25日 追記
「newsing」、「Choix」、「Saaf ブックマーク」への登録ボタンを追加しました。

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか？

Ofuse でおやつをおごる

関連記事