Reference Guide

Attributes

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

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

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

• คุณต้องระบุค่าสำหรับแอตทริบิวต์ใดแอตทริบิวต์หนึ่งต่อไปนี้

  • 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 ซึ่งก่อนหน้านี้สามารถเพิ่มลงในองค์ประกอบวิดเจ็ตเพื่อระบุ Listener สําหรับการแจ้งเตือนเหตุการณ์ได้ ก็ถูกเลิกใช้งานแล้วเช่นกัน

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

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

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

วิธีการ	คำอธิบาย
gapi.ytsubscribe.go(   opt_container )	แสดงปุ่มสมัครใช้บริการทั้งหมดในคอนเทนเนอร์ที่ระบุ ใช้วิธีนี้หากมีองค์ประกอบปุ่มสมัครใช้บริการที่คุณต้องการแสดงอยู่แล้ว ตัวอย่างเช่น หากแอปพลิเคชันส่งคำขอ AJAX ที่แสดงผลองค์ประกอบ <div> ที่สมบูรณ์สำหรับ Subscribe Button ให้เรียกใช้เมธอด go() เพื่อแสดงปุ่ม opt_container องค์ประกอบ 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 เพื่อแสดงปุ่มแบบไดนามิกเมื่อมีการคลิกลิงก์