思わずブックマークしたくなるスクリプトShareBox

2009年8月3日
Posted by Daisuke
JavaScript

これは秀逸です。とてもカワイイ。
こんなものが貼ってあった日には思わずブックマークしてしまいたくなりますよね。

AjaxライブラリはjQueryを使用。

※このサンプルにはブックマークリンクを設定してありません

ダウンロード

Create fancy share box with CSS and jQuery – Janko At Warp Speed

Ajaxライブラリjquery-1.3.2.min.jsを別途用意する必要があります。
jQueryダウンロード
ダウンロード後、解凍したShareBoxフォルダに入れてください。

実装手順

Shareboxフォルダを丸ごとアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。

<script type="text/javascript" src="http://サイトURL/ShareBox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://サイトURL/ShareBox/sharebox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sharebox").sharebox();
});
</script>
<style type="text/css">
ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;}
ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute; }
ul.sharebox li a { margin:0 0 0 -24px; display:block; }
ul.sharebox li a:hover { margin:0 0 0 -8px; }
ul.sharebox li img { border:none;}
</style>

ShareBoxを表示させる場所に以下を記入。
ブックマークのリンク先は、それぞれのブックマークサイトで確認してください。

<ul id="sharebox" class="sharebox">
 <li><img src="http://サイトURL/ShareBox/sharethis.png" alt="Share this" /></li>
 <li><a href="ブックマークリンク"><img src="ボタン画像URL" /></a></li>
 <li><a href="ブックマークリンク"><img src="ボタン画像URL" /></a></li>
 ・
（以下同様に）
 ・
 ・
</ul>