속성
이 섹션에서는 구독 버튼의 <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의 JavaScript가 전체 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 메서드를 호출하여 버튼을 동적으로 렌더링하는 방법을 보여줍니다.