关注前端开发
关注用户体验

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

Dshare是专属大前端的分享模块,浩子码。

首先,大前端用过Bshare、百度分享等分享插件。有以下感触:

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

对此,有了一个想法,写一个适合大众基本要求的分享模块,让站长具有最高自定义权力,于是,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,
			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}

所需图片:

http://www.daqianduan.com/wp-content/themes/d4/img/share.png

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

赞(1)
未经允许不得转载:大前端 » 自码分享到SNS模块-Dshare 更简洁 更友好
分享到: 更多 (0)

评论 33

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #28

    Enjoyed the post.

  2. #27

    Keep up the good work! Thanks.

  3. #26

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  4. #25

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

  5. #24

    Keep up the good work! Thanks.

  6. #23

    I am frequently to blogging and that i truly appreciate your site content. The article has truly peaks my interest. Let me bookmark your web site and maintain checking for brand new details.

    Les Greminger2周前 (04-08)回复
  7. #22

    contact lens are not only for fashion but it can also protect your eyes from dust and UV radiation,.

  8. #21

    i appreciate you for telling!. “What is written without effort is in general read without pleasure.” by Samuel Johnson..

    Jospeh Gyles1个月前 (03-11)回复
  9. #20

    Pretty nice post. I just stumbled upon your weblog and wanted to say that
    I have really enjoyed surfing around your blog posts.
    After all I will be subscribing to your rss feed and I hope you
    write again very soon!

    Remco Melis2个月前 (03-06)回复
  10. #19

    分享了

    qianrenzhang4年前 (2015-01-30)回复
  11. #18

    都是好东西啊,收下了

    mays5年前 (2014-11-10)回复
  12. #17

    哥,FF13.01版码没换行跑不见了。

    Genesy7年前 (2012-07-17)回复
  13. #16

    分享的试过不少,试试浩子的Dshare

    骆恒安7年前 (2012-05-19)回复
  14. #15

    可以演示吗?

    trzjloveyou7年前 (2012-05-19)回复
  15. #14

    很不错呀,收藏了!

    lft6187年前 (2012-04-11)回复
  16. #13

    为什么我用到网站上就没有效果呢?

    郁闷中8年前 (2011-11-14)回复
    • 在需要显示的地方调用这个函数了吗? 还有就是图片是否上传?

      浩子8年前 (2011-11-15)回复
      • 我再试试看,谢谢!

        郁闷中8年前 (2011-11-15)回复
  17. #12

    请问高手,bShare的一键通是怎么做的,能帮示范一下吗?网上找不着啊!

    好猜网王乐猜8年前 (2011-11-09)回复
    • 没怎么研究过Bshare,不能解答你的问题,so sorry

      浩子8年前 (2011-11-10)回复
  18. #11

    好文!我正要找的

    好猜网王乐猜8年前 (2011-11-08)回复
  19. #10

    这个要收下啊。 😆

    星尔8年前 (2011-09-06)回复
  20. #9

    严重期待中…

    John8年前 (2011-09-02)回复
  21. #8

    好久没来了,变化真大,没想留句话的 👿 ,看到那句“严重鄙视飘过不留毛的鸟” ❓

    格子8年前 (2011-08-30)回复
  22. #7

    其实更期待D4呀。呵呵

    Kimcool8年前 (2011-08-19)回复
  23. #6

    大前端的jquery效果贼棒!特喜欢

    滑触线8年前 (2011-08-13)回复
  24. #5

    研究这个费脑子啊

    保健8年前 (2011-08-09)回复
  25. #4

    现在这代码基本了解一点 点

    华源8年前 (2011-08-09)回复
  26. #3

    http://www.cnblogs.com/trance/archive/2011/07/27/2118407.html
    我也写了一个简单的,增加了自定义标题和链接功能。楼主可以看看

    Trance8年前 (2011-08-05)回复
  27. #2

    灰常感谢 收下了 :mrgreen:

    iSayme8年前 (2011-08-04)回复
  28. #1

    还不错啊 前几天也写了一个类似的东西

    前端开发-武方博8年前 (2011-08-04)回复

themebetter 国内更好的WordPress主题服务商

立即前往