social share

compartir social

Widget para compartir en redes sociales compatible con: wechat, weibo, linkedin, github, google+, rss, twitter, facebook y más.

Demostración en vivo: http://harttle.com/social-share/

Dependencias: Fontawesome

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

Instalación

Importar Fontawesome:

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

Importar participación 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 completo

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

Opciones

enlaces.url

Tipo: String

Predeterminado: location.href

La URL de este icono. Normalmente, links.url se establecerá en el atributo href del ancla correspondiente.

enlaces.objetivo

Tipo: String

Por defecto: ""

Esto se establecerá en el atributo target del ancla. Destinos disponibles: "_self" , "_parent" , "_blank" , "_top" , "_qrcode"

Si se establece en _qrcode , links.url se abrirá como una imagen qrcode dentro de un modal. Mientras tanto, links.title se establecerá en el título modal del código QR (predeterminado: 'Share Link' ).

enlaces.icono

Tipo: String

Predeterminado: 'fa-code-fork'

La clase de ícono Fontawesome para el botón de compartir.

enlaces.color

Tipo: String

Valor predeterminado: '#fff'

El color del ícono Fontawesome.

enlaces.fondo

Tipo: String

Valor predeterminado: '#b5b5b5'

El fondo del ícono Fontawesome.

enlaces.plugin

Tipo: String

Predeterminado: undefined

El complemento a utilizar. Normalmente, se utiliza un complemento para generar la configuración anterior, de acuerdo con los argumentos establecidos por links.args .

Nota: La configuración dentro de links anulará la configuración devuelta por un complemento. Por ejemplo, el complemento github responde con la URL //foo , mientras que links.url está configurado en //bar . La URL del resultado será //bar .

enlaces.args

Tipo: Object

Por defecto: {}

Los argumentos pasados ​​al complemento, que se especifica mediante links.plugin .

opciones.tamaño

Tipo: String

Valor predeterminado: "md"

Tamaño de los botones, valores disponibles:

• "lg" (grande)
• "md" (medio)
• "sm" (pequeño)
• "xs" (extremadamente pequeño)

Lista de complementos

Weibo (微博)

Todos los argumentos se agregarán a la cadena de consulta de 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'
} ;

El complemento wechat no acepta argumentos, aunque aún puedes configurar las propiedades links :

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

Código QR（二维码）

 var link = {
    plugin : 'qrcode'
} ;

Al igual que el complemento wechat , con fondo e ícono 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+

 var link = {
    plugin : 'google-plus' ,
    args : {
        id : 'harttle'           // Your Google+ ID
    }
} ;

Gorjeo

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

Facebook

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

Cómo escribir complementos

Los complementos se utilizan para generar un objeto link de acuerdo con links.args . Por ejemplo, el complemento 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 complemento, simplemente configure plugin en "github" y especifique los argumentos:

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

Lo que equivale a:

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

Directriz de contribución

Es bienvenido hacer contribuciones por cualquier medio. Si bien sugerimos las siguientes pautas:

1. Bifurca este repositorio.
2. Agregue su complemento dentro de src/plugins/ .
3. Ejecute grunt para compilar los archivos dist/ .
4. Pruebe su complemento en demo/index.js
5. Comprométete y haz una solicitud de extracción.