Reference Guide

Thuộc tính

Phần này giải thích cách xây dựng phần tử <div> cho nút đăng ký. Danh sách dưới đây giải thích các thuộc tính bắt buộc và không bắt buộc của thành phần. Các thuộc tính không bắt buộc cho phép bạn kiểm soát bố cục và giao diện của nút cũng như chọn xem có hiển thị số người đăng ký kênh hay không.

Thuộc tính bắt buộc

  • class – Đặt giá trị thành g-ytsubscribe. Lớp này sẽ xác định phần tử <div> làm vùng chứa cho nút đăng ký và cho phép YouTube linh động thay đổi kích thước nút nhúng như được giải thích trong phần tiếp theo.

  • Bạn phải chỉ định giá trị cho một trong hai thuộc tính sau:

    • data-channel – Tên của kênh liên kết với nút này. Giá trị mẫu: GoogleDevelopers.
    • data-channelid – Mã nhận dạng kênh liên kết với nút này. Giá trị mẫu: UC_x5XG1OV2P6uZZ5FSM9Ttw. Bạn có thể truy xuất mã nhận dạng kênh trong phần cài đặt tài khoản YouTube của bạn hoặc bằng cách sử dụng APIs Explorer ở cuối tài liệu này. Tìm hiểu thêm về cách làm việc với mã nhận dạng kênh.

Thuộc tính không bắt buộc

  • data-layout – Định dạng cho nút. Giá trị thuộc tính hợp lệ là:

    • default – Hiển thị biểu tượng nút phát và từ 'đăng ký' bằng ngôn ngữ của người dùng, được chọn bằng cài đặt ngôn ngữ hoặc vị trí của người dùng.
    • full – Hiển thị hình đại diện và tiêu đề của kênh ngoài nút chuẩn.

  • data-theme – Chỉ định bảng phối màu để sử dụng cho nút. Các giá trị hợp lệ là defaultdark. Giao diện dark dành cho các ứng dụng đặt các nút trên một phần tử nền tối.

  • data-count – Cho biết nút này có cho biết số người đăng ký của kênh hay không. Hành vi mặc định của nút là hiển thị số người đăng ký. Các giá trị hợp lệ là defaulthidden.

  • data-onyteventLưu ý: Thuộc tính này không còn được dùng nữa.

Sự kiện

Lưu ý: Sự kiện subscribeunsubscribe của Nút đăng ký không còn được dùng nữa. Tương tự, thuộc tính data-ytonevent trước đây có thể được thêm vào phần tử tiện ích để chỉ định trình nghe cho các thông báo sự kiện cũng đã ngừng hoạt động.

Kết xuất động

Thay vì sử dụng mã nhúng chuẩn từ công cụ định cấu hình, bạn có thể kết xuất Subscribe Button một cách linh động. Cách tiếp cận này sẽ ngăn JavaScript của API truyền tải toàn bộ DOM để tìm các nút nhằm cải thiện thời gian hiển thị nút.

Là một phần của Google+ JavaScript API, Subscribe Button hỗ trợ các phương thức gorender chuẩn, có thể dùng để hiển thị linh động các nút gói thuê bao. Ví dụ: bạn có thể sử dụng các phương thức này để hiển thị một nút không xuất hiện khi sự kiện DOM ready kích hoạt, chẳng hạn như trên một trang được cập nhật bằng AJAX.

Phương thức Mô tả
gapi.ytsubscribe.go(
  opt_container
)
Hiển thị tất cả các nút đăng ký trong vùng chứa được chỉ định. Sử dụng phương thức này nếu các thành phần nút đăng ký mà bạn muốn hiển thị đã tồn tại. Ví dụ: nếu ứng dụng của bạn gửi một yêu cầu AJAX trả về phần tử <div> hoàn chỉnh cho Subscribe Button, hãy gọi phương thức go() để kết xuất nút này.
vùng chứa (Opt_container)
Phần tử HTML chứa các nút đăng ký sẽ hiển thị. Chỉ định mã của phần tử hoặc cho phần tử DOM. Nếu thông số này bị bỏ qua, tất cả các nút đăng ký trên trang sẽ hiển thị.
gapi.ytsubscribe.render(
  container,
  parameters
)
Hiển thị Subscribe Button trong vùng chứa được chỉ định. Hãy sử dụng phương thức này nếu phần tử chứa Subscribe Button chưa tồn tại và cần được tạo.
vùng chứa
Xác định phần tử HTML trống mà trong đó Subscribe Button sẽ được kết xuất. Chỉ định mã của phần tử hoặc cho phần tử DOM.
tham số
Đối tượng chứa thuộc tính nút đăng ký là các cặp key:value, chẳng hạn như {"channel": "GoogleDevelopers", "layout": "full"}.

Hiển thị nút bằng gapi.ytsubscribe.go

Ví dụ bên dưới cho thấy mã mà bạn sẽ dùng để gọi phương thức gapi.ytsubscribe.go nhằm kết xuất động một nút khi người dùng nhấp vào đường liên kết.

Lưu ý: Công cụ định cấu hình ở trên cũng sử dụng phương thức go để hiển thị nút mới khi bạn cập nhật tuỳ chọn hoặc mã của nút.

Hiển thị nút bằng gapi.ytsubscribe.render

Ví dụ bên dưới minh hoạ cách gọi phương thức gapi.ytsubscribe.render để tự động kết xuất một nút khi người dùng nhấp vào đường liên kết: