공유 버튼 문서

개요


이 문서는 개발자를 위한 것으로, 페이지에 설치된 공유 버튼 위젯으로 만들어진 Tumblr 포스트가 웹사이트에 어떻게 보이는지 관리할 수 있습니다.

공유 버튼 생성기로 회원님 사이트에 공유 버튼을 만드세요.

기본 버튼


공유 버튼 자바스크립트(아래)가 있는 페이지일 경우, 공유 버튼은 tumblr-share-button: 클래스를 포함한 앵커 태그입니다.

<a class="tumblr-share-button" href="https://www.tumblr.com/share"></a>
<script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>

참고: 페이지에 여러 개 공유 버튼이 있다면, JavaScript는 닫기</body>태그 바로 앞에 한 번만 넣으면 됩니다.

포스트 콘텐츠 기본 설정

오픈 그래프 메타 태그가 회원님 페이지에서 무엇을 찾아내는지에 따라, 공유 버튼은 기본 설정으로 사진 포스트나 링크 포스트를 만듭니다. 물론 원하는 포스트 유형을 사용하도록 구성할 수도 있습니다 (아래 설명 참조). 기본 설정 옵션은 다음과 같습니다.

  • 사진 포스트. 최소 너비 500px, 3:1 미만의 가로 세로 비율 이미지가 있는 og:image 태그가 있다면 공유 버튼은 사진 포스트를 만듭니다. og:description을 사진 설명으로 사용합니다.
  • 링크 포스트. 사진 포스트에 적합한 이미지를 찾지 못하면 공유 버튼은 링크 포스트를 만듭니다. og:title을 제목으로, og:description을 사진 설명으로, 표준 URL을 URL로 사용합니다.

포스트 콘텐츠 구성


공유 버튼이 특정 포스트 유형을 만들도록 하려면, 옵션을 버튼 앵커 태그에 데이터 속성으로 설정하거나 버튼의 href 속성 URL 쿼리 문자열 매개 변수로 설정합니다.

옵션설명데이터 속성쿼리 문자열 매개 변수
포스트 유형 사용 가능한 Tumblr 포스트 유형: 텍스트, 사진, 링크, 인용구, 채팅, 동영상 data-posttype posttype
태그 쉽표로 구분해 나열한 태그 목록 data-tags tags
제목 텍스트, 링크, 채팅 포스트 유형에 사용 data-title title
콘텐츠 포스트의 주요 콘텐츠는 사용하는 포스트 유형에 따라 다릅니다. 즉, 사진 포스트는 사진 URL이, 인용구 포스트는 인용구가 주요 콘텐츠 입니다.

자세한 내용은 아래 유형별 포스트 콘텐츠를 참고하세요.
data-content content
사진 설명 사진, 링크, 동영상, 인용구 포스트에 사용 data-caption caption
속성 보이기 포스트 본문에 다음 속성이 있는 경우 포함시킬 지 여부: "via" data-show-via show-via

유형별 포스트 콘텐츠


텍스트
data-title: 텍스트 포스트 제목
data-content: 텍스트 포스트 본문

사진
data-content: 단일 사진 URL 또는 쉼표로 구분한 사진 세트의 사진 URL 목록
data-caption: 사진 포스트의 사진 설명

인용구
data-content: 인용구
data-caption: 인용구 출처 (말한 사람과 인용)

링크
data-title: 링크 포스트 제목
data-content: 링크의 대상 URL
data-caption: 링크 설명

채팅
data-title: 채팅 포스트 제목
data-content: 채팅 본문 (대화 내용)

동영상
data-content: 동영상 URL 또는 임베드 코드
data-caption: 동영상 설명

버튼 스타일 구성


다음과 같은 버튼 앵커 태그 데이터 속성으로 공유 버튼 스타일 구성 가능:

옵션사용 가능한 값기본 설정
data-color 파란색
검정색
흰색
파란색
data-notes 맨 위
오른쪽
없음
없음

표준 URL


반응 수와 반응 수 증가를 제대로 표시하려면 페이지의 표준 URL을 기입해야 합니다. 공유 버튼은 표준 URL을 다음 위치에서 다음 순서로 찾습니다.

우선 순위데이터 출처
1 버튼 앵커 태그의 data-href 속성
2 표준 링크 요소
3 og:url 메타 요소
4 페이지 URL

사용자 지정 버튼을 만든다면 (아래 참조), 포스트 콘텐츠에 추가로 쿼리 문자열 표준 URL을 제공해야 합니다. 예는 다음과 같습니다.

http://tumblr.com/widgets/share/tool?canonicalUrl=http://cats.com

나만의 버튼 만들기


사용자가 원하는 대로 버튼을 새로 디자인할 수 있습니다. 사용자 지정 버튼에서 다음 URL https://www.tumblr.com/widgets/share/tool로 팝업창을 열고, 위에 설명한 대로 모든 포스트 콘텐츠 정보를 쿼리 문자열 매개 변수로 전달하세요. 팝업창 크기는 포스트 콘텐츠에 맞도록 공유 툴로 자동 조정되지만, 540x600 픽셀이면 가장 좋습니다.

반응 수

사용자 지정 버튼에 반응 수를 표시할 수 있습니다. 내 페이지 URL을 공유 활동 통계 API 엔드포인트에 전달해서 반응 수를 불러옵니다. 예는 다음과 같습니다.

http://api.tumblr.com/v2/share/stats?url=https://www.tumblr.com/buttons

사용자 시작 지점에서 응답을 캐시한 다음 반드시 10분 정도가 지나야만 다시 페치합니다. URL 공유 관련해 Tumblr는 10분 동안 반응 수를 캐시하기 때문입니다.

버튼 언어


버튼 앵커 태그에 data-locale 속성으로 설정해서 버튼을 다른 언어로 바꿀 수 있습니다. Tumblr가 지원하는 언어는 다음과 같습니다.

언어로케일 값
영어 en_US
독일어 de_DE
프랑스어 fr_FR
이탈리아어 it_IT
일본어 ja_JP
터키어 tr_TR
스페인어 es_ES
러시아어 ru_RU
폴란드어 pl_PL
포르투갈어 pt_PT
포르투갈어 pt_BR
네델란드어 nl_NL
한국어 ko_KR
중국어 (간체) zh_CN
중국어 (번체) zh_TW