social share

partage social

Widget de partage social prenant en charge : wechat, weibo, linkedin, github, google+, rss, twitter, facebook et plus encore.

Démo en direct : http://harttle.com/social-share/

Dépendances : Fontawesome

Télécharger : https://github.com/harttle/social-share/releases

Installation

Importer Fontawesome :

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

Importer le partage social :

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

Utilisation minimale

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

Utilisation complète

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

Possibilités

liens.url

Type : String

Par défaut : location.href

L'url de cette icône. En règle générale, links.url sera défini sur l'attribut href de l'ancre correspondante.

liens.cible

Type : String

Défaut: ""

Celui-ci sera défini sur l'attribut target de l'ancre. Cibles disponibles : "_self" , "_parent" , "_blank" , "_top" , "_qrcode"

S'il est défini sur _qrcode , le links.url sera ouvert en tant qu'image qrcode dans un modal. En attendant, le links.title sera défini sur le titre modal du QRcode (par défaut : 'Share Link' ).

liens.icon

Type : String

Par défaut : 'fa-code-fork'

La classe d'icônes Fontawesome pour le bouton de partage.

liens.color

Type : String

Par défaut : '#fff'

La couleur de l’icône Fontawesome.

liens.background

Type : String

Par défaut : '#b5b5b5'

L'arrière-plan de l'icône Fontawesome.

liens.plugin

Type : String

Par défaut : undefined

Le plugin à utiliser. Généralement, un plugin est utilisé pour générer les paramètres ci-dessus, selon les arguments définis par links.args .

Remarque : les paramètres contenus dans links remplaceront les paramètres renvoyés par un plugin. Par exemple, le plugin github répond avec l'url //foo , tandis que links.url est défini sur //bar . L'URL du résultat sera //bar .

liens.args

Type : Object

Défaut: {}

Les arguments transmis au plugin, qui sont spécifiés par links.plugin .

options.taille

Type : String

Par défaut : "md"

Taille des boutons, valeurs disponibles :

• "lg" (grand)
• "md" (moyen)
• "sm" (petit)
• "xs" (extrême petit)

Liste des plugins

Weibo (微博)

Tous les arguments seront ajoutés à la chaîne de requête 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是微博认证的App ID，便于微博跟踪。 title和url用于微博分享内容和参考链接。

Wechat（微信）

 var link = {
    plugin : 'wechat'
} ;

Le plugin wechat n'accepte aucun argument, alors que vous pouvez toujours définir les propriétés links :

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

QR Code (二维码)

 var link = {
    plugin : 'qrcode'
} ;

Tout comme le plugin wechat , avec un arrière-plan et une icône différents.

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

Gazouillement

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

Facebook

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

Comment écrire des plugins

Les plugins sont utilisés pour générer un objet link selon le links.args . Par exemple, le plugin github :

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

Pour utiliser ce plugin, définissez simplement plugin sur "github" et spécifiez les arguments :

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

Ce qui équivaut à :

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

Ligne directrice sur les contributions

Il est bienvenu d'apporter des contributions par tous les moyens. Nous suggérons cependant les lignes directrices suivantes :

1. Forkez ce dépôt.
2. Ajoutez votre plugin dans src/plugins/ .
3. Exécutez grunt pour créer les fichiers dist/ .
4. Testez votre plugin dans demo/index.js
5. Validez et faites une pull request.