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 соответствующего якоря.

ссылки.цель

Тип: String

По умолчанию: ""

Это будет установлено в target атрибут привязки. Доступные цели: "_self" , "_parent" , "_blank" , "_top" , "_qrcode"

Если установлено значение _qrcode , links.url будет открыт как изображение qrcode в модальном окне. В то же время для links.title будет задан модальный заголовок QR-кода (по умолчанию: '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" (очень маленький)

Список плагинов

Вейбо (微博)

Все аргументы будут добавлены в строку запроса 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, App ID, title , url用于微博分享内容和参考链接.

Вичат（微信）

 var link = {
    plugin : 'wechat'
} ;

Плагин wechat не принимает аргументов, но вы все равно можете установить свойства links :

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

QR-код (二维码)

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

Фейсбук

 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. Зафиксируйте и сделайте запрос на включение.