Reference Guide
با مجموعه‌ها، منظم بمانید
ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.
این بخش نحوه ساخت عنصر <div> را برای دکمه اشتراک توضیح می دهد. لیست های زیر ویژگی های مورد نیاز و اختیاری عنصر را توضیح می دهند. ویژگی‌های اختیاری به شما امکان می‌دهند طرح‌بندی و موضوع دکمه را کنترل کنید و همچنین انتخاب کنید که آیا تعداد مشترکان کانال نمایش داده شود یا خیر.
ویژگی های مورد نیاز
class – مقدار را روی g-ytsubscribe قرار دهید. این کلاس عنصر <div> را به‌عنوان محفظه‌ای برای دکمه اشتراک شناسایی می‌کند و یوتیوب را قادر می‌سازد تا اندازه دکمه تعبیه‌شده را همانطور که در بخش بعدی توضیح داده شد، به صورت پویا تغییر دهد.
شما باید یک مقدار برای یکی از دو ویژگی زیر مشخص کنید:
-
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 به صورت پویا رندر کنید. این رویکرد از عبور جاوا اسکریپت API از کل DOM برای مکان یابی دکمه ها جلوگیری می کند، که می تواند زمان رندر دکمه را بهبود بخشد.
به عنوان بخشی از Google+ JavaScript API ، Subscribe Button از روش‌های استاندارد go and render پشتیبانی می‌کند که می‌تواند برای رندر کردن پویا دکمه‌های اشتراک استفاده شود. به عنوان مثال، می‌توانید از این روش‌ها برای رندر کردن دکمه‌ای استفاده کنید که هنگام فعال شدن رویداد ready DOM وجود ندارد، مانند صفحه‌ای که با AJAX به‌روزرسانی شده است.
| روش | توضیحات |
|---|
gapi.ytsubscribe. go (
opt_container
) | همه دکمه های اشتراک را در ظرف مشخص شده رندر می کند. اگر عناصر دکمه اشتراکی که می خواهید رندر کنید از قبل وجود داشته باشد از این روش استفاده کنید. به عنوان مثال، اگر برنامه شما یک درخواست AJAX ارسال می کند که عنصر <div> کامل را برای Subscribe Button برمی گرداند، متد go() را برای رندر کردن دکمه فراخوانی کنید.
- opt_container
- عنصر HTML که حاوی دکمه های اشتراک برای رندر است. شناسه عنصر یا خود عنصر DOM را مشخص کنید. اگر این پارامتر حذف شود، تمام دکمه های اشتراک در صفحه نمایش داده می شوند.
|
gapi.ytsubscribe. render (
container ,
parameters
) | Subscribe Button در ظرف مشخص شده رندر می کند. اگر عنصری که حاوی Subscribe Button است از قبل وجود نداشته و نیاز به ساخت دارد از این روش استفاده کنید.
- container
- عنصر خالی HTML را که در آن Subscribe Button نمایش داده می شود، مشخص می کند. شناسه عنصر یا خود عنصر DOM را مشخص کنید.
- parameters
- یک شی حاوی ویژگی‌های دکمه اشتراک به‌عنوان جفت‌های
key:value ، مانند {"channel": "GoogleDevelopers", "layout": "full"} .
|
یک دکمه با gapi.ytsubscribe.go رندر کنید
مثال زیر کدی را نشان می دهد که برای فراخوانی متد gapi.ytsubscribe.go برای رندر پویا یک دکمه هنگام کلیک روی پیوند استفاده می کنید.
توجه: ابزار پیکربندی بالا همچنین از روش go برای ارائه یک دکمه جدید هنگام به‌روزرسانی گزینه‌ها یا کدها استفاده می‌کند.
یک دکمه با gapi.ytsubscribe.render رندر کنید
مثال زیر نحوه فراخوانی متد gapi.ytsubscribe.render را برای رندر پویا یک دکمه هنگام کلیک روی پیوند نشان می دهد:
جز در مواردی که غیر از این ذکر شده باشد،محتوای این صفحه تحت مجوز Creative Commons Attribution 4.0 License است. نمونه کدها نیز دارای مجوز Apache 2.0 License است. برای اطلاع از جزئیات، به خطمشیهای سایت Google Developers مراجعه کنید. جاوا علامت تجاری ثبتشده 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```"]]
