Social-share, the social sharing component of the jquery edition

Social-share, as its terse "support (QR code), Weibo, Github, google++, LinkedIn, Twitter, Facebook, RSS ..., supports four size settings", simple enough, beautiful enough. Before using the "Baidu share" component, but found that the nasty implanted backstage ads, the page refreshed once, the ads will be loaded once, let life boring. Today, it is fortunate to find this lightweight social-share, so it is very attractive, so take this opportunity to promote to more people.

Native Social-share (available for download via Harttle/social-sharegit) has two points of regret:

1. Sharing of QQ space is not supported.
2. Sharing Sina is limited to text description, lack of support for images.

So now, let's solve the two problems.

One

Without animated GIF, the picture looks a bit monotonous. Then it is necessary to introduce the text description:

1. Baidu to share the object too complex, let a person somewhat dazzled, on the current domestic social exchange platform, QQ space, Sina Weibo, the user base is enough, then select these three, I think more convenient flow of transmission.
2. The layout of the page is very refreshing and the parameter configuration is super simple.
3. No extra code is implanted, and no ads are planted.

Second, the example explains ①, introduces Jquery.js and 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

For jquery, it is not recommended to use a CDN, as it is difficult to ensure that the CDN network is unblocked and that the entire project is almost paralyzed once jquery is not introduced. So, you might ask, "So why is your font-awesome.css using a CDN?" ", my answer is:" The font-awesome.css version of the change very frequently, coupled with the lack of FONT-AWESOME.CSS, the project will only be in some of the design, the effect is not small. ”

②, introduction of Qrcode.min.js

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

The generation of two-dimensional code.

③, Social-share.css

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

For the QQ space labeling style. Here is my local (you discretion), font-awesome the latest version of the QQ space has not yet joined the icon.

Other styles do not need to be changed, repeat, native files are downloaded from Harttle/social-share git website.

④, Social-share.js

 function render(link, config) {    varCLS =' fa-'+ (Config.classmapping[link.style] | | link.style), $li = $ (' <li class= ' social-share-item ' > '), $a = $ (' <a> ', {///Here is the path to add a picture to the hrefHref: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;}

On the native Social-share.js file, just follow the instructions in the note to add the path to the href of the a tag, and you can handle it yourself. QQ space sharing, Sina Weibo sharing, sharing, the key is how the href attribute of a tag is encapsulated, then see how to configure the href attribute of a tag in the following three steps.

⑤, a-label href

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

Defines the Linkarr for Social-share, which is the HREF attribute value that encapsulates the a tag.

• QQ Space
  
  • Style defined as Qqzone
  • URL parameter variable value mainly has pics, title, url (if the URL is incorrect, use Firebug can see QQ space sharing tips error)
• Sina Weibo
  
  • Style defined as Weibo
  • URL parameter variable value mainly has pic (and QQ space different), title, URL
• 
  
  • Style defined as WeChat
  • URL is location.href, generate two-dimensional code with

⑥, page layout

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

1. Class is defined as XS, and the opening mentions Social-share has four size settings, XS is the smallest, there are examples in the native demo.
2. Pic, pass the corresponding share image, currently supports a picture, multi-image is not known.

⑦, loading Social-share

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

Pass picture pic to Social-share.

To this end, the jquery version of the social sharing component Social-share is complete, I hope to help you.

Social-share, the social sharing component of the jquery edition