속성
이 섹션에서는 정기 결제 버튼의 <div> 요소를 구성하는 방법을 설명합니다. 아래 목록에서 요소의 필수 속성과 선택적 속성을 설명합니다. 선택적 속성을 사용하면 버튼의 레이아웃과 테마를 제어할 수 있을 뿐만 아니라 채널의 구독자 수를 표시할지 선택할 수도 있습니다.
필수 속성
-
class: 값을g-ytsubscribe로 설정합니다. 이 클래스는<div>요소를 구독 버튼의 컨테이너로 식별하고 다음 섹션에서 설명하는 것처럼 YouTube에서 삽입된 버튼의 크기를 동적으로 조절할 수 있도록 합니다. -
다음 두 가지 속성 중 하나로 값을 지정해야 합니다.
data-channel– 버튼과 연결된 채널의 이름입니다. 샘플 값:GoogleDevelopersdata-channelid: 버튼과 연결된 채널 ID입니다. 샘플 값:UC_x5XG1OV2P6uZZ5FSM9TtwYouTube 계정 설정에서 또는 이 문서 끝에 있는 APIs Explorer를 사용하여 채널 ID를 검색할 수 있습니다. 채널 ID 작업에 대해 자세히 알아보세요.
선택적 속성
-
data-layout: 버튼의 형식입니다. 유효한 속성 값은 다음과 같습니다.default– 재생 버튼 아이콘과 단어 '구독'을 사용자의 언어로 표시하며, 이때 사용자의 언어 설정 또는 위치를 사용하여 선택됩니다.full- 표준 버튼과 함께 채널의 아바타와 채널 제목을 표시합니다.
-
data-theme: 버튼에 사용할 색 구성표를 지정합니다. 유효한 값은default및dark입니다.dark테마는 더 어두운 배경 요소 위에 버튼을 배치하는 애플리케이션용입니다. -
data-count– 버튼에 채널의 구독자 수가 표시되는지를 나타냅니다. 버튼의 기본 동작은 구독자 수를 표시하는 것입니다. 유효한 값은default및hidden입니다. -
data-onytevent– 참고: 이 속성은 지원 중단되었습니다.
이벤트
참고: 구독 버튼의 subscribe 및 unsubscribe 이벤트는 지원 중단되었습니다. 마찬가지로 이벤트 알림에 관한 리스너를 지정하기 위해 위젯 요소에 이전에 추가할 수 있었던 data-ytonevent 속성도 지원 중단되었습니다.
동적 렌더링
구성 도구에서 표준 삽입 코드를 사용하는 대신 Subscribe Button를 동적으로 렌더링할 수 있습니다. 이 접근 방식을 사용하면 API의 자바스크립트가 버튼 전체를 찾기 위해 DOM 전체를 탐색하지 않아도 되므로 버튼 렌더링 시간이 단축됩니다.
Google+ JavaScript API의 일부로 Subscribe Button는 표준 go 및 render 메서드를 지원하며 이는 구독 버튼을 동적으로 렌더링하는 데 사용할 수 있습니다. 예를 들어 이러한 메서드를 사용하여 DOM ready 이벤트가 실행될 때 존재하지 않는 버튼을 렌더링할 수 있습니다(예: AJAX로 업데이트된 페이지).
| 메서드 | 설명 |
|---|---|
gapi.ytsubscribe.go( |
지정된 컨테이너의 모든 구독 버튼을 렌더링합니다. 렌더링하려는 구독 버튼 요소가 이미 있는 경우 이 메서드를 사용합니다. 예를 들어 애플리케이션에서 Subscribe Button의 전체 <div> 요소를 반환하는 AJAX 요청을 전송하는 경우 go() 메서드를 호출하여 버튼을 렌더링합니다.
|
gapi.ytsubscribe.render( |
지정된 컨테이너 내에서 Subscribe Button를 렌더링합니다. Subscribe Button를 포함할 요소가 아직 없어서 생성해야 하는 경우 이 메서드를 사용합니다.
|
gapi.ytsubscribe.go로 버튼 렌더링
아래 예는 링크를 클릭했을 때 버튼을 동적으로 렌더링하기 위해 gapi.ytsubscribe.go 메서드를 호출하는 데 사용할 수 있는 코드를 보여줍니다.
참고: 위의 구성 도구는 버튼 옵션이나 코드를 업데이트할 때 go 메서드를 사용하여 새 버튼을 렌더링합니다.
gapi.ytsubscribe.render로 버튼 렌더링
아래 예는 링크를 클릭했을 때 버튼을 동적으로 렌더링하도록 gapi.ytsubscribe.render 메서드를 호출하는 방법을 보여줍니다.