51工具盒子最近准备给博客增加一个一键分享到新浪微博的功能。看了一下新浪微博 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 类的元素就不需要手动初始化，直接就能使用。
默认效果如下：
测试一下新浪微博：
不过不知道为什么不能显示链接名称？我测试了一下其它网站的新浪微博分享功能都是可以正常显示链接名称的。
其它 QQ空间和好友之类的也可以正常分享。
配置
配置需要一个 JS 对象，下面是可配置的选项：
| 选项 | 类型 | 说明 |
|----------------------|--------|--------------------------------------------------------------------------|
| url | string | 网址，默认使用 window.location.href |
| source | string | 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" /> |
| title | string | 标题，默认读取 document.title 或者 <meta name="title" content="share.js" /> |
| origin | string | 分享 @ 相关 twitter 账号 |
| description | string | 描述, 默认读取head标签：<meta name="description" content="PHP弱类型的实现原理分析" /> |
| image | string | 图片, 默认取网页中第一个 img 标签 |
| sites | array | 启用的站点，例如 ['qzone', 'qq', 'weibo','wechat', 'douban'] |
| disabled | array | 禁用的站点，例如 ['google', 'facebook', 'twitter'] |
| wechatQrcodeTitle | string | 微信二维码提示文字 |
| wechatQrcodeHelper | string | 微信二维码提示文字 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 项目首页的使用说明。
版权声明：本文为原创文章，版权归 Mr. Ma's Blog 所有，转载请联系博主获得授权。
本文地址：https://www.misterma.com/archives/840/
如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。
