/** * share.js * * @example *
* $('.share-components').share({ * sites: ['qzone', 'qq', 'weibo','wechat'], * // ... * }); * ------------------------------------------- *
* */ ;(function ($) { $.fn.share = function ($options) { var $head = $(document.head); var $defaults = { url: location.href, site_url: location.origin, source: $head.find('[name=site], [name=site]').attr('content') || document.title, title: $head.find('[name=title], [name=title]').attr('content') || document.title, description: $head.find('[name=description], [name=description]').attr('content') || '', image: $('img:first').prop('src') || '', imageselector: undefined, weibokey: '', wechatqrcodetitle: '微信扫一扫:分享', wechatqrcodehelper: '

微信里点“发现”,扫一下

二维码便可将本文分享至朋友圈。

', wechatqrcodesize: 100, sites: ['weibo','qq','wechat','douban','qzone','linkedin','facebook','twitter','google'], disabled: [], //默认为空,为prepend时可以在分享图标列表末尾预置自定义图标实现其他功能 //
// //
mode: '', size: 'small', //type: desk mobile type: 'desk', initialized: false }; var $globals = $.extend({}, $defaults, $options); var $templates = { qzone : 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{url}}&title={{title}}&desc={{description}}&summary={{summary}}&site={{source}}&pics={{image}}', qq : 'http://connect.qq.com/widget/shareqq/index.html?url={{url}}&title={{title}}&source={{source}}&desc={{description}}&pics={{image}}', weibo : 'https://service.weibo.com/share/share.php?url={{url}}&title={{title}}&pic={{image}}&appkey={{weibokey}}', wechat : 'javascript:;', douban : 'http://shuo.douban.com/!service/share?href={{url}}&name={{title}}&text={{description}}&image={{image}}&starid=0&aid=0&style=11', linkedin : 'http://www.linkedin.com/sharearticle?mini=true&ro=true&title={{title}}&url={{url}}&summary={{summary}}&source={{source}}&armin=armin', facebook : 'https://www.facebook.com/sharer/sharer.php?u={{url}}&title={{title}}&description={{description}}&caption={{subhead}}&link={{url}}&picture={{image}}', twitter : 'https://twitter.com/intent/tweet?text={{title}}&url={{url}}&via={{site_url}}', google : 'https://plus.google.com/share?url={{url}}' }; var $arialabels = { qzone: "qq空间", qq: "qq", weibo: "微博", wechat: "微信", douban: "豆瓣", linkedin: "linkedin", facebook: "facebook", twitter: "twitter", google: "google" }; this.each(function() { if ($(this).data('initialized')) { return true; } var $data = $.extend({}, $globals, $(this).data()); if ($data.imageselector) { $data.image = $($data.imageselector).map(function() { return $(this).prop('src'); }).get().join('||'); } var $container = $(this).addclass('social-share'); if ($data.type == 'desk') { createicons($container, $data); createwechat($container, $data); } else if ($data.type == 'mobile') { createmobile($container, $data); } $(this).data('initialized', true); }); /** * 构造手机页面 */ function createmobile($container, $data) { //手机页面调用浏览器通用分享api 须https 且浏览器支持 if ('https:' == document.location.protocol && window.navigator.share) { var $linkimg = $(''); $container.append($linkimg); $container.click(function (e) { window.navigator.share({ //title:'test', url: $data.url, //text:'text' }); }); } else { $container.hide(); } } /** * 构造分享图标界面 */ function createicons ($container, $data) { var $sites = getsites($data); if (!$sites.length) return; //模式为prepend时 反转网站顺序 使用jquery.prepend()插入图标连接 $data.mode == 'prepend' ? $sites.reverse() : $sites var showmore = false; if ($sites.indexof('more') > -1) showmore = true; if ($data.mode == 'prepend' && showmore) createmore ($container, $data); $.each($sites, function (i, $name) { if ($name == '|') { var $separator = $('
') $data.mode == 'prepend' ? $container.prepend($separator) : $container.append($separator); return true; } var $url = makeurl($name, $data); if ($url == '') return true; var $link = $(''); if ($data.size == 'mid') { $link.append('

' + $arialabels[$name] + '

'); } $link.prop('aria-label', "分享到 "+$arialabels[$name]); $link.prop('href', $url); $name == 'wechat' ? $link.prop('tabindex', -1) : $link.prop('target', '_blank'); $data.mode == 'prepend' ? $container.prepend($link) : $container.append($link); }); if ($data.mode != 'prepend' && showmore) createmore ($container, $data); } /** * 构造more按钮及弹窗 */ function createmore($container, $data) { var $link = $(''); $link.prop('aria-label', "更多"); if ($data.size == 'mid') { $link.append('

更多

'); } var $dialog = $(''); var $dialogtop = $('
分享到
'); var $closebtn = $(''); $closebtn.click(function (e) { $dialog.hide(); e.stoppropagation(); }); $dialogtop.append($closebtn); $dialog.append($dialogtop); $dialogmid = $('
'); $sitecontainer = $(''); $.each($defaults.sites, function (i, $name) { //var $siteblock = $('
'); var $siteblock = $('
  • '); var $link = $(''+$arialabels[$name]+''); var $url = makeurl($name, $data); $link.prop('aria-label', "分享到 "+$arialabels[$name]); $link.prop('href', $url); $name == 'wechat' ? $link.prop('tabindex', -1) : $link.prop('target', '_blank'); $siteblock.append($link); $sitecontainer.append($siteblock); }); $dialogmid.append($sitecontainer); $dialog.append($dialogmid); $link.click(function () { $dialog.show(); }); $container.append($link); $container.append($dialog); } /** * 构造微信分享二维码 */ function createwechat ($container, $data) { var $wechat = $container.find('a.icon-wechat,a.icon-wechat-big'); if (!$wechat.length) return; $wechat.append('

    '+$data.wechatqrcodetitle+'

    '+$data.wechatqrcodehelper+'
    '); $wechat.find('.qrcode').qrcode({render: 'image', size: $data.wechatqrcodesize, text: $data.url}); // if ($wechat.offset().top < 100) { // $wechat.find('.wechat-qrcode').addclass('bottom'); // } } /** * 获取分享网站列表 */ function getsites ($data) { var $sites = ($data['sites'].length ? $data['sites']: []).slice(0); var $disabled = $data['disabled']; if (typeof $sites == 'string') $sites = $sites.split(/\s*,\s*/); if (typeof $disabled == 'string') $disabled = $disabled.split(/\s*,\s*/); //微信中不显示分享到微信 if (runninginwechat()) $disabled.push('wechat'); //从网站列表中移除禁用列表 $disabled.length && $.each($disabled, function (i, el) { var removeitemindex = $.inarray(el, $sites); if (removeitemindex !== -1) { $sites.splice(removeitemindex, 1); } }); return $sites; } /** * 构造分享url */ function makeurl ($name, $data) { var $template = $templates[$name]; if (!$template) return ''; $data['summary'] = $data['description']; for (var $key in $data) { if ($data.hasownproperty($key)) { var $camelcasekey = $name + $key.replace(/^[a-z]/, function($str){ return $str.touppercase(); }); var $value = encodeuricomponent($data[$camelcasekey] === undefined ? $data[$key] : $data[$camelcasekey]); $template = $template.replace(new regexp('{{'+$key.touppercase()+'}}', 'g'), $value); } } return $template; } /** * 是否运行在微信中 */ function runninginwechat() { return /micromessenger/i.test(navigator.useragent); } /** * 是否运行在移动端 */ function ismobilescreen () { return $(window).width() <= 768; } }; // 加载share插件 $(function () { $('.social-share').share(); }); })(jquery);