social share

社群分享

社交分享小工具支援：微信、微博、linkedin、github、google+、rss、twitter、facebook 等。

現場示範：http://harttle.com/social-share/

依賴項：Fontawesome

下載：https://github.com/harttle/social-share/releases

安裝

導入Fontawesome：

 < link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css " >

匯入社交分享：

 < link rel =" stylesheet " href =" social-share/dist/social-share.min.css " >
< script src =" social-share/dist/social-share.min.js " > </ script > 

最小用量

 < div id =" share-area " > </ div > 

 var el = document . getElementById ( 'share-area' ) ;
var links = [ {
    url : 'http://harttle.com' ,
    target : '_qrcode'
} , {
    plugin : 'github' ,
    url : 'http://github.com/harttle'
} , {
    plugin : 'github' ,
    args : {
        id : 'harttle'
    }
} ] ;
window . socialShare ( el , links ) ; 

充分利用

 var links = [ {
    url : 'http://harttle.com' ,
    target : '_qrcode' ,
    color : '#fff' ,
    background : '#b5b5b5' ,
    icon : 'fa-code-fork' ,
    plugin : 'github' ,
    args : {
        id
    }
} ] ;
var options = {
    size : 'md'
} ;
window . socialShare ( el , links , options ) ; 

選項

連結地址

類型： String

預設值： location.href

該圖標的 URL。通常， links.url將被設定為對應錨點的href屬性。

連結.目標

類型： String

預設: ""

這將被設定為錨點的target屬性。可用目標： "_self" 、 "_parent" 、 "_blank" 、 "_top" 、 "_qrcode"

如果設定為_qrcode ， links.url將在模態中以 qrcode 影像開啟。同時， links.title將被設定為 QRcode 模態標題（預設： 'Share Link' ）。

連結.icon

類型： String

預設值： 'fa-code-fork'

共享按鈕的 Fontawesome 圖示類別。

連結顏色

類型： String

預設值： '#fff'

Fontawesome 圖示的顏色。

連結.背景

類型： String

預設值： '#b5b5b5'

Fontawesome 圖示的背景。

連結插件

類型： String

預設值： undefined

要使用的插件。通常，插件用於根據links.args設定的參數產生上述設定。

注意： links內的設定將覆蓋插件返回的設定。例如， github插件回應 url //foo ，而links.url設定為//bar 。結果 url 將是//bar 。

連結.args

類型： Object

預設: {}

傳遞給插件的參數，由links.plugin指定。

選項.大小

類型： String

預設值： "md"

按鈕的大小，可用值：

• "lg" （大）
• "md" （中）
• "sm" （小）
• "xs" （極小）

插件列表

微博（微博）

所有參數都會附加到 URL 查詢字串中。

 var link = {
    plugin : 'weibo' ,
    args : {
        appid : '<your App ID>' ,         // Default: ''
        title : 'About Harttle' ,         // Default: document.title
        url : '//harttle.com/about.html' // Default: location.href
        source : 'http://harttle.com'    // Any other query string you need...
    }
} ;

appid是微title認證的App url ，用於微博追蹤。

微信（微信）

 var link = {
    plugin : 'wechat'
} ;

wechat插件不接受任何參數，但您仍然可以設定links屬性：

 var link = {
    plugin : 'wechat' ,
    url : '//yet.another.url' ,
    color : 'yellow'
} ;

QR Code（二維碼）

 var link = {
    plugin : 'qrcode'
} ;

就像wechat插件一樣，有不同的背景和圖示。

RSS

 var link = {
    plugin : 'rss'
} ;

吉圖布

 var link = {
    plugin : 'github' ,
    args : {
        id : 'harttle'           // Your Github ID
    }
} ;

領英

 var link = {
    plugin : 'linkedin' ,
    args : {
        id : 'harttle'           // Your linkedin ID
    }
} ;

谷歌+

 var link = {
    plugin : 'google-plus' ,
    args : {
        id : 'harttle'           // Your Google+ ID
    }
} ;

嘰嘰喳喳

 var link = {
    plugin : 'twitter' ,
    args : {
        id : 'harttleharttle'    // Your twitter ID
    }
} ;

Facebook

 var link = {
    plugin : 'facebook' ,
    args : {
        id : 'harttle'           // Your facebook ID
    }
} 

如何編寫插件

插件用於根據links.args產生link物件。例如github外掛：

 ( function ( socialShare ) {
    socialShare . plugin ( 'github' , function ( args ) {
        return {
            url : 'https://github.com/' + args . id ,
            background : '#b5b5b5' ,
            icon : 'fa-github'
        } ;
    } ) ;
} ) ( window . socialShare ) ;

要使用此插件，只需將plugin設為"github" ，並指定參數：

 var links = [ {
    plugin : 'github' ,
    args : {
        id : 'harttle'
    }
} ] ;

這相當於：

 var links = [ {
    url : 'https://github.com/harttle' ,
    background : '#b5b5b5' ,
    icon : 'fa-github'
} ] ; 

貢獻指南

歡迎您以任何方式做出貢獻。雖然我們建議遵循以下指導方針：

1. 分叉這個倉庫。
2. 在src/plugins/中加入您的插件。
3. 執行grunt來建立dist/檔案。
4. 在demo/index.js中測試您的插件
5. 提交並發出拉取請求。