最近准备给博客增加一个一键分享到新浪微博的功能。看了一下新浪微博 API 的说明发现特别麻烦，还需要涉及到实名认证之类的，最终只能放弃。

在逛 Github 的时候发现一个能实现分享网站到 新浪微博、QQ空间、QQ好友、Facebook …… 的 JS 库。有了这个 JS 库我就没必要再去每个平台注册 API。

Github 地址：https://github.com/overtrue/share.js/ 。

调用

用 npm 安装：

npm install social-share.js

也可以直接在 HTML 中引入 CSS 和 JS，如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">
<div class="social-share"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>

注意！上面的 CSS 需要在 head 区域内引入。这里直接使用 CDN 的地址。

CDN 地址页面：https://cdnjs.com/libraries/social-share.js。

主要就是需要引入 share.min.css 和 social-share.min.js 。

只要 HTML 中包含 social-share 类的元素就不需要手动初始化，直接就能使用。

默认效果如下：

social-share.js 默认效果

测试一下新浪微博：

social-share.js 分享到新浪微博

不过不知道为什么不能显示链接名称？我测试了一下其它网站的新浪微博分享功能都是可以正常显示链接名称的。

其它 QQ空间和好友之类的也可以正常分享。

配置

配置需要一个 JS 对象，下面是可配置的选项：

选项类型说明
urlstring网址，默认使用 window.location.href
sourcestring来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
titlestring标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
originstring分享 @ 相关 twitter 账号
descriptionstring描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" />
imagestring图片, 默认取网页中第一个 img 标签
sitesarray启用的站点，例如 ['qzone', 'qq', 'weibo','wechat', 'douban']
disabledarray禁用的站点，例如 ['google', 'facebook', 'twitter']
wechatQrcodeTitlestring微信二维码提示文字
wechatQrcodeHelperstring微信二维码提示文字 HTML，例如 <p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>

下面是简单演示：

var cfg = {
    sites: ['qzone', 'qq', 'weibo', 'wechat'],
    image: "https://www.misterma.com/img/LinuxLogo.jpg"
}
socialShare('.social-share', cfg);

其中 .social-share 就是用来包裹分享按钮的元素类名。

上面的选项也可以通过标签的 data-xxx 属性来配置，如下：

<div class="share-component" data-disabled="google,twitter,facebook"></div>

上面设置了需要禁用的分享按钮。

驼峰转为中横线，如wechatQrcodeHelper 的data标签为data-wechat-qrcode-helper

自定义图标

使用: data-initialized="true" 标签或者 initialized 配置项来禁用自动生成icon功能。

<div class="social-share" data-initialized="true">
    <a href="#" class="social-share-icon icon-weibo"></a>
    <a href="#" class="social-share-icon icon-qq"></a>
    <a href="#" class="social-share-icon icon-qzone"></a>
</div>

以上a标题会自动加上分享链接（a 标签必须带 icon-NAME 属性，不然分享链接不会自动加上）。

指定移动设备显示的图标

<div class="share-component" data-mobile-sites="weibo,qq,qzone,tencent"></div>

以上就是 social-share.js 的简单使用。

本文部分内容引用了 Github 项目首页的使用说明。