PHP & JavaScript Room :: 設置サンプル
実行結果
Social Bookmarks
ソース
<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] // -->