自码分享到SNS模块-Dshare 更简洁 更友好

之间用过 Bshare、百度分享等分享插件。有以下感触：

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

对此，有了一个想法，写一个适合大众基本要求的分享模块，让站长具有最高自定义权力，于是，Dshare诞生了（其实也就是一点点 js，被我忽悠大了，哈哈）。

Dshare 分享模块代码：

 //Dshare  
 dshare();  
 function dshare() {   
 var thelink = encodeURIComponent(document.location),    
 thetitle = encodeURIComponent(document.title.substring(0,60)),   
 windowName = '分享到',    param = getParamsOfShareWindow(600, 560),    
 //各大 SNS 站点的分享机制，可自定义    
 ds_tqq = 'http://v.t.qq.com/share/share.php?title='+thetitle + '&url=' + thelink + '&site=',    
 ds_qzone = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + thelink + 
 '&title=',    ds_tsina = 'http://v.t.sina.com.cn/share/share.php?url=' + thelink + 
 '&title=' + thetitle,    
 //web 前端中文站 www.lisa33xiaoq.net
 ds_douban = 'http://www.douban.com/recommend/?url=' + thelink + '&title=' + thetitle,    
 ds_renren = 'http://share.renren.com/share/buttonshare?link=' + thelink + '&title=' + 
 thetitle,    
 
 ds_kaixin = 'http://www.kaixin001.com/repaste/share.php?rurl=' + thelink + '&rcontent=' + 
 thelink + '&rtitle=' + thetitle,    

 ds_facebook = 'http://facebook.com/share.php?u=' + thelink + '&t=' + thetitle,    
 ds_twitter = 'http://twitter.com/share?url=' + thelink + '&text=' + thetitle;     

 $('.dshare').each(function() {    
 $(this).attr('title',windowName + $(this).text());    
 $(this).click(function() {     
 var httpUrl=eval($(this).attr('class').substring($(this).attr('class').lastIndexOf('ds_')));     
 window.open(httpUrl, windowName, param);    });   });    
 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('');   }  }

jQuery 实现，有需要的可以转为 js 版本

html 部分：

<div>分享到：
<a>腾讯微博</a><a>QQ 空间</a><a>新浪微博</a><a>人人网</a><a>开心网</a><a>豆瓣</a>
 <a>Facebook</a><a>Twitter</a></div>

css 部分：

.dshare{padding-left:20px;
margin-right:8px;height:16px;
line-height:16px;display:inline-block;
cursor:pointer;background:url(../img/share.png) no-repeat} 
.ds_tqq{background-position:0 0} 
.ds_tsina{background-position:0 -16px} .ds_douban{background-position:0 -32px} 
.ds_facebook{background-position:0 -48px} 
.ds_twitter{background-position:0 -64px} 
.ds_renren{background-position:0 -112px} 
.ds_kaixin{background-position:0 -128px} 
.ds_qzone{background-position:0 -96px}

记得改成你所需要的
如何使用，我就不多说了，代码注释的很详细！！
PS：只是简单的实现基本需求，更多交互有待你的参与。

【注：本文源自网络文章资源，由站长整理发布】