Google, Yahoo, Delicious, はてブのブックマーク登録ボタンの作成

2010年2月14日

ソーシャルブックマークサービスはGoogle, Yahoo, Delicious, はてな等、様々な 会社が運営していますが、その設定を各社ごとに探すのは少々骨が折れます。 そこで、自分のブログにソーシャルブックマークボタンを貼り付ける方法をまとめて 紹介しようと思います。

ソーシャルブックマークボタンを付けることによって、 被リンク数が増加するのでトラフィックが増え、いろんな方から自分のブログを購読して 頂く機会が増えます。

以下に、各社のソーシャルブックマーク登録ボタンの貼り付け方を記述しておきます。
エントリタイトルを「%%title」、エントリ本文へのURLを 「%%entry_url」として記述しておきますので、 ここは皆さんの環境に合わせて独自に書き換えるようにしてください。

なお、Phactoryも本日よりブックマーク登録ボタンをエントリ末尾に表示させて頂くことと なりました。よろしくお願いしますー m(_ _)m

Yahooブックマークのボタン貼り付け方法

Yahooブックマークの登録ボタンの貼り付け例です。
以下のように記述することで、というボタンと、 このエントリをYahooブックマークを使って何人の人が登録しているのかを表示するカウンタが表示されるようになります。 改行は実際にはひとつもありませんのでご注意ください。
なお、実際の貼り付け例は、本エントリの末尾1行目にありますのでご確認ください。

1
2
3
4
5
6
7
8
9
<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t=' 
+encodeURIComponent(docu ment.title)+'&u=' 
+encodeURIComponent(location.href) 
+'&ei=UTF-8','_blank','width=550,height=480,left=100,top=50 ,scroll bars=1,resizable=1',0);">
   <img src="http://i.yimg.jp/images/ybm/blogparts/addmy_btn.gif" width="125" height="17" al t="Yahoo!ブックマークに登録" style="border:none;">
</a>
<img src="http://i.yimg.jp/images/ybm/icons/view_url.g if" width="16" height="16" alt="Yahoo!ブックマークでこのサイトを登録している人数"> 
<script type="text/javascript" src="http://num.bookmarks.yahoo.co.jp/ybmno.php"></script>
<br>

Google Bookmarks のボタン貼り付け方法

Google Bookmarksの貼り付け例です。

改行は実際にはひとつもありませんのでご注意ください。

なお、実際の貼り付け例は、本エントリの末尾2行目にありますのでご確認ください。

1
2
3
4
5
<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=%%entry_url&title=%%title" target="_blank">
   <img alt="" src="http://www.google.co.jp/favicon.ico" border="0" width="16" hei ght="16" /> 
   このページを Google Bookmarks に追加
</a>
<br>

はてなブックマークのボタン貼り付け方法

はてブ登録ボタンの貼り付け例です。
このエントリをはてブで何人の人が登録しているのかを表示するカウンタ画像も併せて記述しています。 なお、共有数が0のときは透過png画像が生成されるとのことですので、「〜users」との表示がされないからと いって慌てないでくださいね。 なお、以下の例も改行は実際にはひとつもありませんのでご注意ください。
実際の貼り付け例は、本エントリの末尾3行目にありますのでご確認ください。

1
2
3
4
5
6
7
8
<a href="http://b.hatena.ne.jp/append?%%entry_url" rel="nofollow">
   <img src="http://b.h atena.ne.jp/images/append.gif" alt="" width="16" height="12" border="0" /> 
   はてなブックマークに登録
</a> 
<a href="http://b.hatena.ne.jp/entry/%%entry_url" rel="nofollow">
   <img src="http:// b.hatena.ne.jp/entry/image/%%entry_url">
</a>
<br>

 del.icio.us のボタン貼り付け方法

最後にdel.icio.usのブックマーク登録ボタンの貼り付け例です。
なお、以下の例も改行は実際にはひとつもありませんのでご注意ください。
実際の貼り付け例は、本エントリの末尾4行目にありますのでご確認ください。

1
2
3
4
5
6
<a href="javascript:url='http://www.phactory.jp'; title='%%title'; location.href='http://del .icio.us/post?url='
+encodeURIComponent(url) 
+'&title='+encodeURIComponent(title)" rel="nofollow">
   <img src="http:// del.icio.us/static/img/delicious.small.gif" width="12" height="12" alt="" /> 
   このエントリを del.icio.us に登録
</a><br>