Reference Guide

แอตทริบิวต์

ส่วนนี้จะอธิบายวิธีสร้างองค์ประกอบ <div> สําหรับปุ่มการสมัครใช้บริการ รายการด้านล่างจะอธิบายแอตทริบิวต์ที่จําเป็นและไม่บังคับขององค์ประกอบ แอตทริบิวต์ที่ไม่บังคับนี้ช่วยให้คุณควบคุมเลย์เอาต์และธีมของปุ่มได้ รวมถึงเลือกได้ว่าจะแสดงจํานวนผู้ติดตามของช่องหรือไม่

แอตทริบิวต์ที่จำเป็น

• class – กําหนดค่าเป็น g-ytsubscribe คลาสนี้ระบุองค์ประกอบ <div> เป็นคอนเทนเนอร์สําหรับปุ่มติดตามและช่วยให้ YouTube ปรับขนาดปุ่มที่ฝังได้แบบไดนามิกตามที่อธิบายไว้ในส่วนถัดไป

• คุณต้องระบุค่าสําหรับแอตทริบิวต์ 1 ใน 2 รายการต่อไปนี้

  • data-channel – ชื่อช่องที่เชื่อมโยงกับปุ่ม ค่าตัวอย่าง: GoogleDevelopers
  • data-channelid – รหัสช่องที่เชื่อมโยงกับปุ่ม ค่าตัวอย่าง: UC_x5XG1OV2P6uZZ5FSM9Ttw คุณเรียกข้อมูลรหัสช่องได้ในการตั้งค่าบัญชี YouTube หรือใช้ APIs Explorer ที่ส่วนท้ายของเอกสารนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการทํางานกับรหัสช่อง

แอตทริบิวต์ที่ไม่บังคับ

• data-layout – รูปแบบของปุ่ม ค่าแอตทริบิวต์ที่ถูกต้องมีดังนี้

  • default – แสดงไอคอนปุ่มเล่นและคําว่า "สมัครใช้บริการ" ในภาษาของผู้ใช้ ซึ่งเลือกโดยใช้การตั้งค่าภาษาหรือสถานที่ตั้งของผู้ใช้
  • full - แสดงรูปโปรไฟล์และชื่อช่องนอกเหนือจากปุ่มมาตรฐาน

• data-theme – ระบุรูปแบบสีที่จะใช้สําหรับปุ่ม ค่าที่ถูกต้องคือ default และ dark ธีม dark มีไว้สําหรับแอปพลิเคชันที่วางปุ่มบนองค์ประกอบสีเข้ม

• data-count – ระบุว่าปุ่มจะแสดงจํานวนผู้ติดตามของช่องหรือไม่ ลักษณะการทํางานเริ่มต้นของปุ่มคือแสดงจํานวนผู้ติดตาม ค่าที่ถูกต้องคือ default และ hidden

• data-onytevent – หมายเหตุ: เราเลิกใช้งานแอตทริบิวต์นี้แล้ว

กิจกรรม

หมายเหตุ: เราเลิกใช้งานกิจกรรม subscribe และ unsubscribe ของปุ่มติดตามแล้ว ในทํานองเดียวกัน แอตทริบิวต์ data-ytonevent ซึ่งก่อนหน้านี้อาจเพิ่มลงในองค์ประกอบวิดเจ็ตเพื่อระบุผู้ฟังสําหรับการแจ้งเตือนเหตุการณ์ก็เลิกใช้งานแล้วเช่นกัน

การแสดงผลแบบไดนามิก

นอกจากการใช้โค้ดฝังแบบมาตรฐานจากเครื่องมือการกําหนดค่า คุณจะแสดงผล Subscribe Button แบบไดนามิกได้ วิธีนี้จะป้องกันไม่ให้ JavaScript ของ API ข้ามผ่าน DOM ทั้งหมดเพื่อค้นหาปุ่ม ซึ่งจะช่วยปรับปรุงเวลาในการแสดงผลปุ่ม

Subscribe Button รองรับเมธอด go และ render มาตรฐาน ซึ่งเป็นส่วนหนึ่งของ Google+ JavaScript API ซึ่งใช้แสดงผลปุ่มการสมัครใช้บริการแบบไดนามิกได้ ตัวอย่างเช่น คุณอาจใช้วิธีการเหล่านี้ในการแสดงผลปุ่มที่ไม่แสดงเมื่อเหตุการณ์ DOM ready เริ่มทํางาน เช่น ในหน้าที่อัปเดตเป็น AJAX

วิธีการ	คำอธิบาย
gapi.ytsubscribe.go(   opt_container )	แสดงปุ่มการสมัครใช้บริการทั้งหมดในคอนเทนเนอร์ที่ระบุ ใช้วิธีการนี้หากมีองค์ประกอบปุ่มการสมัครใช้บริการที่ต้องการแสดงผลอยู่แล้ว ตัวอย่างเช่น หากแอปพลิเคชันส่งคําขอ AJAX ที่แสดงองค์ประกอบ <div> ที่ครบถ้วนสําหรับ Subscribe Button ให้เรียกใช้เมธอด go() เพื่อแสดงผลปุ่ม {6}คอนเทนเนอร์ องค์ประกอบ HTML ที่มีปุ่มการติดตามที่จะแสดง ระบุรหัสขององค์ประกอบหรือองค์ประกอบ DOM เอง หากไม่ระบุพารามิเตอร์นี้ ปุ่มติดตามทั้งหมดในหน้าจะแสดงขึ้นมา
gapi.ytsubscribe.render(   container,   parameters )	แสดงผล Subscribe Button ภายในคอนเทนเนอร์ที่ระบุ ใช้วิธีการนี้ในกรณีที่ไม่มีองค์ประกอบ Subscribe Button อยู่แล้ว และจําเป็นต้องมีการสร้าง คอนเทนเนอร์ ระบุองค์ประกอบ HTML ว่างเปล่าซึ่งจะแสดงผล Subscribe Button ระบุรหัสขององค์ประกอบหรือองค์ประกอบ DOM เอง พารามิเตอร์ ออบเจ็กต์ที่มีแอตทริบิวต์ปุ่มติดตามเป็นคู่ของ key:value เช่น {"channel": "GoogleDevelopers", "layout": "full"}

แสดงปุ่มด้วย gapi.ytsubscribe.go

ตัวอย่างด้านล่างแสดงโค้ดที่คุณจะใช้เพื่อเรียกเมธอด gapi.ytsubscribe.go เพื่อแสดงผลปุ่มแบบไดนามิกเมื่อมีการคลิกลิงก์

หมายเหตุ: เครื่องมือกําหนดค่าด้านบนยังใช้เมธอด go ในการแสดงผลปุ่มใหม่เมื่อคุณอัปเดตตัวเลือกหรือโค้ดของปุ่มด้วย

แสดงปุ่มด้วย gapi.ytsubscribe.render

ตัวอย่างด้านล่างแสดงวิธีเรียกเมธอด gapi.ytsubscribe.render เพื่อแสดงผลปุ่มแบบไดนามิกเมื่อมีการคลิกลิงก์