使用的是一個外掛share.js 因為我寫的是靜態網頁，所以直接下載原始檔，然後引用到專案中。引用cdn可以在這裡獲取cdnjs-share.js

下載的原始檔中，有demo可以參考。demo分兩種，依賴jquery和不依賴jquery的。

1. Share.js

Share.js是一款一鍵轉發工具，它可以一鍵分享到微博、QQ空間、QQ好友、微信、騰訊微博、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等社交網站，使用字型圖示。

2. 安裝

有3種安裝方式：

使用 npm

npm install social-share.js

: 使用 cdnjs，引入 share.min.css 與 share.min.js 兩個連結就好。

手動下載或者 git clone 本專案。

3. 使用

3.1. HTML:

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

<!--  css & js -->
<link href="dist/css/share.min.css">
<script src="dist/js/share.min.js"></script>
// 當你使用類名為 `social-share` 時不需要手動初始化

3.2. 自定義配置

所有配置可選， 通常預設就滿足需求：

可用的配置有：

url                 :
 
 '', // 網址，預設使用 window.location.href
source              : '', // 來源（QQ空間會用到）, 預設讀取head標籤：<meta name="site" content="http://overtrue" />
title               : '', // 標題，預設讀取 document.title 或者 <meta name="title" content="share.js" />
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>'

以上選項均可通過標籤 data-xxx 來設定：

駝峰轉為中橫線，如wechatQrcodeHelper 的data標籤為data-wechat-qrcode-helper

3.2.1. 禁用 google、twitter、facebook 並設定分享的描述

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

3.2.2. 設定微信二維碼標題

<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個圖示了。

引用

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

下載地址：