social share

compartilhamento social

Widget de compartilhamento social compatível com: wechat, weibo, linkedin, github, google+, rss, twitter, facebook e muito mais.

Demonstração ao vivo: http://harttle.com/social-share/

Dependências: Fontawesome

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

Instalação

Importar Fontawesome:

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

Importar compartilhamento social:

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

Uso mínimo

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

Uso total

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

Opções

links.url

Tipo: String

Padrão: location.href

A URL deste ícone. Normalmente, links.url será definido como o atributo href da âncora correspondente.

links.target

Tipo: String

Padrão: ""

Isso será definido como o atributo target da âncora. Alvos disponíveis: "_self" , "_parent" , "_blank" , "_top" , "_qrcode"

Se definido como _qrcode , o links.url será aberto como uma imagem qrcode dentro de um modal. Enquanto isso, links.title será definido como o título modal do QRcode (padrão: 'Share Link' ).

links.icon

Tipo: String

Padrão: 'fa-code-fork'

A classe de ícone Fontawesome para o botão de compartilhamento.

links.color

Tipo: String

Padrão: '#fff'

A cor do ícone Fontawesome.

links.background

Tipo: String

Padrão: '#b5b5b5'

O plano de fundo do ícone Fontawesome.

links.plugin

Tipo: String

Padrão: undefined

O plugin a ser usado. Normalmente, um plugin é usado para gerar as configurações acima, de acordo com os argumentos definidos por links.args .

Nota: As configurações nos links substituirão as configurações retornadas por um plugin. Por exemplo, o plugin github responde com a url //foo , enquanto links.url está definido como //bar . O URL do resultado será //bar .

links.args

Tipo: Object

Padrão: {}

Os argumentos passados ​​para o plugin, que é especificado por links.plugin .

opções.tamanho

Tipo: String

Padrão: "md"

Tamanho dos botões, valores disponíveis:

• "lg" (grande)
• "md" (médio)
• "sm" (pequeno)
• "xs" (muito pequeno)

Lista de plug-ins

Weibo (微博)

Todos os argumentos serão anexados à string de consulta do 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'
} ;

O plugin wechat não aceita argumentos, mas você ainda pode definir propriedades links :

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

Código QR（二维码）

 var link = {
    plugin : 'qrcode'
} ;

Assim como o plugin wechat , com fundo e ícone diferentes.

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

Twitter

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

Facebook

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

Como escrever plug-ins

Plugins são usados ​​para gerar um objeto link de acordo com links.args . Por exemplo, o plugin github :

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

Para usar este plugin, basta definir plugin como "github" e especificar os argumentos:

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

O que é equivalente a:

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

Diretriz de Contribuição

É bem-vindo fazer contribuições de qualquer maneira. Embora sugerimos as seguintes diretrizes:

1. Bifurque este repositório.
2. Adicione seu plugin em src/plugins/ .
3. Execute grunt para construir os arquivos dist/ .
4. Teste seu plugin em demo/index.js
5. Confirme e faça uma solicitação pull.