Search

ソーシャルブックマークとは?

2008/1/28

ソーシャルブックマークはWeb上でブックマークを共有・管理できる、いわば公開型のブックマーク(お気に入り)です。 有名なものとしては、「del.icio.us」、「Blogmarks.net」、「はてなブックマーク」などでしょうか。

家のパソコンでも、会社のパソコンからでも、どこからでも閲覧・投稿・編集できます。 公開したくないブックマークは、非公開にすることも可能です。

タグの関連付けサムネイル(スクリーンショットの縮小画像)が表示されるため、 ブックマークが多くなっても、検索しやすく、どれがどのサイトだったか分からなくなることもありません♪

利用するには、ハンドルネームやメールアドレス(フリーメールでOK)など簡単な登録(無料)が必要です。 登録作業は数分で完了するので、直ぐに利用できます。

自分のブックマークも公開でき、なおかつ他ユーザーのブックマークも閲覧できるので、あちこちサーフィンしながら色々なサイトを知ることができるのも魅力! RSSでお気に入りのユーザーのブックマークの新着情報を受け取ることもできます。

またユーザーがブックマークしやすいように、ブログやサイトに各ソーシャルブックのブックマーク追加ボタンを設置することもできます。

ソーシャルブックマークはたくさんあますが、個人的には、サムネイル表示タイプのBlue Dotが気に入っています。 ブルーを貴重にした無駄のないシンプルなデザインで見やすいところ、公開非公開の一括切り替えができるところがいいです。

URLのエンコード方法(PHPの場合)

2008/1/28

########## ブックマークに追加するページの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)+"&amp;title="+encodeURIComponent(document.title),"w","width=700px,height=300px,status=no,scrollbars=yes,toolbar=no");return false;'>Del.icio.us</a>

bookmark this post at: Del.icio.us

ブックマーク追加ボタン(設置例)

2008/1/28

[参考]Share Icon Project

上記のサイトを参考に、より簡単に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一覧

facebookfacebook

http://www.facebook.com/share.php?u=URL&t=TITLE

要URLエンコード。日本語タイトル可。meta要素のdescriptionに指定したサイト説明文が自動取得される。

blinkbitsblinkbits

http://www.blinkbits.com/bookmarklets/save.php?v=1&source_url=URL&title=TITLE&body=DESCRIPTION

要URLエンコード。

BlinkListBlinkList

http://blinklist.com/index.php?Action=Blink/addblink.php&Title=TITLE&Url=URL&Description=DESCRIPTION

要URLエンコード。日本語タイトル可。

Blogmarks.netBlogmarks.net

http://blogmarks.net/my/new.php?mini=1&simple=1&url=URL&title=TITLE

要URLエンコード。

Blue DotBlue 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)+'&amp;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(チョイックス)Choix(チョイックス)

http://www.choix.jp/bloglink/URL

要URLエンコード。ぢURLの?以降は無視される。

ConnoteaConnotea

http://www.connotea.org/addpopup?continue=confirm&uri=URL&title=TITLE

要URLエンコード。

Del.icio.usDel.icio.us

http://del.icio.us/post?url=URL&title=TITLE

要URLエンコード。

DiggDigg

http://digg.com/submit?phase=2&url=URL

要URLエンコード。

farkfark

http://cgi.fark.com/cgi/fark/edit.pl?new_url=URL&new_comment=TITLE

要URLエンコード。

fc2ブックマークfc2ブックマーク

http://bookmark.fc2.com/user/post?url=URL&title=TITLE

要URLエンコード。

feedmelinksfeedmelinks

http://feedmelinks.com/categorize?from=toolbar&op=submit&url=URL&name=TITLE

要URLエンコード。

FURLFURL

http://www.furl.net/storeIt.jsp?u=URL&t=TITLE

要URLエンコード。日本語タイトル不可(エンコードしても文字化け)。

はてなブックマークはてなブックマーク

http://b.hatena.ne.jp/append?URL

URLエンコード不要。指定したURLから自動的にページタイトルを取得してくれる。

linkagogo.comlinkagogo.com

http://www.linkagogo.com/go/AddNoPopup?url=URL&title=TITLE

要URLエンコード。

livedoorクリップlivedoorクリップ

http://clip.livedoor.com/redirect?link=URL&title=TITLE

要URLエンコード。URLの?以降は無視される。

Ma.gnolia.comMa.gnolia.com

http://ma.gnolia.com/beta/bookmarklet/add?url=URL&title=TITLE&description=DESCRIPTION

要URLエンコード。

netvouz.comnetvouz.com

http://www.netvouz.com/action/submitBookmark?url=URL&title=TITLE&description=DESCRIPTION

要URLエンコード。

newsing(ニューシング)newsing(ニューシング)

http://newsing.jp/add?title=TITLE&url=URL

要URLエンコード。

NewsvineNewsvine

http://www.newsvine.com/_tools/seed&save?u=URL&h=TITLE

要URLエンコード。

niftyクリップniftyクリップ

http://clip.nifty.com/create?url=URL&title=TITLE

要URLエンコード。URLの?以降は無視される。

pookmarkpookmark

http://pookmark.jp/post?url=URL&title=TITLE

要URLエンコード。URLの?以降は無視される。

rawsugar.comrawsugar.com

http://www.rawsugar.com/tagger/?turl=URL&tttl=TITLE

要URLエンコード。日本語タイトル可。

reddit.comreddit.com

http://reddit.com/submit?url=URL&title=TITLE

要URLエンコード。日本語タイトル可。

ROOTACE(ルータス)ROOTACE(ルータス)

http://www.rootace.com/add.php?title=TITLE&url=URL

saafブックマークsaafブックマーク

http://bm.saaf.jp/bm/add?url=URL

要URLエンコード。

Spurl.net 1.0Spurl.net 1.0

http://www.spurl.net/spurl.php?url=URL&title=TITLE

要URLエンコード。日本語タイトル可。

Technorati(テクノラティ)Technorati(テクノラティ)

http://technorati.com/cosmos/search.html?url=URL

要URLエンコード。日本語タイトル不可。

YahooMyWebYahooMyWeb

http://myweb2.search.yahoo.com/myresults/bookmarklet?t=TITLE&u=URL

要URLエンコード。日本語タイトル不可。(エンコードしても文字化け)

scuttle.orgscuttle.org

http://www.scuttle.org/bookmarks.php/maxpower?action=add&address=URL&title=TITLE&description=DESCRIPTION

要URLエンコード。

ShadowsShadows

http://www.shadows.com/features/tcr.htm?url=URL&title=TITLE

要URLエンコード。

SimpySimpy

http://www.simpy.com/simpy/LinkAdd.do?href=URL&title=TITLE

要URLエンコード。

TailrankTailrank

http://tailrank.com/share/?text=&link_href=URL&title=TITLE

要URLエンコード。

wistswists

http://wists.com/r.php?c=&r=URL&title=TITLE

要URLエンコード。ソーシャルショッピングサイト。

BookmarkTrackerBookmarkTracker

 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>&nbsp;<span id="sp_h_cnt"></span>&nbsp;<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>&nbsp;<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>&nbsp;<a href="javascript: SB_UrlOpen('http://clip.livedoor.com/clip/add?link=' + url_utf8() + '&amp;title=' + title_utf8() + '&amp;jump=ref')"><img src="http://clip.livedoor.com/img/icon/add.gif" alt="Livedoorにブックマーク" style="border:0" />Livedoor</a>&nbsp;<span id="sp_l_cnt"></span>&nbsp;<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>&nbsp;<span id="sp_b_cnt"></span>&nbsp;<a href="javascript: SB_UrlOpen('http://del.icio.us/post?url=' + url_utf8() + '&amp;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>&nbsp;<span id="del_icio_us_Script"></span><span id="del_icio_us_cnt"></span>&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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>&nbsp;&nbsp;</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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women