Reference Guide
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يوضّح هذا القسم كيفية إنشاء عنصر <div> لزر اشتراك. توضّح القوائم أدناه السمات المطلوبة والاختيارية للعنصر. تتيح لك السمات الاختيارية التحكّم في تخطيط الزر ومظهره، بالإضافة إلى اختيار ما إذا كنت تريد عرض عدد المشتركين في القناة.
السمات المطلوبة
-
class: اضبط القيمة على g-ytsubscribe. يحدّد هذا الصف العنصر <div> كحاوية لزر الاشتراك ويتيح لـ YouTube تغيير حجم الزر المضمّن ديناميكيًا كما هو موضّح في القسم التالي.
-
يجب تحديد قيمة لإحدى السمتَين التاليتَين:
السمات الاختيارية
-
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 لعرض زر بشكل ديناميكي عند النقر على الرابط:
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-08-21 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-21 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Reference Guide\n\nAttributes\n----------\n\nThis section explains how to construct a `\u003cdiv\u003e` element for a subscription button. The lists below explain the element's required and optional attributes. Optional attributes let you control the button's layout and theme as well as choose whether to display the channel's subscriber count.\n\n### Required attributes\n\n- `class` -- Set the value to `g-ytsubscribe`. This class identifies the `\u003cdiv\u003e` element as a container for a subscription button and enables YouTube to dynamically resize the embedded button as explained in the next section.\n\n- You must specify a value for one of the following two attributes:\n\n \u003cbr /\u003e\n\n - `data-channel` -- The name of the channel associated with the button. Sample value: `GoogleDevelopers`.\n - `data-channelid` -- The channel ID associated with the button. Sample value: `UC_x5XG1OV2P6uZZ5FSM9Ttw`. You can retrieve your channel ID in your [YouTube account settings](http://www.youtube.com/account_advanced) or by using the [APIs Explorer](/youtube/youtube_subscribe_button#Retrieve_Channel_ID) at the end of this document. Learn more about [working with channel IDs](/youtube/v3/guides/working_with_channel_ids).\n\n### Optional attributes\n\n- `data-layout` -- The format for the button. Valid attribute values are:\n\n \u003cbr /\u003e\n\n - `default` -- Displays a play button icon and the word 'subscribe' in the user's language, which is selected using either the user's language setting or location.\n - `full` -- Displays the channel's avatar and channel title in addition to the standard button.\n\n \u003cbr /\u003e\n\n- `data-theme` -- Specifies the color scheme to use for the button. Valid values are `default` and `dark`. The `dark` theme is intended for applications that place buttons over a darker background element.\n\n- `data-count` -- Indicates whether the button displays the number of subscribers that the channel has. The button's default behavior is to display the subscriber count. Valid values are `default` and `hidden`.\n\n- `data-onytevent` -- **Note:** This attribute has been deprecated.\n\nEvents\n------\n\n**Note:** The Subscribe Button's `subscribe` and `unsubscribe` events have been deprecated. Similarly, the `data-ytonevent` attribute, which could previously be added to the widget element to specify a listener for event notifications, has also been deprecated.\n\nDynamic rendering\n-----------------\n\nAs an alternative to using the standard embed code from the [configuration tool](#Configure_a_Button), you can dynamically render the Subscribe Button. This approach prevents the API's JavaScript from traversing the entire DOM to locate buttons, which can improve button rendering time.\n\nAs a part of the [Google+ JavaScript API](https://developers.google.com/+/web/api/javascript), the Subscribe Button supports standard `go` and `render` methods, which can be used to dynamically render subscription buttons. For example, you could use these methods to render a button that is not present when the DOM `ready` event fires, such as on a page that is updated with AJAX.\n\n| Method | Description |\n|-----------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `gapi.ytsubscribe.`**go** `(` ` `\u003cvar class=\"notranslate\"\u003eopt_container\u003c/var\u003e `)` | Renders all subscription buttons in the specified container. Use this method if the subscription button elements that you want to render already exist. For example, if your application sends an AJAX request that returns the complete `\u003cdiv\u003e` element for a Subscribe Button, call the `go()` method to render the button. *** ** * ** *** opt_container : The HTML element that contains the subscription buttons to render. Specify either the element's ID or the DOM element itself. If this parameter is omitted, all subscription buttons on the page are rendered. |\n| `gapi.ytsubscribe.`**render** `(` ` `\u003cvar class=\"notranslate\"\u003econtainer\u003c/var\u003e`,` ` `\u003cvar class=\"notranslate\"\u003eparameters\u003c/var\u003e `)` | Renders the Subscribe Button within the specified container. Use this method if the element that will contain the Subscribe Button does not already exist and needs to be constructed. *** ** * ** *** container : Identifies the empty HTML element in which the Subscribe Button will be rendered. Specify either the element's ID or the DOM element itself. parameters : An object containing [subscription button attributes](#Subscription_Button_Attributes) as `key:value` pairs, such as `{\"channel\": \"GoogleDevelopers\", \"layout\": \"full\"}`. |\n\n### Render a button with gapi.ytsubscribe.go\n\nThe example below shows the code that you would use to call the `gapi.ytsubscribe.go` method to dynamically render a button when the link is clicked.\n\n```js\nLink: Click here for a button!\n\nDisplay button here: \n \n\nCode:\n \u003ca href=\"javascript:void(0);\"\n onclick=\"goYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button!\u003c/a\u003e\n Display button here: \u003cdiv id=\"yt-button-container-go\"\u003e\u003c/div\u003e\n \u003cscript\u003e\n function goYtSubscribeButton() {\n // ID of element containing \u003cdiv class=\"g-ytsubscribe\"\u003e element(s)\n // The container element already contains the button elements when this\n // function is called.\n var containerId = \"sample-container\";\n gapi.ytsubscribe.go(containerId);\n }\n \u003c/script\u003e\n\n \u003cb\u003eLink\u003c/b\u003e\n \u003ca href=\"javascript:void(0);\"\n onclick=\"goYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button\u003c/a\u003e\n\n \u003cb\u003eDisplay button here:\u003c/b\u003e\n \u003cdiv id=\"yt-button-container-go\" style=\"display-inline\"\u003e\u003c/div\u003e\n```\n\n**Note:** The [configuration tool](#Configure_a_Button) above also uses the `go` method to render a new button when you update the button options or code.\n\n### Render a button with gapi.ytsubscribe.render\n\nThe example below demonstrates how to call the `gapi.ytsubscribe.render` method to dynamically render a button when the link is clicked:\n\n```js\nLink: Click here for a button!\n\nDisplay button here: \n \n\nCode:\n \u003ca href=\"javascript:void(0);\"\n onclick=\"renderYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button!\u003c/a\u003e\n Display button here: \u003cdiv id=\"yt-button-container-render\"\u003e\u003c/div\u003e\n \u003cscript\u003e\n function renderYtSubscribeButton(channel) {\n var container = document.getElementById('yt-button-container-render');\n var options = {\n 'channel': channel,\n 'layout': 'full'\n };\n gapi.ytsubscribe.render(container, options);\n }\n \u003c/script\u003e\n\n \u003cb\u003eLink:\u003c/b\u003e\n \u003ca href=\"javascript:void(0);\"\n onclick=\"renderYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button!\u003c/a\u003e\n\n \u003cb\u003eDisplay button here:\u003c/b\u003e\n \u003cdiv id=\"yt-button-container-render\" style=\"display:inline\"\u003e\u003c/div\u003e\n```"]]
