Reference Guide

السمات

يوضح هذا القسم كيفية إنشاء عنصر <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 التي كان من الممكن إضافتها في وقت سابق إلى عنصر الأداة لتحديد مستمع لإشعارات الأحداث.

العرض الديناميكي

كبديل لاستخدام رمز التضمين القياسي من أداة التهيئة، يمكنك عرض Subscribe Button ديناميكيًا. تمنع هذه الطريقة رمز JavaScript لواجهة برمجة التطبيقات من اجتياز 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 لعرض زر ديناميكيًا عند النقر على الرابط: