为网站添加分享按钮

网址:http://www.neoease.com/add-share-buttons/

为了增加文章在类似读者群体中的关注度, 刚刚在博客添加了文章分享按钮.

网上能找到很多提供分享按钮功能的控件和插件, 但是往往功能过于强大. 大部分插件将分享, 收藏, 订阅等功能全集合与一身, 涵盖海内外几乎所有的相关服务. 其中一些提供了个性化设置, 可以筛选服务, 但是同样耗费了大量资源 (图片和代码); 还有一些插件隐藏了部分分享按钮, 以减少对页面空间的需求, 但同时交互形式却变得复杂. 所以我自己写了一段代码来实现这个功能, 现在分享一下.

分享按钮 DEMO

HTML

<div id="share">
	Share on:
	<a rel="nofollow" id="facebook-share" title="Facebook">Facebook</a>
	<a rel="nofollow" id="twitter-share" title="Twitter">Twitter</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>

CSS

#share,#share a{line-height:16px}
#share a{display:inline-block;width:16px;height:16px;text-indent:-999em;cursor:pointer;margin-left:5px;background:url(http://photo.tuhigh.com/pics/1044/1024/187252t1287897845550_o.png) no-repeat}
#share a#facebook-share{background-position:0 0}
#share a#twitter-share{background-position:0 -16px}
#share a#delicious-share{background-position:0 -32px}
#share a#kaixin001-share{background-position:0 -48px}
#share a#renren-share{background-position:0 -64px}
#share a#douban-share{background-position:0 -80px}
#share a#sina-share{background-position:0 -96px}
#share a#netease-share{background-position:0 -112px}
#share a#tencent-share{background-position:0 -128px}

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/'; // 网站链接
 
	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();

jQuery (JavaScript 和 jQuery 代码任选其一)

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();

这些分享按钮包括了社区转贴和微博推广两种类型, 因为某些服务的用户群体跟我的分享文章不匹配, 没有加进来, 要加入其他分享按钮的朋友请自行研究和添加.