1

I need to display the Youtube channel's name when a user subscribes or unsubscribes to it.

Below are two subscription buttons and an event script.

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

<div id="chan-1" class="g-ytsubscribe" data-channel="SMOSH" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
</div>

<div id="chan-2" class="g-ytsubscribe" data-channel="Apple" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
</div>

<script>
  function onYtEvent(payload) {

    if (payload.eventType == 'subscribe') {
      // Need to display subscribed channel name

    } else if (payload.eventType == 'unsubscribe') {
      // Need to display unsubscribed channel name

    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>
stef
  • 14,172
  • 2
  • 48
  • 70
Haris Harris
  • 31
  • 3

2 Answers2

2

You can do this a couple of ways.

  1. Match the external id passed in the payload argument with the channel id

    The payload argument contains channelExternalId which contains that channels youtube id. You could keep a list of the external ids of the channels you want to show and when the ytevent fires off match channelExternalId to the correct channel name

    var channelNamesById = {
   "UCY30JRSgfhYXA6i6xX1erWg":"SMOSH",
   "UCE_M8A5yxnLfW0KghEeajjw":"Apple"
};
function onYtEvent(payload){
    var channelName = channelNamesById[payload.channelExternalId];
}

    There are a few ways to get a channels id, see here

  2. Dynamically create the buttons, and .bind the channel name to the ytevent callback function, which will pass the channel name as an argument

    The api also allows you to dynamically create the buttons. When you create buttons this way you can make it so the channel name gets passed to the callback function

    Html

    <div id="chan-1"></div>
<div id="chan-2"></div>

    JS

    gapi.ytsubscribe.render(
   document.querySelector("#chan-1"),
   {
       "channel": "SMOSH", 
       "layout": "default",
       "count":"default",
       "onytevent":onYtEvent.bind(null,"SMOSH")
   }
);
gapi.ytsubscribe.render(
  document.querySelector("#chan-2"),
  {
       "channel": "Apple", 
       "layout": "default",
       "count":"default",
       "onytevent":onYtEvent.bind(null,"Apple")
  }
);

function onYtEvent(channelName,payload) {
    console.log(channelName);
}

You could also use the api to do an ajax request to get the channel details, which should include its name, but since you already have the channel name in code I did not cover that option. api for channels

Community
  • 1
  • 1
Patrick Evans
  • 41,991
  • 6
  • 74
  • 87
0

You can use the following code:

    var divs = $('div#chan-1').attr('id');

to get id of <div id="chan-1">.

A JS Bin example: http://jsbin.com/mazasegawu/edit?html,output

szymonsiecinski
  • 11
  • 2