rbtshare-分享内容到人人网、开心网、QQ空间、新浪微博等SNS站点

社会化分享按钮对于现在的互联网来说已经非常普及,在SNS(社交网络服务)大行其道的今天,实时的把在网上找到的自己喜欢的内容分享给自己的圈子更成为了网民们的一种新的娱乐方式。分享内容到QQ空间、新浪微博等代码…通过访客不断的分享行为,来提升自己网站的优质外链、增加社会化流量、带来更多的用户。类似的服务提供商有百度分享、加网、passit、bshare,这些分享插件我都用过,。有以下感触:

1、庞大,加载的图片很大,代码很多;
2、给网站新增3个以上的请求;
3、自带分享统计,对80%的站点来说没有必要,加载的js可以省了;

说到这里还是自己动手按照自己的需求写一个把,对此rbtshare诞生了。
rbtshare有一下特点:

1、代码少,js只有1.86。压缩以后更小;
2、自定义程度高,可根据自己的需求增加/减少分享按钮;
3、js和css分离,js本地化,请求最小化;

其实就是一段javascript代码而已 🙂 !

var rbtShare = rbtShare || {}; 
(function() {
	var U = encodeURIComponent(location.href),
	T = encodeURIComponent(document.title),
	snsKey = {'tsina':'3180533776',"tqq":"e41eabc53545472187feaafda012b119"},
	rbtList = ['qzone,QQ\u7a7a\u95f4,http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey', 'tsina,\u65b0\u6d6a\u5fae\u535a,http://v.t.sina.com.cn/share/share.php', 'baidu,\u767e\u5ea6\u7a7a\u95f4,http://apps.hi.baidu.com/share/', 'renren,\u4eba\u4eba\u7f51,http://share.renren.com/share/buttonshare', 'tqq,\u817e\u8baf\u5fae\u535a,http://v.t.qq.com/share/share.php', 'kaixin,\u5f00\u5fc3\u7f51,http://www.kaixin001.com/repaste/share.php'],
	shareId = 'share',
	base={
		list: function(s) {
            var m = s.split(','),
            n = m[1],
            u = m[2],
            c = m[0];
			switch(c){
				case 'tsina':
				u = u+'?appkey='+snsKey['tsina']+'&url='+U;
				break;
				case 'tqq' :
				u = u+'?appkey='+snsKey['tqq']+'&url='+U+'&title='+T;
				break;
				case 'qzone':
				u = u+'?url='+U+'&title='+T;
				break;
				case 'renren':
				u = u+'?link='+U+'&title='+T;
				break;
				case 'kaixin001':
				u = u+'?rurl='+U+'&rtitle='+T;
				break;
				case 'baidu':
				u = u+'?url='+U+'&title='+T;
				break;
			}
            return {
                name: n,
                url: u,
                cls: c
            }
        }
	};
	
	    rbtShare.fn = (function() {
			
        return {
            init: function() {
				var l = rbtList.length;
				var a = [],
				h = inner ="";
				while (l--) {
                h = base.list(rbtList[l]),
                a.push('')
                }
				inner = a.reverse().join('')
				if(document.getElementById(shareId).length>0){
				document.getElementById(shareId).innerHTML=inner;
				}
			}
		}
		})();
		 rbtShare.fn.init();
		 
    
})();

看起来是不是像百度分享的js代码 🙂
可根据需要在rbtList增加分享按钮,格式[类,名称,地址]
css样式

#share{height:32px; margin:5px 0;}
#share a{ display:block;width:32px;height:32px; float:left;margin-right: 5px; background:url(images/share.gif) no-repeat 0 0; }
#share a.kaixin{ background-position:0 -32px;}
#share a.renren{ background-position:0 -64px;}
#share a.taobao{ background-position:0 -96px;}
#share a.douban{ background-position:0 -128px;}
#share a.xianguo{ background-position:0 -160px;}
#share a.tsohu{ background-position:0 -192px;}
#share a.t163{ background-position:0 -224px;}
#share a.qzone{ background-position:0 -256px;}
#share a.pengyou{ background-position:0 -288px;}
#share a.tqq{ background-position:0 -320px;}
#share a.feixin{ background-position:0 -352px;}
#share a.facebook{ background-position:0 -384px;}
#share a.twitter{ background-position:0 -416px;}
#share a.baidu{ background-position:0 -448px;}

需要用到的图片

在你需要调用的地方加一个ID为“share”的div就可以啦!
是不是比那些所谓的分享插件简单多了?

发表评论

电子邮件地址不会被公开。 必填项已用*标注