Share.js

Share.js是一款一鍵轉(zhuǎn)發(fā)工具，它可以一鍵分享到微博、QQ空間、QQ好友、微信、騰訊微博、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等社交網(wǎng)站，使用字體圖標(biāo)。

安裝

有3種安裝方式：

使用 npm
```
npm install social-share.js
```
使用 cdnjs，引入 share.min.css 與 share.min.js 兩個鏈接就好。
手動下載或者 git clone 本項目。

使用

HTML:

<div class="social-share"></div>

<!--  css & js -->
<link href="dist/css/share.min.css">
<script src="dist/js/share.min.js"></script>

// 當(dāng)你使用類名為 `social-share` 時不需要手動初始化

自定義配置

所有配置可選，通常默認就滿足需求：

可用的配置有：

url                 : '', // 網(wǎng)址，默認使用 window.location.href
source              : '', // 來源（QQ空間會用到）, 默認讀取head標(biāo)簽：<meta name="site" content="http://overtrue" />
title               : '', // 標(biāo)題，默認讀取 document.title 或者 <meta name="title" content="share.js" />
description         : '', // 描述, 默認讀取head標(biāo)簽：<meta name="description" content="PHP弱類型的實現(xiàn)原理分析" />
image               : '', // 圖片, 默認取網(wǎng)頁中第一個img標(biāo)簽
sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啟用的站點
disabled            : ['google', 'facebook', 'twitter'], // 禁用的站點
wechatQrcodeTitle   : '微信掃一掃：分享', // 微信二維碼提示文字
wechatQrcodeHelper  : '<p>微信里點“發(fā)現(xiàn)”，掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>'

以上選項均可通過標(biāo)簽 data-xxx 來設(shè)置：

駝峰轉(zhuǎn)為中橫線，如wechatQrcodeHelper 的data標(biāo)簽為data-wechat-qrcode-helper

禁用 google、twitter、facebook 并設(shè)置分享的描述

<div class="share-component" data-disabled="google,twitter,facebook" data-description="Share.js - 一鍵分享到微博，QQ空間，騰訊微博，人人，豆瓣"></div>

設(shè)置微信二維碼標(biāo)題

<div class="social-share" data-wechat-qrcode-title="請打開微信掃一掃"></div>

針對特定站點使用不同的屬性（title, url, description,image...）

<div class="social-share" data-weibo-title="這個標(biāo)題只有的分享到微博時有用，其它標(biāo)題為全局標(biāo)題" data-qq-title="分享到QQ時用此標(biāo)題"></div>

你也可以自定義圖標(biāo)

使用: data-initialized="true" 標(biāo)簽或者 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標(biāo)題會自動加上分享鏈接（a 標(biāo)簽必須帶 icon-NAME 屬性，不然分享鏈接不會自動加上）。

如果你想在分享icon列表中內(nèi)置一些元素，比如放一個收藏按鈕在分享按鈕的后面：

<div class="social-share">
    <a href="javascript:;" class="social-share-icon icon-heart"></a>
</div>

這樣并沒有實現(xiàn)，因為結(jié)果是所有的分享按鈕都創(chuàng)建在了收藏按鈕的后面了，這時候你就可以用 data-mode="prepend" 來確定分享按鈕創(chuàng)建的方式。

<div class="social-share" data-mode="prepend">
    <a href="javascript:;" class="social-share-icon icon-heart"></a>
</div>

這樣，所有的分享圖標(biāo)就會創(chuàng)建在容器的內(nèi)容前面，反之可以用 append 創(chuàng)建在容器內(nèi)容后面，當(dāng)然這是默認的，也不需要這么做。

指定移動設(shè)備上顯示的圖標(biāo)

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

當(dāng)在手機上打開該頁面的時候就只會顯示這4個圖標(biāo)了。

引用

本項目中二維碼生成部分用到了開源組件：lrsjng/jquery-qrcode (MIT License)

下載地址：

Download .zip
Download .tar.gz

Share.js一鍵轉(zhuǎn)發(fā)工具

Share.js