Reference Guide

Atribut

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

Atribut wajib

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

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

    • data-channel – Nama saluran yang terkait dengan tombol. Contoh nilai: GoogleDevelopers.
    • data-channelid – ID channel yang terkait dengan tombol. Contoh nilai: UC_x5XG1OV2P6uZZ5FSM9Ttw. Anda dapat mengambil ID channel di setelan akun YouTube atau dengan 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 belakang yang lebih gelap.

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

  • data-onytevent – Catatan: Atribut ini tidak digunakan lagi.

Acara

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

Rendering dinamis

Sebagai alternatif untuk menggunakan kode sematan standar dari alat konfigurasi, Anda dapat merender Subscribe Button secara dinamis. Pendekatan ini mencegah JavaScript API melintasi 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 diaktifkan, seperti di halaman yang diperbarui dengan AJAX.

Metode Deskripsi
gapi.ytsubscribe.go(
  opt_container
)		 Merender semua tombol langganan di penampung yang ditentukan. Gunakan metode ini jika elemen tombol langganan yang ingin Anda render sudah ada. Misalnya, jika aplikasi Anda mengirim permintaan AJAX yang menampilkan elemen <div> lengkap untuk Subscribe Button, panggil metode go() untuk merender tombol.
opt_container
Elemen HTML yang berisi tombol langganan untuk dirender. Tentukan ID elemen atau elemen DOM itu sendiri. Jika parameter ini tidak ada, 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.
container
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: