social share

Social-Share

Widget zum Teilen in sozialen Netzwerken unterstützt: Wechat, Weibo, LinkedIn, Github, Google+, RSS, Twitter, Facebook und mehr.

Live-Demo: http://harttle.com/social-share/

Abhängigkeiten: Fontawesome

Download: https://github.com/harttle/social-share/releases

Installation

Fontawesome importieren:

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

Social Share importieren:

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

Minimaler Verbrauch

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

Volle Nutzung

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

Optionen

links.url

Typ: String

Standard: location.href

Die URL dieses Symbols. Normalerweise wird links.url auf das href -Attribut des entsprechenden Ankers gesetzt.

links.target

Typ: String

Standard: ""

Dies wird auf das target des Ankers gesetzt. Verfügbare Ziele: "_self" , "_parent" , "_blank" , "_top" , "_qrcode"

Wenn es auf _qrcode gesetzt ist, wird die links.url als QRcode-Bild innerhalb eines Modals geöffnet. In der Zwischenzeit wird der links.title auf den modalen QRcode-Titel gesetzt (Standard: 'Share Link' ).

links.icon

Typ: String

Standard: 'fa-code-fork'

Die Fontawesome-Symbolklasse für die Schaltfläche „Teilen“.

Links.Farbe

Typ: String

Standard: '#fff'

Die Farbe des Fontawesome-Symbols.

links.hintergrund

Typ: String

Standard: '#b5b5b5'

Der Hintergrund des Fontawesome-Symbols.

links.plugin

Typ: String

Standard: undefined

Das zu verwendende Plugin. Typischerweise wird ein Plugin verwendet, um die oben genannten Einstellungen entsprechend den von links.args festgelegten Argumenten zu generieren.

Hinweis: Einstellungen innerhalb von links überschreiben die von einem Plugin zurückgegebenen Einstellungen. Beispielsweise antwortet github -Plugin mit der URL //foo , während links.url auf //bar gesetzt ist. Die Ergebnis-URL lautet //bar .

links.args

Typ: Object

Standard: {}

Die an das Plugin übergebenen Argumente, das durch links.plugin angegeben wird.

Optionen.Größe

Typ: String

Standard: "md"

Größe der Schaltflächen, verfügbare Werte:

• "lg" (groß)
• "md" (mittel)
• "sm" (klein)
• "xs" (extrem klein)

Plugin-Liste

Weibo (微博)

Alle Argumente werden an die URL-Abfragezeichenfolge angehängt.

 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微博分享内容和参考链接。

Wechat (微信)

 var link = {
    plugin : 'wechat'
} ;

Das wechat Plugin akzeptiert keine Argumente, Sie können jedoch weiterhin links Eigenschaften festlegen:

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

QR-Code (二维码)

 var link = {
    plugin : 'qrcode'
} ;

Genau wie wechat Plugin, mit anderem Hintergrund und Symbol.

RSS

 var link = {
    plugin : 'rss'
} ;

Github

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

Linkedin

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

Google Plus

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

Twitter

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

Facebook

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

So schreiben Sie Plugins

Plugins werden verwendet, um ein link Objekt gemäß links.args zu generieren. Zum Beispiel das github -Plugin:

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

Um dieses Plugin zu verwenden, setzen Sie einfach plugin auf "github" und geben Sie die Argumente an:

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

Was gleichbedeutend ist mit:

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

Beitragsrichtlinie

Es ist willkommen, auf jede erdenkliche Weise Beiträge zu leisten. Wir schlagen die folgenden Richtlinien vor:

1. Forken Sie dieses Repo.
2. Fügen Sie Ihr Plugin in src/plugins/ hinzu.
3. Führen Sie grunt aus, um die dist/ -Dateien zu erstellen.
4. Testen Sie Ihr Plugin in demo/index.js
5. Commit und eine Pull-Anfrage stellen.