CODEWITHSUNDEEP
javascripthtmlyoutube
user3024235
user3024235

Reputation: 425

Add Youtube Subscribe Button using Javascript

I am attempting to add a youtube subscribe button dynamically to my site like so:

<script src="https://apis.google.com/js/platform.js"></script>
<div id="youtubeContainer"></div>       
...
window.onload = function() {
    document.getElementById("youtubeContainer").innerHTML = ('<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>');
}

But the button is not visible. I am wondering if there is a way to load a youtube subscribe button dynamically so I can enter a new channel name/id?

Upvotes: 2

Views: 4700

Answers (2)

Manish
Manish

Reputation: 11

Many Youtubers having their personal websites want to add channel subscription button on their website, Below is the step by step guide on adding a youtube subscribe button on your website.
Step 1) Go to https://developers.google.com/youtube/youtube_subscribe_button.

Step 2) Enter your Channel Id in the text box.

Step 3) Select the Layout of Button

Step 4) Select the Theme.

Step 5) Subscriber Count(shown or hidden)

Step 6) Get the code & paste into your Website.
Read More..How to add Youtube Subscribe button in Javascript

Upvotes: 0

Rohit Goyani
Rohit Goyani

Reputation: 1256

It is already working. I think problem in other code of your page.

<script src="https://apis.google.com/js/platform.js"></script>
<div id="youtubeContainer"></div>    
<script>

    document.getElementById("youtubeContainer").innerHTML = ('<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>');

</script>

JSBIN

[EDIT]

With window onload : 

function renderYtSubscribeButton(channel) {
      var container = document.getElementById('youtubeContainer');
      var options = {
        'channel': channel,
        'layout': 'default'
      };
      gapi.ytsubscribe.render(container, options);
    }

window.onload = function() {
renderYtSubscribeButton("GoogleDevelopers");
}  

</script>

JSBIN

Upvotes: 3

Related Questions