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

自码分享到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:只是简单的实现基本需求,更多交互有待你的参与。

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

评论 24

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

    分享了

    qianrenzhang2年前 (2015-01-30)回复
  2. #18

    都是好东西啊,收下了

    mays2年前 (2014-11-10)回复
  3. #17

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

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

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

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

    可以演示吗?

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

    很不错呀,收藏了!

    lft6185年前 (2012-04-11)回复
  7. #13

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

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

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

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

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

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

      浩子5年前 (2011-11-10)回复
  9. #11

    好文!我正要找的

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

    这个要收下啊。 😆

    星尔6年前 (2011-09-06)回复
  11. #9

    严重期待中…

    John6年前 (2011-09-02)回复
  12. #8

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

    格子6年前 (2011-08-30)回复
  13. #7

    其实更期待D4呀。呵呵

    Kimcool6年前 (2011-08-19)回复
  14. #6

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

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

    研究这个费脑子啊

    保健6年前 (2011-08-09)回复
  16. #4

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

    华源6年前 (2011-08-09)回复
  17. #3

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

    Trance6年前 (2011-08-05)回复
  18. #2

    灰常感谢 收下了 :mrgreen:

    iSayme6年前 (2011-08-04)回复
  19. #1

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

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

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

立即前往