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 QRcode 모달 제목(기본값: 'Share Link' )으로 설정됩니다.

링크.아이콘

유형: String

기본값: 'fa-code-fork'

공유 버튼에 대한 Fontawesome 아이콘 클래스입니다.

링크.색상

유형: String

기본값: '#fff'

Fontawesome 아이콘의 색상입니다.

링크.배경

유형: String

기본값: '#b5b5b5'

Fontawesome 아이콘의 배경입니다.

링크.플러그인

유형: String

기본값: undefined

사용할 플러그인입니다. 일반적으로 플러그인은 links.args 에 의해 설정된 인수에 따라 위 설정을 생성하는 데 사용됩니다.

참고: links 내의 설정은 플러그인에서 반환된 설정보다 우선 적용됩니다. 예를 들어, github 플러그인은 //foo URL로 응답하고, links.url //bar 로 설정됩니다. 결과 URL은 //bar 입니다.

link.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 는 앱 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'
} ;

Github

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

플러그인 작성 방법

플러그인은 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. dist/ 파일을 빌드하려면 grunt 실행하세요.
4. demo/index.js 에서 플러그인을 테스트하세요.
5. 커밋하고 풀 요청을 합니다.