首先这篇文章主要是http://www.neoease.com/add-share-buttons/comment-page-1/#comments来自这个网页,代码也是这位大神的,我将代码放在这就是以后用到了好找...这个没有使用控件什么的,主要是html和js代码,效果不错。
我去掉了原作者的css代码,找了网上的两个图标,作为区分,只显示fb和twitter的。
HTML
<div id="share">
Share on:
<a rel="nofollow" id="facebook-share" title="Facebook"> <img src="f-acebook.ico"></a>
<a rel="nofollow" id="twitter-share" title="Twitter"><img src="t-witter.ico"></a>
<a rel="nofollow" id="delicious-share" title="Delicious">Delicious</a>
<a rel="nofollow" id="kaixin001-share" title="开心网">开心网</a>
<a rel="nofollow" id="renren-share" title="人人网">人人网</a>
<a rel="nofollow" id="douban-share" title="豆瓣">豆瓣</a>
<a rel="nofollow" id="sina-share" title="新浪微博">新浪微博</a>
<a rel="nofollow" id="netease-share" title="网易微博">网易微博</a>
<a rel="nofollow" id="tencent-share" title="腾讯微博">腾讯微博</a>
</div>
JS代码
JS代码和下面的JQeury代码二者选其一就可可以了。
function addListener(node, type, listener, obj) {
var param = obj || {};
if(node.addEventListener) {
node.addEventListener(type, function(ev){listener(ev, param);}, false);
return true;
} else if(node.attachEvent) {
node['e' + type + listener] = listener;
node[type + listener] = function() {
node['e' + type + listener](window.event, param);
};
node.attachEvent('on' + type, node[type + listener]);
return true;
}
return false;
}
function getParamsOfShareWindow(width, height) {
return ['toolbar=0,status=0,resizable=1,width=' + width + ',height=' + height + ',left=',(screen.width-width)/2,',top=',(screen.height-height)/2].join('');
}
function bindShareList() {
var link = encodeURIComponent(document.location); // 文章链接
var title = encodeURIComponent(document.title.substring(0,76)); // 文章标题
var source = encodeURIComponent('网站名称'); // 网站名称
var windowName = 'share'; // 子窗口别称
var site = 'http://www.example.com/'; // 网站链接
//var link ='http://v.163.com/movie/2011/2/D/L/M77U1DAGR_M77U1L2DL.html';
addListener(document.getElementById('facebook-share'), 'click', function() {
var url = 'http://facebook.com/share.php?u=' + link + '&t=' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
addListener(document.getElementById('twitter-share'), 'click', function() {
var url = 'http://twitter.com/share?url=' + link + '&text=' + title;
var params = getParamsOfShareWindow(500, 375);
window.open(url, windowName, params);
});
addListener(document.getElementById('delicious-share'), 'click', function() {
var url = 'http://delicious.com/post?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(550, 550);
window.open(url, windowName, params);
});
addListener(document.getElementById('kaixin001-share'), 'click', function() {
var url = 'http://www.kaixin001.com/repaste/share.php?rurl=' + link + '&rcontent=' + link + '&rtitle=' + title;
var params = getParamsOfShareWindow(540, 342);
window.open(url, windowName, params);
});
addListener(document.getElementById('renren-share'), 'click', function() {
var url = 'http://share.renren.com/share/buttonshare?link=' + link + '&title=' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
addListener(document.getElementById('douban-share'), 'click', function() {
var url = 'http://www.douban.com/recommend/?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(450, 350);
window.open(url, windowName, params);
});
addListener(document.getElementById('sina-share'), 'click', function() {
var url = 'http://v.t.sina.com.cn/share/share.php?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(607, 523);
window.open(url, windowName, params);
});
addListener(document.getElementById('netease-share'), 'click', function() {
var url = 'http://t.163.com/article/user/checkLogin.do?link=' + link + 'source=' + source + '&info='+ title + ' ' + link;
var params = getParamsOfShareWindow(642, 468);
window.open(url, windowName, params);
});
addListener(document.getElementById('tencent-share'), 'click', function() {
var url = 'http://v.t.qq.com/share/share.php?title=' + title + '&url=' + link + '&site=' + site;
var params = getParamsOfShareWindow(634, 668);
window.open(url, windowName, params);
});
}
bindShareList();
JQeury代码
function getParamsOfShareWindow(width, height) {
return ['toolbar=0,status=0,resizable=1,width=' + width + ',height=' + height + ',left=',(screen.width-width)/2,',top=',(screen.height-height)/2].join('');
}
function bindShareList() {
var link = encodeURIComponent(document.location); // 文章链接
var title = encodeURIComponent(document.title.substring(0,76)); // 文章标题
var source = encodeURIComponent('网站名称'); // 网站名称
var windowName = 'share'; // 子窗口别称
var site = 'http://www.example.com/'; // 网站链接
jQuery('#facebook-share').click(function() {
var url = 'http://facebook.com/share.php?u=' + link + '&t=' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
jQuery('#twitter-share').click(function() {
var url = 'http://twitter.com/share?url=' + link + '&text=' + title;
var params = getParamsOfShareWindow(500, 375);
window.open(url, windowName, params);
});
jQuery('#delicious-share').click(function() {
var url = 'http://delicious.com/post?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(550, 550);
window.open(url, windowName, params);
});
jQuery('#kaixin001-share').click(function() {
var url = 'http://www.kaixin001.com/repaste/share.php?rurl=' + link + '&rcontent=' + link + '&rtitle=' + title;
var params = getParamsOfShareWindow(540, 342);
window.open(url, windowName, params);
});
jQuery('#renren-share').click(function() {
var url = 'http://share.renren.com/share/buttonshare?link=' + link + '&title=' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
jQuery('#douban-share').click(function() {
var url = 'http://www.douban.com/recommend/?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(450, 350);
window.open(url, windowName, params);
});
jQuery('#sina-share').click(function() {
var url = 'http://v.t.sina.com.cn/share/share.php?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(607, 523);
window.open(url, windowName, params);
});
jQuery('#netease-share').click(function() {
var url = 'http://t.163.com/article/user/checkLogin.do?link=' + link + 'source=' + source + '&info='+ title + ' ' + link;
var params = getParamsOfShareWindow(642, 468);
window.open(url, windowName, params);
});
jQuery('#tencent-share').click(function() {
var url = 'http://v.t.qq.com/share/share.php?title=' + title + '&url=' + link + '&site=' + site;
var params = getParamsOfShareWindow(634, 668);
window.open(url, windowName, params);
});
}
bindShareList();
因为像我一样的新手很多,有时候搞不明白代码怎么放,所以把完整的html代码放上来,js代码也在里面,只要将图标和这个html代码放在一个目录,运行就可以看到了。
最终代码是这样的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分享按钮测试</title>
<body>
<div id="share">
Share on:
<a rel="nofollow" id="facebook-share" title="Facebook"> <img src="f-acebook.ico"></a>
<a rel="nofollow" id="twitter-share" title="Twitter"><img src="t-witter.ico"></a>
<a rel="nofollow" id="delicious-share" title="Delicious">Delicious</a>
<a rel="nofollow" id="kaixin001-share" title="开心网">开心网</a>
<a rel="nofollow" id="renren-share" title="人人网">人人网</a>
<a rel="nofollow" id="douban-share" title="豆瓣">豆瓣</a>
<a rel="nofollow" id="sina-share" title="新浪微博">新浪微博</a>
<a rel="nofollow" id="netease-share" title="网易微博">网易微博</a>
<a rel="nofollow" id="tencent-share" title="腾讯微博">腾讯微博</a>
</div>
<script>
function addListener(node, type, listener, obj) {
var param = obj || {};
if(node.addEventListener) {
node.addEventListener(type, function(ev){listener(ev, param);}, false);
return true;
} else if(node.attachEvent) {
node['e' + type + listener] = listener;
node[type + listener] = function() {
node['e' + type + listener](window.event, param);
};
node.attachEvent('on' + type, node[type + listener]);
return true;
}
return false;
}
function getParamsOfShareWindow(width, height) {
return ['toolbar=0,status=0,resizable=1,width=' + width + ',height=' + height + ',left=',(screen.width-width)/2,',top=',(screen.height-height)/2].join('');
}
function bindShareList() {
var link = encodeURIComponent(document.location); // 文章链接
var title = encodeURIComponent(document.title.substring(0,76)); // 文章标题
var source = encodeURIComponent('网站名称'); // 网站名称
var windowName = 'share'; // 子窗口别称
var site = 'http://www.example.com/'; // 网站链接
//var link ='http://v.163.com/movie/2011/2/D/L/M77U1DAGR_M77U1L2DL.html';
addListener(document.getElementById('facebook-share'), 'click', function() {
var url = 'http://facebook.com/share.php?u=' + link + '&t=' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
addListener(document.getElementById('twitter-share'), 'click', function() {
var url = 'http://twitter.com/share?url=' + link + '&text=' + title;
var params = getParamsOfShareWindow(500, 375);
window.open(url, windowName, params);
});
addListener(document.getElementById('delicious-share'), 'click', function() {
var url = 'http://delicious.com/post?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(550, 550);
window.open(url, windowName, params);
});
addListener(document.getElementById('kaixin001-share'), 'click', function() {
var url = 'http://www.kaixin001.com/repaste/share.php?rurl=' + link + '&rcontent=' + link + '&rtitle=' + title;
var params = getParamsOfShareWindow(540, 342);
window.open(url, windowName, params);
});
addListener(document.getElementById('renren-share'), 'click', function() {
var url = 'http://share.renren.com/share/buttonshare?link=' + link + '&title=' + title;
var params = getParamsOfShareWindow(626, 436);
window.open(url, windowName, params);
});
addListener(document.getElementById('douban-share'), 'click', function() {
var url = 'http://www.douban.com/recommend/?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(450, 350);
window.open(url, windowName, params);
});
addListener(document.getElementById('sina-share'), 'click', function() {
var url = 'http://v.t.sina.com.cn/share/share.php?url=' + link + '&title=' + title;
var params = getParamsOfShareWindow(607, 523);
window.open(url, windowName, params);
});
addListener(document.getElementById('netease-share'), 'click', function() {
var url = 'http://t.163.com/article/user/checkLogin.do?link=' + link + 'source=' + source + '&info='+ title + ' ' + link;
var params = getParamsOfShareWindow(642, 468);
window.open(url, windowName, params);
});
addListener(document.getElementById('tencent-share'), 'click', function() {
var url = 'http://v.t.qq.com/share/share.php?title=' + title + '&url=' + link + '&site=' + site;
var params = getParamsOfShareWindow(634, 668);
window.open(url, windowName, params);
});
}
bindShareList();
</script>
</body>
</html>
图标是在http://www.iconpng.com/search/series=%E5%88%86%E4%BA%AB%E6%8C%89%E9%92%AE下载的,放在一个目录就行了。