This section explains how to construct a
<div>
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.
Required attributes
-
class
– Set the value to
g-ytsubscribe
. This class identifies the
<div>
element as a container for a subscription button and enables YouTube to dynamically resize the embedded button as explained in the next section.
-
You must specify a value for one of the following two attributes:
data-channel
– The name of the channel associated with the button. Sample value:
GoogleDevelopers
.
data-channelid
– The channel ID associated with the button. Sample value:
UC_x5XG1OV2P6uZZ5FSM9Ttw
. You can retrieve your channel ID in your
YouTube account settings
or by using the
APIs Explorer
at the end of this document. Learn more about
working with channel IDs
.
Optional attributes
-
data-layout
– The format for the button. Valid attribute values are:
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.
full
– Displays the channel's avatar and channel title in addition to the standard button.
-
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.
-
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
.
-
data-onytevent
–
Note:
This attribute has been deprecated.
Events
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.
Dynamic rendering
As an alternative to using the standard embed code from the
configuration tool
, 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.
As a part of the
Google+ JavaScript API
, 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
.
Method
|
Description
|
gapi.ytsubscribe.
go
(
opt_container
)
|
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
<div>
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.
|
gapi.ytsubscribe.
render
(
container
,
parameters
)
|
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
as
key:value
pairs, such as
{"channel": "GoogleDevelopers", "layout": "full"}
.
|
Render a button with gapi.ytsubscribe.go
The 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.
Note:
The
configuration tool
above also uses the
go
method to render a new button when you update the button options or code.
Render a button with gapi.ytsubscribe.render
The example below demonstrates how to call the
gapi.ytsubscribe.render
method to dynamically render a button when the link is clicked: