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 屬性，不然分享鏈接不會自動加上）

　　

下載后可以看看源碼,源碼里面可以查看到具體配置和詳細描述