social share

社交分享

社交分享小部件支持：微信、微博、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 ) ; 

选项

链接地址

类型： String

默认值： location.href

该图标的 URL。通常， links.url将被设置为相应锚点的href属性。

链接.目标

类型： String

默认： ""

这将被设置为锚点的target属性。可用目标： "_self" 、 "_parent" 、 "_blank" 、 "_top" 、 "_qrcode"

如果设置为_qrcode ， links.url将在模态中作为 qrcode 图像打开。同时， links.title将被设置为 QRcode 模态标题（默认： 'Share Link' ）。

链接.icon

类型： 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" （极小）

插件列表

微博（微博）

所有参数都将附加到 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插件一样，有不同的背景和图标。

RSS

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

Facebook

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

如何编写插件

插件用于根据links.args生成link对象。例如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. 提交并发出拉取请求。