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

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

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

  • Bookmark
  • Sumbit to Hatena
  • Sumbit to Livedoor
  • Sumbit to Yahoo!
  • Sumbit to Digg
  • Sumbit to StumbleUpon
  • Sumbit to Delicious
  • Sumbit to Technorati
  • Sumbit to Reddit
  • Sumbit to Mixx



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

ダウンロード

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>

おまけ

日本向けに、はてな・ライブドア・ヤフーのみボタンを作成しました。
ダウンロード(右クリックから「画像を保存」)してご自由にお使い下さい。
BookmarkSumbit to HatenaSumbit to LivedoorSumbit to Yahoo!

無地も作成しておきましたので自作したい方はどうぞ。
nonenone48px

コメントはまだありません

コメントは管理者の承認後に表示されます




Comment