新会员白菜网送体验金前端开发
新会员白菜网送体验金用户体验

自码分享到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}

所需图片:

wp-content/themes/d4/img/share.png

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

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

评论 37

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

    I’ve read a few good stuff here. Definitely worth bookmarking for revisiting. I wonder how much effort you put to make such a fantastic informative site.

    Kristal Augeri1周前 (05-15)回复
  2. #31

    Hello! I’ve been reading your web site for a while now and finally got the courage to go ahead and give you a shout out from Kingwood Texas! Just wanted to say keep up the good work!

    Nonton Anime2周前 (05-11)回复
  3. #30

    Hi, ich habe Ihre Webseite bei der Suche nach Fernbus Hamburg im Internet gefunden. Schauen Sie doch mal auf meiner Seite vorbei, ich habe dort viele Testberichte zu den aktuellen Windeleimern geschrieben.

    cat2周前 (05-08)回复
  4. #29

    There’s definately a great deal to know about this issue. I like all of the points you made.

  5. #28

    Enjoyed the post.

    Droge huid1个月前 (04-19)回复
  6. #27

    Keep up the good work! Thanks.

    Huidinstituut1个月前 (04-18)回复
  7. #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.

    Magnesium drijven1个月前 (04-18)回复
  8. #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.

    Littekens verminderen1个月前 (04-18)回复
  9. #24

    Keep up the good work! Thanks.

    Littekens verminderen1个月前 (04-17)回复
  10. #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 Greminger1个月前 (04-08)回复
  11. #22

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

    my singing monsters2个月前 (03-28)回复
  12. #21

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

    Jospeh Gyles2个月前 (03-11)回复
  13. #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 Melis3个月前 (03-06)回复
  14. #19

    分享了

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

    都是好东西啊,收下了

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

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

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

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

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

    可以演示吗?

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

    很不错呀,收藏了!

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

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

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

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

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

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

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

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

    好文!我正要找的

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

    这个要收下啊。 😆

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

    严重期待中…

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

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

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

    其实更期待D4呀。呵呵

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

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

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

    研究这个费脑子啊

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

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

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

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

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

    灰常感谢 收下了 :mrgreen:

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

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

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

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

立即前往
博聚网