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

亦凉 2021-05-10 11:18 542阅读 0赞

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

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

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

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

### 一、效果图 ###

![这里写图片描述][20160517151726417]

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

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

### 二、实例讲解 ###

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

tips：

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

#### ②、引入qrcode.min.js ####

二维码的生成。

#### ③、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官网][harttle_social-share]下载。

#### ④、social-share.js ####

在原生的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，生成二维码用

#### ⑥、页面布局 ####

1.  class定义为xs，开篇有提到social-share有四种大小设置，xs为最小，原生demo中有例子。
2.  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就介绍完毕了，希望对你有所帮助。

[harttle_social-share]: https://github.com/harttle/social-share
[20160517151726417]: /images/20210506/238286561f6e4390a5688a28c269a32f.png