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

Posted 沉默王二

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了social-share,社会化分享组件之jquery版相关的知识,希望对你有一定的参考价值。

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

原生的social-share(可通过harttle/social-sharegit进行下载)有两点遗憾:

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

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

一、效果图

这里写图片描述

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

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

二、实例讲解

①、引入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>
  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就介绍完毕了,希望对你有所帮助。

以上是关于social-share,社会化分享组件之jquery版的主要内容,如果未能解决你的问题,请参考以下文章

微博QQ空间等社交分享插件

Android 友盟社会化组件-分享实现

Android集成友盟社会化分享功能

Android记录16-友盟第三方登录分享实现

社会化统计工具分享之Google分析cnzz51la百度统计和Js比较

iOS小技能: 社会化分享