/** * 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(' '); } $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('