Reference Guide

Atribut

Bagian ini menjelaskan cara membuat elemen <div> untuk tombol langganan. Daftar di bawah menjelaskan atribut wajib dan opsional elemen. Dengan atribut opsional, Anda dapat mengontrol tata letak dan tema tombol serta memilih apakah akan menampilkan jumlah subscriber channel atau tidak.

Atribut yang diperlukan

  • class – Tetapkan nilai ke g-ytsubscribe. Class ini mengidentifikasi elemen <div> sebagai penampung untuk tombol langganan dan memungkinkan YouTube mengubah ukuran tombol tersemat secara dinamis seperti yang dijelaskan di bagian berikutnya.

  • Anda harus menentukan nilai untuk salah satu dari dua atribut berikut:

    • data-channel – Nama channel yang terkait dengan tombol. Nilai contoh: GoogleDevelopers.
    • data-channelid – ID saluran yang terkait dengan tombol. Nilai contoh: UC_x5XG1OV2P6uZZ5FSM9Ttw. Anda dapat mengambil ID channel di setelan akun YouTube atau menggunakan APIs Explorer di akhir dokumen ini. Pelajari lebih lanjut cara menggunakan ID channel.

Atribut opsional

  • data-layout – Format untuk tombol. Nilai atribut yang valid adalah:

    • default – Menampilkan ikon tombol putar dan kata 'subscribe' dalam bahasa pengguna yang dipilih menggunakan setelan bahasa atau lokasi pengguna.
    • full – Menampilkan avatar dan judul channel, selain tombol standar.

  • data-theme – Menentukan skema warna yang akan digunakan untuk tombol. Nilai yang valid adalah default dan dark. Tema dark ditujukan untuk aplikasi yang menempatkan tombol di atas elemen latar yang lebih gelap.

  • data-count – Menunjukkan apakah tombol menampilkan jumlah subscriber yang dimiliki channel. Perilaku default tombol adalah untuk menampilkan jumlah subscriber. Nilai yang valid adalah default dan hidden.

  • data-onyteventCatatan: Atribut ini tidak digunakan lagi.

Peristiwa

Catatan: Peristiwa subscribe dan unsubscribe pada Tombol Berlangganan sudah tidak digunakan lagi. Demikian pula, atribut data-ytonevent, yang sebelumnya dapat ditambahkan ke elemen widget untuk menentukan pemroses notifikasi peristiwa, juga tidak digunakan lagi.

Rendering dinamis

Sebagai alternatif untuk menggunakan kode sematan standar dari alat konfigurasi, Anda dapat merender Subscribe Button secara dinamis. Pendekatan ini mencegah JavaScript API menjelajahi seluruh DOM untuk menemukan tombol, yang dapat meningkatkan waktu rendering tombol.

Sebagai bagian dari Google+ JavaScript API, Subscribe Button mendukung metode go dan render standar, yang dapat digunakan untuk merender tombol langganan secara dinamis. Misalnya, Anda dapat menggunakan metode ini untuk merender tombol yang tidak ada saat peristiwa DOM ready aktif, seperti di halaman yang diperbarui dengan AJAX.

Metode Deskripsi
gapi.ytsubscribe.go(
  opt_container
)
Merender semua tombol langganan dalam penampung yang ditentukan. Gunakan metode ini jika elemen tombol langganan yang ingin dirender sudah ada. Misalnya, jika aplikasi Anda mengirim permintaan AJAX yang menampilkan elemen <div> lengkap untuk Subscribe Button, panggil metode go() untuk merender tombol.
penampung_pengoptimalan
Elemen HTML yang berisi tombol langganan untuk dirender. Tentukan ID elemen atau elemen DOM itu sendiri. Jika parameter ini dihilangkan, semua tombol langganan di halaman akan dirender.
gapi.ytsubscribe.render(
  container,
  parameters
)
Merender Subscribe Button dalam penampung yang ditentukan. Gunakan metode ini jika elemen yang akan berisi Subscribe Button belum ada dan perlu dibuat.
penampung
Mengidentifikasi elemen HTML kosong tempat Subscribe Button akan dirender. Tentukan ID elemen atau elemen DOM itu sendiri.
parameter
Objek yang berisi atribut tombol langganan sebagai pasangan key:value, seperti {"channel": "GoogleDevelopers", "layout": "full"}.

Merender tombol dengan gapi.ytsubscribe.go

Contoh di bawah menunjukkan kode yang akan Anda gunakan untuk memanggil metode gapi.ytsubscribe.go guna merender tombol secara dinamis saat link diklik.

Catatan: Alat konfigurasi di atas juga menggunakan metode go untuk merender tombol baru saat Anda memperbarui opsi atau kode tombol.

Merender tombol dengan gapi.ytsubscribe.render

Contoh di bawah menunjukkan cara memanggil metode gapi.ytsubscribe.render untuk merender tombol secara dinamis saat link diklik: