Webサービス連動複数のソーシャルブックマークサービス追加ボタンを一括表示
- ソーシャルブックマークとは?
- URLのエンコード方法(PHPの場合)
- URLのエンコード方法(JavaScriptの場合)
- ブックマーク追加ボタン(設置例)
- ブックマーク追加URL一覧
- ソーシャルブックマークボタン統合サービス〔AddClips beta〕
- ソーシャルブックマーク追加ブログパーツ〔sbooker〕
- ソーシャルブックマーク追加ボタン作成ツール〔Social Bookmark Button Generator〕
- ソーシャルブックマーク追加ボタン&RSSフィード購読ボタン作成ツール〔Add This〕
ソーシャルブックマークとは?
2008/1/28
ソーシャルブックマークはWeb上でブックマークを共有・管理できる、いわば公開型のブックマーク(お気に入り)です。 有名なものとしては、「del.icio.us」、「Blogmarks.net」、「はてなブックマーク」などでしょうか。
家のパソコンでも、会社のパソコンからでも、どこからでも閲覧・投稿・編集できます。 公開したくないブックマークは、非公開にすることも可能です。
タグの関連付けやサムネイル(スクリーンショットの縮小画像)が表示されるため、 ブックマークが多くなっても、検索しやすく、どれがどのサイトだったか分からなくなることもありません♪
利用するには、ハンドルネームやメールアドレス(フリーメールでOK)など簡単な登録(無料)が必要です。 登録作業は数分で完了するので、直ぐに利用できます。
自分のブックマークも公開でき、なおかつ他ユーザーのブックマークも閲覧できるので、あちこちサーフィンしながら色々なサイトを知ることができるのも魅力! RSSでお気に入りのユーザーのブックマークの新着情報を受け取ることもできます。
またユーザーがブックマークしやすいように、ブログやサイトに各ソーシャルブックのブックマーク追加ボタンを設置することもできます。
ソーシャルブックマークはたくさんあますが、個人的には、サムネイル表示タイプのBlue Dotが気に入っています。 ブルーを貴重にした無駄のないシンプルなデザインで見やすいところ、公開非公開の一括切り替えができるところがいいです。
URLのエンコード方法(PHPの場合)
2008/1/28
- mb_convert_encoding()関数を使用して文字コードを「UTF-8」に変換
- 更に、urlencode()関数を使用してURLエンコード
########## ブックマークに追加するページのURL (現在閲覧中のページのURLを動的に指定する場合) //$URL="http://".htmlspecialchars($_SERVER['HTTP_HOST'],ENT_QUOTES).htmlspecialchars($_SERVER['REQUEST_URI'],ENT_QUOTES); http://phpjavascriptroom.com/index.php?t=topic&p=bookmarks ▼エンコード▼ $encodeURL=urlencode(mb_convert_encoding($URL,"UTF-8","SJIS")); http%3A%2F%2Flocalhost%2Ftest%2Fpj_roomer%2Findex.php%3Ft%3Dtopic%26p%3Dbookmarks ########## ブックマークに追加するページのタイトル $TITLE="PHP & JavaScript Room: ソーシャルブックマーク、ブックマーク追加ボタンの設置"; ▼エンコード▼ $encodeTITLE=urlencode(mb_convert_encoding($TITLE,"UTF-8","SJIS")); PHP+%26amp%3B+JavaScript+Room%3A+%83%5C%5C%81%5B%83V%83%83%83%8B%83u%83b%83N%83%7D%81%5B%83N%81A%83u%83b%83N%83%7D%81%5B%83N%92%C7%89%C1%83%7B%83%5E%83%93%82%CC%90%DD%92u ########## ブックマークに追加するページの説明文 $DESC="PHP,JavaScript,CSS,ストリーミング動画配信方法をサンプル付きで解説。"; ▼エンコード▼ $encodeDESC=urlencode(mb_convert_encoding($DESC,"UTF-8","SJIS")); PHP%2CJavaScript%2CCSS%2C%83X%83g%83%8A%81%5B%83%7E%83%93%83O%93%AE%89%E6%94z%90M%95%FB%96%40%82%F0%83T%83%93%83v%83%8B%95t%82%AB%82%C5%89%F0%90%E0%81B
URLのエンコード方法(JavaScriptの場合)
2008/1/28
JavaScriptでURLエンコードするには、encodeURIComponentメソッドを使用します。 このメソッドは、指定したURL文字列を、ページの文字エンコードが何であろうと、明示的にUTF-8でエンコードします。 Shif_JISやEUC-JP、UTF-8であっても、全てUTF-8でエンコードされた文字列が返ります。
<script type="text/javascript"> /* 現在のページのURLを取得 → encodeURIComponentメソッドでエンコード */ var URL=encodeURIComponent(location.href); document.write("<p>現在のページのURL:<br \/><em>"+URL+"<\/em><\/p>"); /* 現在のページのタイトルを取得 → encodeURIComponentメソッドでエンコード */ var TITLE=encodeURIComponent(document.title); document.write("<p>現在のページのタイトル:<br \/><em>"+TITLE+"<\/em><\/p>"); </script>
以下のように、JavaScriptで現在のページのURLとタイトルを取得してブックマーク追加URLを生成するようにしておくと便利です。 リンクをクリックすると、window.open()を使用してブックマーク追加の画面を小窓に表示するようにしています。
bookmark this post at: <a href='javascript:void(0)' onclick='window.open("http://del.icio.us/post?url="+encodeURIComponent(location.href)+"&title="+encodeURIComponent(document.title),"w","width=700px,height=300px,status=no,scrollbars=yes,toolbar=no");return false;'>Del.icio.us</a>
ブックマーク追加ボタン(設置例)
2008/1/28

上記のサイトを参考に、より簡単にJavaScriptとCSSで、各種ブックマークサイトへの「ブックマーク追加」リンク一覧表示をさせてみました。
現在表示しているページのURLとタイトルを「location.href」、「document.title」で取得して設定しているので、貼り付けておくだけで自動で現在表示しているページがブックマークに追加されるようになっています。 以下の例ではベタ書きになっていますが、JavaScript部分とスタイルシートの部分はそれぞれ外部化した方がよいです。
「Social Bookmarks」リンクをクリックすると一覧が表示され、右端にある[close]ボタンまたは再度リンクをクリックすることで一覧が非表示になります。
ブックマークサイトのアイコンを多数表示するのは、スペースを取りますがこの方法なら、リンク1つだけなのでページもスッキリします。 ただし、ブックマークするユーザーにとっては、ワンクリックして一覧表示し、更にお目当てのブックマークを探すという手間が増えるので、ブックマークされやすいかどうかは疑問です。
当サイトのページ右上にこの例と同じものを設置していますが、記事やページのタイトル付近またはページ下部に、厳選したいくつかのブックマークサイトへの追加リンクをアイコン貼っておくのが一番よいのかもしれません。
<style type="text/css"> #sbmlink { margin:0; padding:0; } #sbmform { display:none; position:absolute; margin:0; padding:0; width:512px; border-width:1px 2px 2px 1px; border-style:solid; border-color:#efebef #c6c3c6 #c6c3c6 #efebef; background:#fff url("/content/img/skin/bg.gif") repeat top left; } #sbmform a.close { display:block; float:right; margin:10px 5px 0 0; padding:0 text-align:right; background-color:transparent; } #sbmform a.close img { vertical-align:middle; border:0; } #sbmform div.title { float:none; margin:10px 0; padding:0 0 0 10px; font-weight:bold; } #sbmlink { text-align:right; } #sbmlink a, #sbmlink a:hover { padding-left:16px; background:transparent url("/content/img/share/addbookmark.png") no-repeat left top; font-size:11px; color:#6b8e31; } #sbmform div.social { margin:0 5px 5px 5px; padding:0; background-color:#fff; width:98%; height:auto; float:left; } #sbmform div.social ul { margin:0; padding:10px 0; list-style-type:none; float:left; width:33%; } #sbmform div.social ul li { margin:0 10px; padding:5px 0; } #sbmform div.social ul li a, #sbmform div.social ul li a :hover { padding:2px 0 2px 22px; height:12px; background-repeat:no-repeat; font-size:12px; vertical-align:middle; } #sbmform div.clr { clear:both; } #sbmform a.blogmarks { background-image:url(/content/img/share/blogmarks.gif); } #sbmform a.blinklist { background-image:url(/content/img/share/blinklist.gif); } #sbmform a.blogmarks { background-image:url(/content/img/share/blogmarks.gif); } #sbmform a.bookmarktracker{ background-image:url(/content/img/share/bookmarktracker.gif); } #sbmform a.bluedot { background-image:url(/content/img/share/bluedot.gif); } #sbmform a.delicious { background-image:url(/content/img/share/delicious.gif); } #sbmform a.digg { background-image:url(/content/img/share/digg.gif); } #sbmform a.fc2 { background-image:url(/content/img/share/fc2.gif); } #sbmform a.furl { background-image:url(/content/img/share/furl.gif); } #sbmform a.google_bmarks { background-image:url(/content/img/share/google_bmarks.gif); } #sbmform a.hatena { background-image:url(/content/img/share/hatena.gif); } #sbmform a.livedoor_clip { background-image:url(/content/img/share/livedoor_clip.gif); } #sbmform a.magnolia { background-image:url(/content/img/share/magnolia.gif); } #sbmform a.netscape { background-image:url(/content/img/share/netscape.gif); } #sbmform a.newsvine { background-image:url(/content/img/share/newsvine.gif); } #sbmform a.nifty_clip { background-image:url(/content/img/share/nifty_clip.gif); } #sbmform a.pookmark { background-image:url(/content/img/share/pookmark.gif); } #sbmform a.reddit { background-image:url(/content/img/share/reddit.gif); } #sbmform a.favorite { background-image:url(/content/img/share/favorite.gif); } #sbmform a.tailrank { background-image:url(/content/img/share/tailrank.gif); } #sbmform a.technorati { background-image:url(/content/img/share/technorati.gif); } #sbmform a.windows_live { background-image:url(/content/img/share/windows_live.gif); } #sbmform a.yahoo_myweb { background-image:url(/content/img/share/yahoo_myweb.gif); } </style> <script type="text/javascript"> /* 表示したいブックマークだけコメントアウトしてください。 連想配列の最後の要素はコンマ(,)を付けないように! IEではまだ配列があると思ってJavaScriptエラーが発生します。 */ var sbm_ary = { /* "bluedot" : ["Blue Dot","javascript:sbmBlueDot();",1], */ "bluedot" : ["Blue Dot","http://bluedot.us/Authoring.aspx?u={url}&title={title}",0], "blinklist" : ["blinklist","http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}&Title={title}",0], "blogmarks" : ["Blogmarks.net","http://blogmarks.net/my/new.php?mini=1&simple=1&url={url}&title={title}",0], "bookmarktracker" : ["BookmarkTracker","http://www.bookmarktracker.com/frame_add.cfm?url={url}&title={title}",0], "delicious" : ["Del.icio.us","http://del.icio.us/post?url={url}&title={title}",0], "digg" : ["Digg","http://digg.com/submit?phase=2&url={url}&title={title}",0], "fc2" : ["FC2ブックマーク","http://bookmark.fc2.com/user/post?url={url}&title={title}",0], "furl" : ["FURL","http://furl.net/storeIt.jsp?u={url}&t={title}",0], "google_bmarks" : ["Google Bookmarks","http://www.google.com/bookmarks/mark?op=edit&bkmk={url}&title={title}",0], /* "hatena" : ["はてなブックマーク","http://b.hatena.ne.jp/append?{url}",2], */ "hatena" : ["Hatena","http://b.hatena.ne.jp/add?mode=confirm&&url={url}&title={title}",2], "livedoor_clip" : ["livedoorクリップ","http://clip.livedoor.com/redirect?link={url}&title={title}",0], "magnolia" : ["magnolia","http://ma.gnolia.com/bookmarklet/add?url={url}&title={title}",0], "netscape" : ["Netscape"," http://www.netscape.com/submit/?U={url}&T={title}",0], "nifty_clip" : ["niftyクリップ","http://clip.nifty.com/create?url={url}&title={title}",0], "newsvine" : ["Newsvine","http://www.newsvine.com/_wine/save?u={url}&h={title}",0], "pookmark" : ["pookmark","http://pookmark.jp/post?url={url}&title={title}",0], "reddit" : ["Reddit","http://reddit.com/submit?url={url}&title={title}",0], "tailrank" : ["Tailrank","http://tailrank.com/share/?link_href={url}&title={title}",0], "technorati" : ["Technorati","http://www.technorati.com/faves?add={url}",0], "windows_live" : ["Windows Live","https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url={url}&title={title}&top=1",0], "yahoo_myweb" : ["Yahoo MyWeb","http://myweb2.search.yahoo.com/myresults/bookmarklet?u={url}&t={title}",0] }; var sbm_ary_max=""; for(key in sbm_ary){ sbm_ary_max++; } var d=document; var ie=d.all?1:0 var ns6=d.getElementById&&!d.all?1:0 var opera=window.opera?1:0 var shareID="sbmform"; function post_Share(share_name,en) { var _url=location.href; var _title=document.title; var url=encodeURIComponent(_url); var title=encodeURIComponent(_title); var base=sbm_ary[share_name][1]; if(en=='en'){ /* エンコード */ base = base.replace('{url}', url); base = base.replace('{title}', title); }else{ /* エンコードなし */ base = base.replace('{url}', _url); base = base.replace('{title}', _title); } w=window.open(base,"w","width=700px,height=400px,top=0,left=0,scrollbars=yes,toolbar=no"); w.focus(); return false; } function disp_Share() { if(ie || ns6 || opera){ obj=ns6 ? d.getElementById(shareID) : d.all(shareID); if(obj.style.display=="block"){ obj.style.display="none"; }else{ obj.style.display="block"; } } } function create_Share(){ var cnt=1; var ofst=10; /* 折り返しする数 */ var s="<div class='social'>"; for(key in sbm_ary){ if(cnt==1 || cnt%ofst==1){ s+="<ul>"; } if(sbm_ary[key][2]==1){ /* js */ s+="<li><a href='"+sbm_ary[key][1]+"' class='"+key+"'>"+sbm_ary[key][0]+"<\/a><\/li>"; }else if(sbm_ary[key][2]==2){ /* URLエンコード不要 */ s+="<li><a href='javascript:void(0);' class='"+key+"' onclick=\"post_Share('"+key+"',0)\">"+sbm_ary[key][0]+"<\/a><\/li>"; }else{ /* URLエンコード */ s+="<li><a href='javascript:void(0);' class='"+key+"' onclick=\"post_Share('"+key+"','en')\">"+sbm_ary[key][0]+"<\/a><\/li>"; } if(cnt==sbm_ary_max || cnt%ofst==0){ s+="<\/ul>"; } cnt++; } s+="<\/div>"; document.write(s); } </script> <!-- [start] --> <div id="sbmlink"> <a href="javascript:void(disp_Share())" title="はてなブックマークやDel.icio.usなどのソーシャルブックマークに追加">Social Bookmarks</a> </div> <div id="sbmform"> <a href="javascript:void(disp_Share())" title="閉じる" class="close"><img src='/content/img/btn/btn_close.gif' width="42" height="11" alt='閉じる' /></a> <div class="title">Social Bookmarks</div> <script type="text/javascript"> create_Share(); </script> <div class='clr'></div> </div> <!-- [end] // -->
ブックマーク追加URL一覧
2008/1/28
ブックマーク追加のリンクを貼っておくと、ブックマークサイトに登録しているユーザーが、閲覧中のページをワンクリックで簡単にブックマークに追加できます。
ブックマーク追加のURLには、ページのURLの他に、オプションでページのタイトルや説明文もパラメータで指定できます。 全サイト共通ではなく、サイトによっててパラメータの変数にばらつきがありますので注意して下さい。
ブックマーク追加URLは、一部の日本語サイトを除いて、エンコードする必要があります。
⇒ PHPによるURLエンコード方法
⇒ JavaScriptによるURLエンコード方法
エンコードした「ブックマーク追加URL」を<A>タグのHREF属性に指定すれば設置できます。
<a href='ブックマーク追加URL'>ブックマークに追加</a> <a href='ブックマーク追加URL'><img src='アイコンURL'></a>
「Del.icio.us」のように海外サイトでも日本語でタグの関連付けができるなど、日本語に対応しているサイトもありますが、 日本語未対応のサイトでは、ブックマーク追加URLに指定するタイトルに日本語が含まれる場合は、例えエンコードしていても文字化けしますので注意して下さい。
ブックマーク追加URL一覧
facebook
http://www.facebook.com/share.php?u=URL&t=TITLE
要URLエンコード。日本語タイトル可。meta要素のdescriptionに指定したサイト説明文が自動取得される。
blinkbits
http://www.blinkbits.com/bookmarklets/save.php?v=1&source_url=URL&title=TITLE&body=DESCRIPTION
要URLエンコード。
BlinkList
http://blinklist.com/index.php?Action=Blink/addblink.php&Title=TITLE&Url=URL&Description=DESCRIPTION
要URLエンコード。日本語タイトル可。
Blogmarks.net
http://blogmarks.net/my/new.php?mini=1&simple=1&url=URL&title=TITLE
要URLエンコード。
Blue Dot
<a href="http://bluedot.us/Authoring.aspx" onclick="{var w=window;w.l=w.location;w.SdP='';w.bU=(w.l.protocol=='https:'?'https://'+w.SdP:'http://')+'bluedot.us';w.eUC=encodeURIComponent;function fBkF(){w.l.href=w.bU+'/Authoring.aspx?u='+w.eUC(w.l.href)+'&t='+w.eUC(document.title);}w.gT=w.setTimeout(fBkF,6999);w.d=w.document;w.sT=w.d.body;w.o=w.d.createElement('scri'+'pt');if(typeof w.o!='object')fBkF();w.o.setAttribute('src',w.bU+'/js/Authoring.js');w.o.setAttribute('type','text/javascript');void(w.sT.appendChild(w.o));if(w.event){w.event.returnValue=false;}return false;}" id="BlueDotPartner"><img src="%%imgurl%%" style="border:none; vertical-align:middle;"/ alt="Dot This"></a>
Choix(チョイックス)
http://www.choix.jp/bloglink/URL
要URLエンコード。ぢURLの?以降は無視される。
Connotea
http://www.connotea.org/addpopup?continue=confirm&uri=URL&title=TITLE
要URLエンコード。
Del.icio.us
http://del.icio.us/post?url=URL&title=TITLE
要URLエンコード。
Digg
http://digg.com/submit?phase=2&url=URL
要URLエンコード。
fark
http://cgi.fark.com/cgi/fark/edit.pl?new_url=URL&new_comment=TITLE
要URLエンコード。
fc2ブックマーク
http://bookmark.fc2.com/user/post?url=URL&title=TITLE
要URLエンコード。
feedmelinks
http://feedmelinks.com/categorize?from=toolbar&op=submit&url=URL&name=TITLE
要URLエンコード。
FURL
http://www.furl.net/storeIt.jsp?u=URL&t=TITLE
要URLエンコード。日本語タイトル不可(エンコードしても文字化け)。
はてなブックマーク
http://b.hatena.ne.jp/append?URL
URLエンコード不要。指定したURLから自動的にページタイトルを取得してくれる。
linkagogo.com
http://www.linkagogo.com/go/AddNoPopup?url=URL&title=TITLE
要URLエンコード。
livedoorクリップ
http://clip.livedoor.com/redirect?link=URL&title=TITLE
要URLエンコード。URLの?以降は無視される。
Ma.gnolia.com
http://ma.gnolia.com/beta/bookmarklet/add?url=URL&title=TITLE&description=DESCRIPTION
要URLエンコード。
netvouz.com
http://www.netvouz.com/action/submitBookmark?url=URL&title=TITLE&description=DESCRIPTION
要URLエンコード。
newsing(ニューシング)
http://newsing.jp/add?title=TITLE&url=URL
要URLエンコード。
Newsvine
http://www.newsvine.com/_tools/seed&save?u=URL&h=TITLE
要URLエンコード。
niftyクリップ
http://clip.nifty.com/create?url=URL&title=TITLE
要URLエンコード。URLの?以降は無視される。
pookmark
http://pookmark.jp/post?url=URL&title=TITLE
要URLエンコード。URLの?以降は無視される。
rawsugar.com
http://www.rawsugar.com/tagger/?turl=URL&tttl=TITLE
要URLエンコード。日本語タイトル可。
reddit.com
http://reddit.com/submit?url=URL&title=TITLE
要URLエンコード。日本語タイトル可。
ROOTACE(ルータス)
http://www.rootace.com/add.php?title=TITLE&url=URL
saafブックマーク
http://bm.saaf.jp/bm/add?url=URL
要URLエンコード。
Spurl.net 1.0
http://www.spurl.net/spurl.php?url=URL&title=TITLE
要URLエンコード。日本語タイトル可。
Technorati(テクノラティ)
http://technorati.com/cosmos/search.html?url=URL
要URLエンコード。日本語タイトル不可。
YahooMyWeb
http://myweb2.search.yahoo.com/myresults/bookmarklet?t=TITLE&u=URL
要URLエンコード。日本語タイトル不可。(エンコードしても文字化け)
scuttle.org
http://www.scuttle.org/bookmarks.php/maxpower?action=add&address=URL&title=TITLE&description=DESCRIPTION
要URLエンコード。
Shadows
http://www.shadows.com/features/tcr.htm?url=URL&title=TITLE
要URLエンコード。
Simpy
http://www.simpy.com/simpy/LinkAdd.do?href=URL&title=TITLE
要URLエンコード。
Tailrank
http://tailrank.com/share/?text=&link_href=URL&title=TITLE
要URLエンコード。
wists
http://wists.com/r.php?c=&r=URL&title=TITLE
要URLエンコード。ソーシャルショッピングサイト。
BookmarkTracker
http://www.bookmarktracker.com/frame_add.cfm?url=URL&title=TITLE
要URLエンコード。
ソーシャルブックマークボタン統合サービス
AddClips beta
2008/1/28
AddClips beta

いろいろなソーシャルブックマークに追加するボタンを1つに統合した「ブックマーク追加ボタン」を作成できます。
ボタンのデザイン、サイトの種類(サイトorブログ)、統計機能の利用の有無を設定し、生成されたタグをページにタグを貼れば、設置完了! 自作するより簡単!新しいソーシャルブックマークが追加されても、自動で更新されるので、設置する側としてもうれしいかぎり。 設置したボタンをクリックすると、小窓が開き、いろいろなソーシャルブックマークに追加するリンクがアイコン付きで一覧表示されます。
「次回からは選択しない」にチェックを入れると、はじめに登録したソーシャルブックマークを記憶され、次回から毎回ずらずらーっと表示されることもなくなります。 さらに、「はてな」(無料)または「livedoorID」(無料)のアカウントがあれば、どのソーシャルブックマークにどれだけ追加されたか統計情報をみることもできます。
<!-- AddClips Code START --> <a href="http://www.addclips.org/addclips.php" onclick="AddClipsUrl = location.href; AddClipsTitle = document.title; return AddClipsWindow(this);" target="_blank"><img src="http://img.addclips.org/addclips_1.gif" width="141" height="16" border="0" alt="ブックマークに追加する" style="vertical-align:middle;" /></a><script type="text/javascript">var AddClipsId = '1FA5F1AA3D616';</script><script type="text/javascript" src="http://www.addclips.org/addclips.js"></script> <!-- AddClips Code END -->
ソーシャルブックマーク追加ブログパーツ
sbooker
2008/1/28
ソーシャルブックマーク追加 ブログパーツ

いろいろなソーシャルブックマークに追加ボタンをページ内に表示するタグを生成できます。
はてな、Yahoo、Livedoor、バザール、del.icio.usは、users表示に対応しています。 表示形式は、縦型、横型2種類、枠なし4ペターンから選択できます。
以下の設置例では、全ソーシャルブックマークを表示していますが、表示するブックマークも好きなものを選択できます。 また、アイコン表示の有無、URL・タイトルを自動取得するかどうかなどの設定もできます。

<!-- ソーシャルブックマークパーツここから↓ --> <div style="border: 2px solid #999999; font-size:12px;text-align:left;"><p style="background-color:#ECEFD8;font-size:10px;">ソーシャルブックマークに追加 <span style="font-size:8px;margin:0px;padding:2px;"><a href="http://kaimono.benzo.jp/"><img src="http://kaimono.benzo.jp/image/teikyou.gif" alt="その価格OK?-楽天・アマゾン・ヤフオク・価格.COM、比較検索" width="30" height="11" border="0" /></a></span></p><p style="padding:4px;"><a href="javascript: window.open('http://b.hatena.ne.jp/add?mode=confirm&is_bm=1&title='+escape(sBookTitle())+'&url='+escape(sBookURL()) , '_blank', 'width=520,height=500,resizable=1,scrollbars=1');undefined;"><img src="http://benzo.jp.googlepages.com/append.gif" alt="はてなにブックマーク" style="border:0" />はてな</a> <span id="sp_h_cnt"></span> <a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent(sBookTitle())+'&u='+encodeURIComponent(sBookURL())+'&opener=bm&ei=UTF-8','_blank','width=550px,height=480px,status=1,location=0,resizable=1,scrollbars=0,left=100,top=50',0)"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" alt="Yahooにブックマーク" style="border:0" />Yahoo</a> <span style="font-size:11px;background-color:#FFDDFF" id="ycnt"><script type="text/javascript" src="http://num.bookmarks.yahoo.co.jp/ybmno.php"></script> users</a></span> <a href="javascript: SB_UrlOpen('http://clip.livedoor.com/clip/add?link=' + url_utf8() + '&title=' + title_utf8() + '&jump=ref')"><img src="http://clip.livedoor.com/img/icon/add.gif" alt="Livedoorにブックマーク" style="border:0" />Livedoor</a> <span id="sp_l_cnt"></span> <a href="javascript:window.open('http://buzzurl.jp/entry/' + sBookURL() , '_blank', 'width=520,height=500,resizable=1,scrollbars=1');undefined;"><img src="http://buzzurl.jp/static/image/api/icon/add_icon_mini_08.gif" alt="バザールにブックマーク" style="border:0" />バザール</a> <span id="sp_b_cnt"></span> <a href="javascript: SB_UrlOpen('http://del.icio.us/post?url=' + url_utf8() + '&title=' + title_utf8())"><img src="http://images.del.icio.us/static/img/delicious.small.gif" alt="del.icio.usにブックマーク" style="border:0" />del.icio.us</a> <span id="del_icio_us_Script"></span><span id="del_icio_us_cnt"></span> <a href="javascript: SB_UrlOpen('http://newsing.jp/nbutton?title=' + title_utf8() + '&url=' + url_utf8())"><img src="http://image.newsing.jp/common/images/newsingit/newsingit_s.gif" alt="newsingにブックマーク" style="border:0" />newsing</a> <a href="javascript: SB_UrlOpen('http://bookmark.fc2.com/user/post?url=' + url_utf8() + '&title=' + title_utf8())"><img src="http://bookmark.fc2.com/images/add-16.gif" alt="FC2にブックマーク" style="border:0" />FC2</a> <a href="javascript: SB_UrlOpen('https://clip.nifty.com/create?url=' + url_utf8() + '&title=' + title_utf8())"><img src="http://clip.nifty.com/images/addclip_icn.gif" alt="ニフティにブックマーク" style="border:0" />ニフティ</a> <a href="javascript: SB_UrlOpen('http://bookmark.corich.jp/bookmark/public_html/marklet.php?url=' + url_utf8() + '&title=' + title_utf8())"><img src="http://bookmark.corich.jp/img_common/icon_all.gif" alt="CoRichにブックマーク" style="border:0" />CoRich</a> <a href="javascript: SB_UrlOpen('http://www.choix.jp/submit?bookurl=' + url_utf8() + '&title=' + title_utf8())"><img src="http://benzo.jp.googlepages.com/choix_it.gif" alt="Choixにブックマーク" style="border:0" />Choix</a> <a href="javascript: SB_UrlOpen('http://www.flog.jp/post.php?url_uri=' + url_utf8() )"><img src="http://www.flog.jp/images/icon_flog.gif" alt="フロッグにブックマーク" style="border:0" />フロッグ</a> <a href="javascript: window.open('http://rss.drecom.jp/shortcut/add_clip?url='+ url_utf8() +'&title='+title_utf8(),'add_clip','scrollbars=yes,width=750,height=600,left=100,top=100,status=yes,resizable=yes').focus();"><img src="http://rss.drecom.jp/img/dir_clip.gif" alt="ドリコムにブックマーク" style="border:0" />ドリコム</a> <a href="javascript: window.open('http://www.rootace.com/add.php?title='+escape(document.title)+'&url='+escape(sBookURL())+'&v=1','_blank','width=480,height=490,resizable=1,scrollbars=1');undefined;"><img src="http://www.rootace.com/img/rootace_blog_icon.gif" alt="ROOTACEにブックマーク" style="border:0" />ROOTACE</a> <a href="javascript: SB_UrlOpen('http://pookmark.jp/post?url=' + url_utf8() + '&title=' + title_utf8())"><img src="http://benzo.jp.googlepages.com/add.gif" alt="POOKMARKにブックマーク" style="border:0" />POOKMARK</a> <a href="javascript:window.open('http://www.iza.ne.jp/bookmark/add/regist/back/'+escape(sBookURL()), '_blank');undefined;"><img src="http://www.iza.ne.jp/images/common/bookmark_icon02.gif" alt="イザ!にブックマーク" style="border:0" />イザ!</a> <a href="javascript:window.open('http://pingking.jp/bookmark?url=' + url_utf8() + '&title=' + title_utf8(), '_blank');undefined;"><img src="http://benzo.jp.googlepages.com/blogbutton.gif" alt="PingKingにブックマーク" style="border:0" />PingKing</a> <a href="javascript:window.open('http://saaf.jp/bm/add?url='+ sBookURL(), '_blank');undefined;"><img src="http://saaf.jp/img/common/bt_bm_add.gif" alt="Saafにブックマーク" style="border:0" />Saaf</a> </p></div> <script language="JavaScript" type="text/javascript"><!-- function sBookURL(){return "http://phpjavascriptroom.com/";} function sBookTitle(){return "PHP&JavaScript Room";}; function title_utf8(){return encodeURIComponent(sBookTitle());} function url_utf8(){return encodeURIComponent(sBookURL());}; function SB_UrlOpen(strLink){location.href=strLink;}; var delicious_script = function () {var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.charset = 'UTF-8'; script.src = 'http://badges.del.icio.us/feeds/json/url/data?url='+encodeURIComponent(sBookURL())+'&callback=delicious_callback'; document.getElementById( 'del_icio_us_Script').appendChild( script ); }; function delicious_callback( data ) { if ( ! data ) return; var first = data[0]; if ( ! first ) return;var encurl = encodeURIComponent(first.url); var span = document.getElementById( 'del_icio_us_cnt'); if ( ! span ) return; if ( first.total_posts > 9 ) { span.style.color = '#FF0000'; span.style.backgroundColor = '#FFCCCC'; } var text = document.createTextNode( first.total_posts+' users ' ); span.appendChild( text );}; delicious_script(); function SB_CntSet(){if(document.getElementById( 'sp_h_cnt')){document.getElementById( 'sp_h_cnt').innerHTML = '<img src="http://b.hatena.ne.jp/entry/image/' + sBookURL() + '">'; }; if(document.getElementById( 'sp_l_cnt')){document.getElementById( 'sp_l_cnt').innerHTML = '<img src="http://image.clip.livedoor.com/counter/' + sBookURL() + '">'; }; if(document.getElementById( 'sp_b_cnt')){document.getElementById( 'sp_b_cnt').innerHTML = '<img src="http://api.buzzurl.jp/api/counter/' + sBookURL() + '">'; }; }; SB_CntSet(); --></script> <!-- ソーシャルブックマークパーツここまで↑ -->
ソーシャルブックマーク追加ボタン作成ツール
Social Bookmark Button Generator
2008/1/28
Social Bookmark Button Generator

ソーシャルブックマークやソーシャルネットワークに追加できるボタンをページ内に表示するタグを生成できます。
選択したサービスのアイコン(16×16ピクセル)が表示されます。 海外のサービスなので、日本のソーシャルブックマークがないのが残念!

<!-- socialbookmark.eu beginn --><div id="socialbookmarkeu"><a href="http://www.socialbookmark.eu" style="color: black;text-decoration: none;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;">Social Bookmarks</a></div><script type="text/javascript" src="http://www.socialbookmark.eu/startScript.php"></script><div style="padding: 2px; margin-top: 3px;"><a href="http://www.blinkbits.com/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%69%6E%6B%62%69%74%73%2E%63%6F%6D%2F%62%6F%6F%6B%6D%61%72%6B%6C%65%74%73%2F%73%61%76%65%2E%70%68%70%3F%76%3D%31%26%74%69%74%6C%65%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29%2B%27%26%73%6F%75%72%63%65%5F%75%72%6C%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%73%6F%75%72%63%65%5F%69%6D%61%67%65%5F%75%72%6C%3D%26%72%73%73%5F%66%65%65%64%5F%75%72%6C%3D%26%72%73%73%5F%66%65%65%64%5F%75%72%6C%3D%26%72%73%73%32%6D%65%6D%62%65%72%3D%26%62%6F%64%79%3D%27');return false;"><img src="http://www.socialbookmark.eu/buttons/blinkbits.gif" alt="BlinkBits" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://www.blinklist.com/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%69%6E%6B%6C%69%73%74%2E%63%6F%6D%2F%69%6E%64%65%78%2E%70%68%70%3F%41%63%74%69%6F%6E%3D%42%6C%69%6E%6B%2F%61%64%64%62%6C%69%6E%6B%2E%70%68%70%26%44%65%73%63%72%69%70%74%69%6F%6E%3D%26%54%61%67%3D%26%55%72%6C%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%54%69%74%6C%65%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29');return false;"><img src="http://www.socialbookmark.eu/buttons/blinklist.gif" alt="BlinkList" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://blogmarks.net/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%62%6C%6F%67%6D%61%72%6B%73%2E%6E%65%74%2F%6D%79%2F%6E%65%77%2E%70%68%70%3F%6D%69%6E%69%3D%31%26%73%69%6D%70%6C%65%3D%31%26%75%72%6C%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%63%6F%6E%74%65%6E%74%3D%26%70%75%62%6C%69%63%2D%74%61%67%73%3D%26%74%69%74%6C%65%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29');return false;"><img src="http://www.socialbookmark.eu/buttons/blogmarks.gif" alt="Blogmarks" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://bluedot.us/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%62%6C%75%65%64%6F%74%2E%75%73%2F%41%75%74%68%6F%72%69%6E%67%2E%61%73%70%78%3F%75%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%74%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29');return false;"><img src="http://www.socialbookmark.eu/buttons/bluedot.gif" alt="Bluedot" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://del.icio.us" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%64%65%6C%2E%69%63%69%6F%2E%75%73%2F%70%6F%73%74%3F%76%3D%32%26%75%72%6C%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%6E%6F%74%65%73%3D%26%74%61%67%73%3D%26%74%69%74%6C%65%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29');return false;"><img src="http://www.socialbookmark.eu/buttons/delicious.gif" alt="del.icio.us" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://www.facebook.com/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%77%77%77%2E%66%61%63%65%62%6F%6F%6B%2E%63%6F%6D%2F%73%68%61%72%65%2E%70%68%70%3F%75%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%74%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29');return false;"><img src="http://www.socialbookmark.eu/buttons/facebook.png" alt="facebook" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://www.google.com/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%77%77%77%2E%67%6F%6F%67%6C%65%2E%63%6F%6D%2F%62%6F%6F%6B%6D%61%72%6B%73%2F%6D%61%72%6B%3F%6F%70%3D%61%64%64%26%68%6C%3D%64%65%26%62%6B%6D%6B%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%61%6E%6E%6F%74%61%74%69%6F%6E%3D%26%6C%61%62%65%6C%73%3D%26%74%69%74%6C%65%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29');return false;"><img src="http://www.socialbookmark.eu/buttons/google.gif" alt="Google" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://technorati.com/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%74%65%63%68%6E%6F%72%61%74%69%2E%63%6F%6D%2F%66%61%76%65%73%2F%73%65%6F%70%6F%72%74%61%6C%3F%61%64%64%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29%2B%27%26%74%61%67%3D%27');return false;"><img src="http://www.socialbookmark.eu/buttons/technorati.gif" alt="Technorati" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://www.spurl.net/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%77%77%77%2E%73%70%75%72%6C%2E%6E%65%74%2F%73%70%75%72%6C%2E%70%68%70%3F%76%3D%33%26%74%61%67%73%3D%26%74%69%74%6C%65%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29%2B%27%26%75%72%6C%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29');return false;"><img src="http://www.socialbookmark.eu/buttons/spurl.gif" alt="Spurl" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> <a href="http://www.yahoo.com/" onclick="doBookmark('%27%68%74%74%70%3A%2F%2F%6D%79%77%65%62%32%2E%73%65%61%72%63%68%2E%79%61%68%6F%6F%2E%63%6F%6D%2F%6D%79%72%65%73%75%6C%74%73%2F%62%6F%6F%6B%6D%61%72%6B%6C%65%74%3F%74%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%64%6F%63%75%6D%65%6E%74%2E%74%69%74%6C%65%29%2B%27%26%64%3D%26%74%61%67%3D%26%75%3D%27%2B%65%6E%63%6F%64%65%55%52%49%43%6F%6D%70%6F%6E%65%6E%74%28%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%29');return false;"><img src="http://www.socialbookmark.eu/buttons/yahoo.gif" alt="Yahoo" width="16" height="16" class="bookmarkicon" style="border: 1px solid #CCC;" /></a> </div><!-- socialbookmark.eu ende -->
ソーシャルブックマーク追加ボタン&RSSフィード購読ボタン作成ツール
Add This
2008/1/28
Add This.com

「ソーシャルブックマーク追加ボタン」と「RSSフィード購読ボタン」の2種類の一括表示ボタンが提供されています。 ボタンのデザインも豊富です。 ソーシャルブックマーク追加ボタンは、通常の別窓表示だけでなく、ウィジェット版もあります。
ユーザー登録(無料)をすると、サイトやRSSフィードのブックマーク状況をグラフで確認することができます。 ジェネレーターがあるので、簡単に設置用のコードを生成できます。
<!-- ソーシャルブックマーク追加ボタン --> <p><a href="http://www.addthis.com/bookmark.php" onclick="addthis_url = location.href; addthis_title = document.title; return addthis_click(this);" target="_blank"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="AddThis Social Bookmark Button" /></a> <script type="text/javascript">var addthis_pub = 'cocoism';</script><script type="text/javascript" src="http://s9.addthis.com/js/widget.php?v=10"></script>(別窓表示)</p> <!-- ソーシャルブックマーク追加ボタン (ウィジェット版) --> <p> <script type="text/javascript"> addthis_url = location.href; addthis_title = document.title; addthis_pub = 'cocoism'; </script> <script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12" ></script> (ウィジェット版) </p> <!-- RSS購読ボタン --> <p><a href="http://www.addthis.com/feed.php?pub=cocoism&h1=http%3A%2F%2Fphpjavascriptroom.com%2Findex.xml&t1=" title="Subscribe using any feed reader!"><img src="http://s9.addthis.com/button1-rss.gif" width="125" height="16" border="0" alt="AddThis Feed Button" /></a></p>