social share

berbagi sosial

Pendukung widget berbagi sosial: wechat, weibo, linkedin, github, google+, rss, twitter, facebook dan banyak lagi.

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

Ketergantungan: Fontawesome

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

Instalasi

Impor Fontawesome:

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

Impor Berbagi Sosial:

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

Penggunaan Minimal

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

Penggunaan Penuh

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

Pilihan

tautan.url

Jenis: String

Bawaan: location.href

Url ikon ini. Biasanya, links.url akan disetel ke atribut href dari jangkar yang sesuai.

tautan.target

Jenis: String

Bawaan: ""

Ini akan ditetapkan ke atribut target dari jangkar. Target yang tersedia: "_self" , "_parent" , "_blank" , "_top" , "_qrcode"

Jika disetel ke _qrcode , links.url akan dibuka sebagai gambar qrcode dalam modal. Sementara itu, links.title akan disetel ke judul modal QRcode (default: 'Share Link' ).

tautan.ikon

Jenis: String

Default: 'fa-code-fork'

Kelas ikon Fontawesome untuk tombol bagikan.

tautan.warna

Jenis: String

Bawaan: '#fff'

Warna ikon Fontawesome.

tautan.latar belakang

Jenis: String

Bawaan: '#b5b5b5'

Latar belakang ikon Fontawesome.

tautan.plugin

Jenis: String

Bawaan: undefined

Plugin yang akan digunakan. Biasanya, plugin digunakan untuk menghasilkan pengaturan di atas, sesuai dengan argumen yang ditetapkan oleh links.args .

Catatan: Pengaturan dalam links akan menggantikan pengaturan yang dikembalikan oleh plugin. Misalnya, plugin github merespons dengan url //foo , sedangkan links.url disetel ke //bar . Url hasilnya adalah //bar .

tautan.args

Jenis: Object

Bawaan: {}

Argumen diteruskan ke plugin, yang ditentukan oleh links.plugin .

pilihan.ukuran

Jenis: String

Bawaan: "md"

Ukuran tombol, nilai yang tersedia:

• "lg" (besar)
• "md" (sedang)
• "sm" (kecil)
• "xs" (sangat kecil)

Daftar Pengaya

Weibo（微博）

Semua argumen akan ditambahkan ke string kueri 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是微博认证的ID Aplikasi,便于微博跟踪。 title和url用于微博分享内容和参考链接。

WeChat（微信）

 var link = {
    plugin : 'wechat'
} ;

plugin wechat tidak menerima argumen, sementara Anda masih dapat mengatur properti links :

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

Kode QR（二维码）

 var link = {
    plugin : 'qrcode'
} ;

Sama seperti plugin wechat , dengan latar belakang dan ikon berbeda.

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 Ditambah

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

Cara Menulis Plugin

Plugin digunakan untuk menghasilkan Obyek link sesuai dengan links.args . Misalnya, plugin github :

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

Untuk menggunakan plugin ini, cukup setel plugin ke "github" , dan tentukan argumennya:

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

Yang setara dengan:

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

Pedoman Kontribusi

Adalah baik untuk memberikan kontribusi dengan cara apa pun. Sementara kami menyarankan garis panduan berikut:

1. Garpu repo ini.
2. Tambahkan plugin Anda di dalam src/plugins/ .
3. Jalankan grunt untuk membangun dist/ file.
4. Uji plugin Anda di demo/index.js
5. Komit dan buat permintaan tarik.