(og:type이 video.movie일 경우) | video:duration | | musicDuration
(og:type이 music.song일 경우) | music:duration | ## Social modules 상세 설정은 아래 내용 참고.
공유하기 버튼
소셜 공유하기 버튼. 사용 가능한 공유하기 버튼의 종류는 아래와 같다 (ABC순). -
밴드
- 
클립보드(Clipboard) 복사
- 
이메일(Email)
- 
Facebook
- 
Flipboard
- 
Gmail
- 
KakaoTalk
- 
Line
- 
LinkedIn
- 
Naver
- 
Reddit
- 
Skype
- 
SMS
- 
Telegram
- 
Tumblr
- 
Twitter
모든 컴포넌트는 공통적으로 아래와 같은 props를 전달할 수 있다.
* `title`: (string) 마우스 오버시 나타나는 문자열.
* `extra`: (object) 공유 버튼 별 사용되는 특별 인자 값.
* `defaultIconSize`: (number) 기본 아이콘 사용시 (children이 존재하지 않을 경우) 아이콘의 가로 및 세로 픽셀.
* `children`: (node) 공유 버튼을 커스텀하게 꾸미고 싶을 경우 버튼 하위 컴포넌트를 지정해 줄 수 있음.
* `className`: (string) 공유 버튼의 클래스 지정.
* `style`: (object) 공유 버튼의 스타일 지정.
* `onBefore`: (func) 공유 버튼이 클릭되면 공유하기 기능 실행에 앞서 지정된 해당 콜백함수가 실행된다.
* `onComplete`: (func) 공유 버튼이 클릭된 후 공유가 완료되었을 때 지정된 해당 콜백함수가 실행된다.
* `onError`: (func) 공유 진행 중 오류가 발생되었을 경우 지정된 해당 콜백함수가 실행된다.
위 props 중 extra 값을 지정해야 할 경우 아래와 같이 공유 버튼 별 지정 방식에 맞춰 선언한다.
> 파라미터로 전달되는 `og` 값은 공유하기 컴포넌트에서 전달해 주는 OpenGraph 태그 속성 값 객체.
> `` 식으로 페이지 헤더에 정의된 메타태그에서 추출 됨.
```
og = {
title,
description,
image,
url,
type,
site_name
}
```
### Band
`message`: (func) 커스텀 공유 메시지 지정
```ecmascript 6
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
```
### Clipboard Copy
`message`: (func) 커스텀 공유 메시지 지정
```ecmascript 6
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
```
### Email
`title`: (func) 타이틀 문자열\
`message`: (func) 본문 삽입 문자열
```ecmascript 6
extra = {
title: (og) => og.title,
message: (og) => `${og.content}\n\n${og.url}`,
}
```
### Facebook
`appId`: (string) 페이스북 API에 등록된 appId\
`permissions`: (array) 사용하고자 하는 퍼미션 목록\
`caption`: (string) 공유 후 페이스북에 노출되는 화면의 caption 항목\
`title`: (func) 공유 후 페이스북에 노출되는 화면의 title 항목\
`message`: (func) 공유 후 페이스북에 노출되는 화면의 message 항목\
`admins`: (string) 페이스북 API 참조
`isUseOAuth`: (bool) OAuth2를 이용한 공유를 실행할지, 링크 공유를 실행할지의 여부\
`isDebug`: (bool) 디버깅용 API를 호출할지, 프로덕션용을 호출할지 여부
```ecmascript 6
extra = {
appId: '',
permissions: [ 'public_profile', 'email', 'user_friends' ], // 기본 권한만! 추가 필요권한은 option 파라미터로 인입해야 함
caption: '',
title: (og) => og.title,
message: (_og) => '',
admins: '',
isUseOAuth: true,
isDebug: false,
}
```
### Flipboard
`message`: (func) 커스텀 공유 메시지 지정
```ecmascript 6
extra = {
message: (og) => `[${og.title}] ${og.content}`,
}
```
### Gmail
`title`: (func) 타이틀 문자열\
`message`: (func) 본문 삽입 문자열
```ecmascript 6
extra = {
title: (og) => og.title,
message: (og) => `${og.content}\n\n${og.url}`,
}
```
### KakaoTalk
`appId`: (string) 카카오 API에 등록된 appId\
`message`: (func) 공유 후 카카오톡에 노출되는 화면의 내용 항목\
`image`: (func) 공유 후 카카오톡에 노출되는 이미지\
`width`: (number) 공유 후 카카오톡에 노출되는 이미지 너비\
`height`: (number) 공유 후 카카오톡에 노출되는 이미지 높이
```ecmascript 6
extra = {
appId: '',
message: (og) => `${og.title}\n${og.content}`,
image: (og) => og.image,
width: 300,
height: 200,
}
```
### Line
`message`: (func) 커스텀 공유 메시지 지정
```ecmascript 6
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
```
### LinkedIn
사용되는 extra 없음
### Naver
`title`: (func) 타이틀 문자열
```ecmascript 6
extra = {
title: (og) => og.title,
}
```
### 
NaverBlog
`title`: (func) 타이틀 문자열
```ecmascript 6
extra = {
title: (og) => og.title,
}
```
### Reddit
`title`: (func) 타이틀 문자열
```ecmascript 6
extra = {
title: (og) => og.title,
}
```
### Skype
`message`: (func) 본문 메시지 문자열
```ecmascript 6
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
}
```
### SMS
`message`: (func) 본문 메시지 문자열\
`target`: (string) 핸드폰 번호나 E-mail 등의 공유 대상 지정
```ecmascript 6
extra = {
message: (og) => `${og.title}\n\n${og.content}\n\n${og.url}`,
target: '',
}
```
### Telegram
`message`: (func) 추가 채팅 메시지 (공유 메시지와는 별개)
```ecmascript 6
extra = {
message: (og) => ``,
}
```
### Tumblr
`title`: (func) 타이틀 문자열\
`message`: (func) 본문 삽입 문자열
```ecmascript 6
extra = {
title: (og) => og.title,
message: (og) => og.content,
}
```
### Twitter
`message`: (func) 본문 삽입 문자열\
`hashtags`: (array) 공유 후 트위터에 노출되는 해시태그 문자열 목록
```ecmascript 6
extra = {
message: (og) => `[${og.title}]\n${og.content}`,
hashtags: [],
}
```
위젯
소셜 위젯 기능. 사용 가능한 위젯의 종류는 아래와 같다. - FacebookLike
- FlipboardFlipit
- 
KakaoStoryFollow
- TumblrFollow
- TumblrPost
- TwitterFollow
- TwitterMessage
- TwitterTweet
모든 컴포넌트는 공통적으로 아래와 같은 props를 전달할 수 있다.
* `extra`: (object) 공유 버튼 별 사용되는 특별 인자 값.
* `children`: (function) 공유 버튼을 커스텀하게 꾸미고 싶을 경우 버튼 하위 컴포넌트를 지정해 줄 수 있다.
* `className`: (string) 공유 버튼의 클래스 지정.
* `style`: (object) 공유 버튼의 스타일 지정.
위 props 중 extra 값을 지정해야 할 경우 아래와 같이 공유 버튼 별 지정 방식에 맞춰 선언한다.
> 파라미터로 전달되는 `og` 값은 공유하기 컴포넌트에서 전달해 주는 OpenGraph 태그 속성 값 객체.
> `` 식으로 페이지 헤더에 정의된 메타태그에서 추출 됨.
```
og = {
title,
description,
image,
url,
type,
site_name
}
```
### FacebookLike
`appId`: (string) 페이스북 API에 등록된 appId\
`pageUrl`: (string) "좋아요" 대상 페이지 URL\
`isDark`: (bool) 다크 칼라 스킴 사용 여부\
`isDebug`: (bool) 디버깅용 API를 호출할지, 프로덕션용을 호출할지 여부\
`onLogin`: (func) 페이스북 계정 로그인 이벤트 발생시 콜백함수\
`onLogout`: (func) 페이스북 계정 로그아웃 이벤트 발생시 콜백함수\
`onLike`: (func) "좋아요" 버튼 클릭 이벤트 발생시 콜백함수 (API 퍼미션 리뷰 필요)\
`onUnlike`: (func) "좋아요" 버튼 클릭 해제 이벤트 발생시 콜백함수 (API 퍼미션 리뷰 필요)
```ecmascript 6
extra = {
appId: '',
pageUrl: '',
isDark: false,
isDebug: false,
onLogin: (response) => {},
onLogout: (response) => {},
onLike: (response) => {},
onUnlike: (response) => {},
}
```
### FlipboardFlipit
`profileUrl`: (string) 팬 페이지 URL (ex. 'mornya')\
`popover`: (string) 마우스 오버시 팝오버 메시지
```ecmascript 6
extra = {
profileUrl: '',
popover: 'Flip it!',
}
```
### KakaoStoryFollow
`appId`: (string) 카카오 API에 등록된 appId\
`subscribeChannelId`: (string) 팔로우(구독) 대상 채널 ID (예를 들어, 'mornya'로 입력하면 실제 구독 대상 채널은 http://story.kakao.com/ch/mornya/app 입니다)\
`showFollowerCount`: (bool) 구독 횟수 카운트를 버튼 옆에 표시 할 지 여부
```ecmascript 6
extra = {
appId: '',
subscribeChannelId: '',
showFollowerCount: true,
}
```
### TumblrFollow
`tumblelog`: (string) 팔로우 할 텀블로그명 (ex. 'mornya')
```ecmascript 6
extra = {
tumblelog: '',
}
```
### TumblrPost
`없음`
### TwitterFollow
`screenName`: (string) 팔로우 할 대상 스크린네임 (ex. '@mornyacom')
```ecmascript 6
extra = {
screenName: '',
showScreenName: false,
}
```
### TwitterMessage
`screenName`: (string) 메시지 보낼 대상 스크린네임 (ex. '@mornyacom')\
`recipientId`: (string) 수신 대상자 목록\
`hashtags`: (array) 공유 후 메시지에 노출되는 해시태그 문자열 목록
```ecmascript 6
extra = {
screenName: '',
recipientId: '',
hashtags: [],
}
```
### TwitterTweet
`hashtags`: (array) 트윗 후 메시지에 노출되는 해시태그 문자열 목록\
`showScreenName`: (bool) 공유 버튼에 스크린네임을 표시 할 지 여부
```ecmascript 6
extra = {
hashtags: [],
showScreenName: false,
}
```