每天推薦第 2 期|share.js 一鍵分享工具
每天推薦有價值的網站、工具、課程、書籍、文章，每天凌晨之前釋出。
前面寫文章分享的時候用到一個非常好的分享工具，今天就給大家推薦一這個分享工具 -ofollow,noindex">share.js 。share.js可以一鍵分享到微博、QQ空間、QQ好友、微信、騰訊微博、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等社交網站的工具。
share.js 效果圖截圖
安裝
有3種安裝方式：
-
使用npm
npm install social-share.js
-
使用bower
bower install social-share.js
-
使用cdnjs ，引入
share.min.css與social-share.min.js兩個連結就好。 (感謝@mdluo ) -
手動下載或者 git clone 本專案。
使用
HTML:
<div class="social-share"></div> <!--css & js --> <link rel="stylesheet" href="dist/css/share.min.css"> <script src="dist/js/social-share.min.js"></script> // 當你使用類名為 `social-share` 時不需要手動初始化
自定義配置
所有配置可選 ， 通常預設就滿足需求：
可用的配置有：
url: '', // 網址，預設使用 window.location.href source: '', // 來源（QQ空間會用到）, 預設讀取head標籤：<meta name="site" content="http://overtrue" /> title: '', // 標題，預設讀取 document.title 或者 <meta name="title" content="share.js" /> origin: '', // 分享 @ 相關 twitter 賬號 description: '', // 描述, 預設讀取head標籤：<meta name="description" content="PHP弱型別的實現原理分析" /> image: '', // 圖片, 預設取網頁中第一個img標籤 sites: ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啟用的站點 disabled: ['google', 'facebook', 'twitter'], // 禁用的站點 wechatQrcodeTitle: '微信掃一掃：分享', // 微信二維碼提示文字 wechatQrcodeHelper: '<p>微信裡點“發現”，掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>'
示例程式碼：
var $config = {
title: '234',
description: '123',
wechatQrcodeTitle: "微信掃一掃：分享", // 微信二維碼提示文字
wechatQrcodeHelper: '<p>微信裡點“發現”，掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>',
};
socialShare('.social-share-cs', $config);
以上選項均可通過標籤data-xxx
來設定：
駝峰轉為中橫線，如wechatQrcodeHelper
的data標籤為data-wechat-qrcode-helper
禁用 google、twitter、facebook 並設定分享的描述
<div class="share-component" data-disabled="google,twitter,facebook" data-description="Share.js - 一鍵分享到微博，QQ空間，騰訊微博，人人，豆瓣"></div>
設定微信二維碼標題
<div class="social-share" data-wechat-qrcode-title="請開啟微信掃一掃"></div>
針對特定站點使用不同的屬性（title, url, description,image...）
<div class="social-share" data-weibo-title="這個標題只有的分享到微博時有用，其它標題為全域性標題" data-qq-title="分享到QQ時用此標題"></div>
你也可以自定義圖示
使用: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
屬性，不然分享連結不會自動加上）。
如果你想在分享icon列表中內建一些元素，比如放一個收藏按鈕在分享按鈕的後面：
<div class="social-share"> <a href="javascript:;" class="social-share-icon icon-heart"></a> </div>
這樣並沒有實現，因為結果是所有的分享按鈕都建立在了收藏按鈕的後面了，這時候你就可以用data-mode="prepend"
來確定分享按鈕建立的方式。
<div class="social-share" data-mode="prepend"> <a href="javascript:;" class="social-share-icon icon-heart"></a> </div>
這樣，所有的分享圖示就會建立在容器的內容前面，反之可以用append
建立在容器內容後面，當然這是預設的，也不需要這麼做。
指定移動裝置上顯示的圖示
<div class="share-component" data-mobile-sites="weibo,qq,qzone,tencent"></div>
當在手機上開啟該頁面的時候就只會顯示這4個圖示了。
歡迎貢獻程式碼及提建議！
Requirejs
本外掛支援使用Requirejs載入，Jquery版本參考如下：
requirejs.config({
paths: {
jquery: '//cdn.bootcss.com/jquery/2.2.4/jquery.min',
share: '//cdn.bootcss.com/social-share.js/1.0.15/js/jquery.share.min'
},
shim: {
share:['jquery']
}
})
requirejs(['jquery','share'],function ($){
$('.target').share({
// settings
})
})
無依賴版本直接載入即可，使用參考如下：
requirejs.config({
paths: {
share: '//cdn.bootcss.com/social-share.js/1.0.15/js/social-share.min'
},
})
requirejs(['share'],function (){
//ele:指定初始化的元素，可以是單個元素也可以是元素陣列
window.socialShare(ele,{
// settings
})
})
share.js 是安正超大神的作品，安正超 大神號稱輪子超，除了 share.js 外還有許多開源專案，如：
- pinyin - 基於詞庫的中文轉拼音優質解決方案。
- easy-sms - 一款滿足你的多種傳送需求的簡訊傳送元件
- easywechat - 世界上最好的微信開發 SDK
想了解安正超大神更多的開源專案請點選檢視開源專案
有用過 share.js 的大佬可以點個贊，讓我知道這個對你有用，如果你有更好的解決方案可以留言推薦給更多的人使用。