share.js輕鬆分享/邀請

GitHub地址

　　https://github.com/overtrue/share.js

 

　　

 

 

安裝

安裝的方法不少,你們選擇本身合適的進行安裝就好。

clone

$ git clone https://github.com/overtrue/share.js.git

 

 npm

npm install social-share.js

 

bower

bower install social-share.js

注：亦可以使用 CDN，引入 share.min.css 與 social-share.min.js 兩個連接。

 

使用

HTML

<div class="inner-meta clearfix social-share"></div>

JS

var $config = {
        title: '你好,美食',
        description: '我在你好美食,分享吃貨間的快樂,如今邀請你的加入~快來和我一塊兒分享美食吧~',
        url: 'http://hellofood.fun/register.html?id=' + id,
        source: 'http://hellofood.fun/register.html?id=' + id,
        image: 'http://hellofood.fun/webicon.png',
        // summary : '吃貨召喚', //至關於description
        // sites   : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啓用的站點
        disabled: ['google', 'facebook', 'twitter', 'linyin'], // 禁用的站點
        wechatQrcodeTitle: "微信掃一掃：分享", // 微信二維碼提示文字
        wechatQrcodeHelper: '當即下載發送專屬二維碼,邀請朋友加入',
    };

    socialShare('.social-share', $config);

 

效果

詳解

除了直接配置外,share.js配置項還支持date-xx

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

 　　

設置站點爲微博/QQ/空間

<div class="social-share" data-sites="weibo, qq, qzone"></div>

 

 禁用微信/FaceBook/twitter/google

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

 

指定移動設備顯示圖標

<div class="share-component" data-mobile-sites="weibo,qq,qzone,tencent"></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>

PS:以上a標題會自動加上分享連接（a 標籤必須帶 icon-NAME 屬性，否則分享連接不會自動加上）

　　

下載後能夠看看源碼,源碼裏面能夠查看到具體配置和詳細描述