social-share，社会化分享组件之jquery版

social-share，诚如其简洁所述“支持微信（二维码）、微博、Github、Google++、LinkedIn、Twitter、Facebook、RSS…，支持四种大小设置”，够简洁，够漂亮。之前使用的“百度分享”组件，却发现可恶的植入了后台广告，页面刷新一次，广告就加载一次，让人生厌。今天有幸发现这款轻量级的social-share，真让人爱不释手，所以借此机会推广给更多需要的人。

原生的social-share（可通过harttle/social-sharegit进行下载）有两点遗憾：

不支持QQ空间的分享。
分享新浪时只限于文字说明，缺少图片的支持。

那么现在呢，我们来解决掉上述两个问题。

一、效果图

没有制作gif动画，图片看起来有些单调了。那么有必要通过文字描述介绍一下：

百度分享的对象过于繁杂，让人有些眼花缭乱；就目前国内的社会化交流平台来说，QQ空间、新浪微博、微信的用户基数足够多，那么选定这三家，我认为更便于流量的传播。
页面布局超清爽，参数配置超简单。
没有任何多余的代码植入，更不会植入广告。

二、实例讲解

①、引入jquery.js和font-awesome.css

<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/components/jquery/jquery-1.9.1.min.js"></script>

tips：

对于jquery，特别不建议使用cdn，因为很难保证cdn的网络一直通畅，一旦jquery没有引入，整个项目几乎处于瘫痪状态。那么，你可能会问：“既然如此，为啥你的font-awesome.css要用cdn呢？”，我的回答是：“font-awesome.css版本更迭很频繁，再加上缺少font-awesome.css，项目只会在某一些式样上没有效果，影响不大。”

②、引入qrcode.min.js

<script type="text/javascript" src="${ctx}/components/share/qrcode.min.js"></script>

二维码的生成。

③、social-share.css

.social-share .qqzone a {background-position: 0 -756px;background-image: url("../../assets/images/bgs.png");background-repeat: no-repeat;
}

为qq空间加上图标式样。这里用的是我本地的（你酌情处理），font-awesome最新版中暂时还没有加入qq空间的图标。

其他式样不需要改动，再重复一次，原生文件从harttle/social-share git官网下载。

④、social-share.js

function render(link, config) {var cls = 'fa-' + (config.classMapping[link.style] || link.style), $li = $('<li class="social-share-item">'), $a = $('<a>', {// 此处为href上添加图片的路径href : link.url.replaceAll('{pic}', config.pic) || '#'}), $i = $('<i>', {class : 'fa ' + cls});$a.append($i);if (config.blank)$a.attr('target', '_blank');$li.append($a);$li.addClass(link.style);if ([ 'wechat', 'qrcode' ].indexOf(link.style) > -1) {$a.removeAttr('target');$li.click(function() {qrCodeHandler(link.url);return false;});}return $li;
}

在原生的social-share.js文件上，只需要按照注释中的提示，在a标签的href上加上图片的路径，至于使用怎样的方法，你可以自行处理。qq空间分享、新浪微博分享、微信分享，其关键之所在于a标签的href属性如何封装，那么接下来看如何通过以下三个步骤来配置a标签的href属性。

⑤、a标签的href

var YUNM = {linkArr : [ {style : 'qqzone',url : 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?pics={pic}&' + $.param({title : document.title,url : encodeURIComponent(location.href)}),}, {style : 'weibo',url : 'http://v.t.sina.com.cn/share/share.php?pic={pic}&' + $.param({appid : 'xxx',title : document.title,url : encodeURIComponent(location.href)})}, {style : 'wechat',url : location.href} ],
}

为social-share定义linkArr，也就是封装好a标签的href属性值。

qq空间
- style定义为qqzone
- url的参数变量值主要有pics、title 、url （假如URL不正确的话，用firebug可查看qq空间分享的提示错误）
新浪微博
- style定义为weibo
- url的参数变量值主要有pic（和qq空间不同）、title 、url
微信
- style定义为wechat
- url为location.href，生成二维码用

⑥、页面布局

<section class="xs" pic="${deal.attrs.image_str}"></section>

class定义为xs，开篇有提到social-share有四种大小设置，xs为最小，原生demo中有例子。
pic，传递对应的分享图片，目前支持一张图片，多图暂未了解。

⑦、加载social-share

$(function() {// 分享$('section.xs', $p).each(function() {var $this = $(this);YUNM.debug('section.xs' + $this.selector);$this.socialShare(YUNM.linkArr, {size : 'xs',pic : $this.attr("pic")});});
});

将图片pic传递到social-share。

到此为止，jquery版的社会化分享组件social-share就介绍完毕了，希望对你有所帮助。