social share

ソーシャルシェア

ソーシャル共有ウィジェットのサポート: wechat、weibo、linkedin、github、google+、rss、twitter、facebook など。

ライブデモ: http://harttle.com/social-share/

依存関係: すばらしい

ダウンロード: https://github.com/harttle/social-share/releases

インストール

Fontwesome をインポート:

 < 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 ) ; 

オプション

リンク.url

タイプ: String

デフォルト: location.href

このアイコンの URL。通常、 links.url対応するアンカーのhref属性に設定されます。

リンク.ターゲット

タイプ: String

デフォルト： ""

これはアンカーのtarget属性に設定されます。利用可能なターゲット: "_self" 、 "_parent" 、 "_blank" 、 "_top" 、 "_qrcode"

_qrcodeに設定すると、 links.urlモーダル内の qrcode 画像として開きます。その間、 links.title QRcode モーダル タイトル (デフォルト: 'Share Link' ) に設定されます。

リンク.アイコン

タイプ: String

デフォルト: 'fa-code-fork'

共有ボタンの Fontwesome アイコン クラス。

リンク.カラー

タイプ: String

デフォルト: '#fff'

Fontwesome アイコンの色。

リンク.背景

タイプ: String

デフォルト: '#b5b5b5'

Fontwesome アイコンの背景。

リンク.プラグイン

タイプ: String

デフォルト: undefined

使用するプラグイン。通常、プラグインは、 links.argsで設定された引数に従って、上記の設定を生成するために使用されます。

注: links内の設定は、プラグインによって返される設定をオーバーライドします。たとえば、 githubプラグインは URL //fooで応答しますが、 links.urlは//barに設定されます。結果の URL は//barになります。

リンク.args

タイプ: Object

デフォルト： {}

プラグインに渡される引数。 links.pluginで指定されます。

オプション.サイズ

タイプ: String

デフォルト: "md"

ボタンのサイズ、使用可能な値:

• "lg" （大）
• "md" （ミディアム）
• "sm" （小さい）
• "xs" （非常に小さい）

プラグイン一覧

Weibo（微博）

すべての引数は 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 、マイクロ博覧のurlとtitleの接続に使用される、マイクロ博覧の App ID です。

Wechat（微信）

 var link = {
    plugin : 'wechat'
} ;

wechatプラグインは引数を受け入れませんが、 linksプロパティを設定することはできます。

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

QRコード（二维码）

 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
    }
} ;

Googleプラス

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

ツイッター

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

フェイスブック

 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. コミットしてプルリクエストを作成します。