social share

حصة الاجتماعية

دعم أداة المشاركة الاجتماعية: wechat، weibo، LinkedIn، github، google+، rss، twitter، facebook والمزيد.

العرض التجريبي المباشر: http://harttle.com/social-share/

التبعيات: Fontawesome

التحميل: https://github.com/harttle/social-share/releases

تثبيت

استيراد الخط:

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

خيارات

links.url

النوع: String

الافتراضي: location.href

عنوان URL لهذا الرمز. عادةً، سيتم تعيين links.url على السمة href الخاصة بنقطة الارتساء المقابلة.

links.target

النوع: String

تقصير: ""

سيتم تعيين هذا على السمة target للمرساة. الأهداف المتاحة: "_self" و "_parent" و "_blank" و "_top" و "_qrcode"

إذا تم التعيين على _qrcode ، فسيتم فتح links.url كصورة QRcode داخل شكل مشروط. في هذه الأثناء، سيتم تعيين links.title على عنوان QRcode المشروط (الافتراضي: 'Share Link' ).

links.icon

النوع: String

الافتراضي: 'fa-code-fork'

فئة أيقونة Fontawesome لزر المشاركة.

الروابط. اللون

النوع: String

الافتراضي: '#fff'

لون أيقونة Fontawesome.

links.background

النوع: String

الافتراضي: '#b5b5b5'

خلفية أيقونة Fontawesome.

links.plugin

النوع: String

الافتراضي: undefined

البرنامج المساعد للاستخدام. عادةً، يتم استخدام مكون إضافي لإنشاء الإعدادات المذكورة أعلاه، وفقًا للوسيطات التي تحددها links.args .

ملاحظة: ستتجاوز الإعدادات الموجودة داخل links الإعدادات التي يتم إرجاعها بواسطة البرنامج الإضافي. على سبيل المثال، يستجيب المكون الإضافي github بعنوان url //foo ، بينما يتم تعيين links.url على //bar . سيكون عنوان URL للنتيجة هو //bar .

links.args

النوع: Object

تقصير: {}

الوسيطات التي تم تمريرها إلى المكون الإضافي، والتي تم تحديدها بواسطة links.plugin .

options.size

النوع: String

الافتراضي: "md"

حجم الأزرار، القيم المتاحة:

• "lg" (كبير)
• "md" (متوسط)
• "sm" (صغير)
• "xs" (صغير جدًا)

قائمة البرنامج المساعد

ويبو (微博)

سيتم إلحاق جميع الوسائط بسلسلة استعلام 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 هو معرف التطبيق، وهو title وعنوان url .

ويتشات (微信)

 var link = {
    plugin : 'wechat'
} ;

لا يقبل مكون wechat الإضافي أية وسائط، بينما لا يزال بإمكانك تعيين خصائص links :

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

رمز الاستجابة السريعة (二维码)

 var link = {
    plugin : 'qrcode'
} ;

تمامًا مثل مكون wechat الإضافي، بخلفية وأيقونات مختلفة.

آر إس إس

 var link = {
    plugin : 'rss'
} ;

جيثب

 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" وتحديد الوسائط:

 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. الالتزام وتقديم طلب السحب.