social share

แบ่งปันทางสังคม

รองรับวิดเจ็ตแชร์โซเชียล: wechat, weibo, 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 ) ; 

ตัวเลือก

ลิงค์.url

ประเภท: String

ค่าเริ่มต้น: location.href

URL ของไอคอนนี้ โดยปกติแล้ว links.url จะถูกตั้งค่าเป็นแอตทริบิวต์ href ของจุดยึดที่เกี่ยวข้อง

links.เป้าหมาย

ประเภท: String

ค่าเริ่มต้น: ""

สิ่งนี้จะถูกตั้งค่าเป็นแอตทริบิวต์ target ของจุดยึด เป้าหมายที่ใช้ได้: "_self" , "_parent" , "_blank" , "_top" , "_qrcode"

หากตั้งค่าเป็น _qrcode ระบบจะเปิด links.url เป็นรูปภาพ qrcode ภายในโมดอล ในระหว่างนี้ links.title จะถูกตั้งค่าเป็นชื่อกิริยา QRcode (ค่าเริ่มต้น: 'Share Link' )

ลิงค์.ไอคอน

ประเภท: 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" (เล็กมาก)

รายการปลั๊กอิน

เว่ยป๋อ (微博)

args ทั้งหมดจะถูกผนวกเข้ากับสตริงการสืบค้น 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用于微博分享内容和参考链接。

วีแชท (微信)

 var link = {
    plugin : 'wechat'
} ;

ปลั๊กอิน wechat ไม่ยอมรับข้อโต้แย้ง ในขณะที่คุณยังสามารถตั้งค่าคุณสมบัติ links ได้:

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

QR Code（二维码）

 var link = {
    plugin : 'qrcode'
} ;

เช่นเดียวกับปลั๊กอิน wechat ที่มีพื้นหลังและไอคอนต่างกัน

อาร์เอสเอส

 var link = {
    plugin : 'rss'
} ;

Github

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

เฟสบุ๊ค

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

วิธีเขียนปลั๊กอิน

ปลั๊กอินใช้เพื่อสร้างวัตถุ link ตาม links.args ตัวอย่างเช่น ปลั๊กอิน github :

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

หากต้องการใช้ปลั๊กอินนี้ เพียงตั้งค่า plugin เป็น "github" และระบุ args:

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

ซึ่งเท่ากับ:

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

แนวทางการบริจาค

ยินดีที่จะบริจาคไม่ว่าด้วยวิธีใดก็ตาม ในขณะที่เราแนะนำบรรทัดแนะนำต่อไปนี้:

1. แยก repo นี้
2. เพิ่มปลั๊กอินของคุณภายใน src/plugins/ .
3. เรียกใช้ grunt เพื่อสร้าง dist/ ไฟล์
4. ทดสอบปลั๊กอินของคุณใน demo/index.js
5. กระทำและทำการร้องขอการดึง