The YouTube Subscription Widget lets you add a one-click Subscribe button to any page. The button lets people subscribe to your YouTube channel without having to leave your site to either log in to YouTube or confirm their subscriptions.
The buttons below demonstrate some of the different layout and configuration options for subscription buttons:
|
Standard button: |
Avatar + button: |
Other languages: |
The tool below lets you configure an embedded subscription button. You can set the button's display options, preview the button, and copy the code needed to insert that button on your page.
|
Options
|
Preview Code |
This section explains how to construct an <iframe> tag for a subscription button. As shown in the examples and configuration tool above, the button supports several configurable options. You set these options by adding query parameters to the <iframe> tag's src attribute value. The supported query parameters are also listed below.
Include the following attributes in your <iframe> tag:
class – Set the value to youtube-subscribe-embed. This class identifies the iframe as a subscribe embed and enables YouTube's Iframe API to dynamically resize the embedded button as explained in the next section.
type – Set the value to text/html.
width and height – Choose the appropriate values for your button layout:
default layout – width=154; height=30full layout (avatar + button) – width=212; height=62src – Set the attribute's value to http://www.youtube.com/subscribe_embed? and add the following query parameters:
user_name – Required. The name of the channel associated with the button.layout – Optional. The format for the button. Use the button layout to select the appropriate dimensions for your button. Valid layout parameter values are:
default – Displays a player icon and the word 'subscribe' in either the user's language or another language specified for the button. This is the default layout.full – Displays the channel's avatar and the channel name in addition to the standard button.theme – Optional. Specifies the color scheme to use for the button. Valid values are default and dark. As you've probably guessed, the default value is default.hl – Optional. The hl parameter specifies the language of the button text. By default, the button displays text in the user's default browser language. However, you can override that setting by using the hl parameter to specify the desired language.hl parameter value is a two-letter ISO 639-1 two-letter language code. However, in some cases, you need to specify a locale to identify the proper dialect for a language. For example, the language codes fr and fr-CA specify French and Canadian French, respectively. Please refer to the demo for a list of supported languages.frameborder – Set the value to 0.
You may notice that an iframe that contains an embedded subscription button is larger than the actual button. The size discrepancy accounts for the difference in the button text length for different languages as demonstrated in the buttons below.
To fix this, include the YouTube Iframe API on your page and call the YT.SubscribeEmbed.setup() to resize your buttons. The function is called automatically when your page loads, but you can call it again if your application creates subscription buttons dynamically.
The sample code below demonstrates how to asynchronously load the Iframe API and call the YT.SubscribeEmbed.setup() function.
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function gets called automatically when the page loads,
// but you can call it again if your iframes are created dynamically.
YT.SubscribeEmbed.setup();
</script>
The example below shows a subscription button that has not been resized. The iframe's border lets you see the effect of resizing it. You can click the link to resize the button.
| Resize |