So I want to embed various YouTube subscribe buttons on my site’s dynamic pages. This is the code that should be in the html element
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>
I want to pass the data-channel variable from the code with:
$w("#html1").postMessage(datachannel);
But I have no idea how to write the HTML code. Need the gurus’ help on this.
Thanks!
Post reached Page 3, hoping someone out there can help. 
Thanks
Do you have another data-Channel than —> GoogleDevelopers for testing?
So glad to get a response. Thank you!
Sure any channel will do, that’s just the default code they provide as an example.
You can try any of the following:
loveradionetwork
or
UCZTlGPEnQ66TFG0m6Wa3KFQ
or
LuisMetalKid
Thank again!
@russian-dima tagging you so this doesnt get buried to page 5
This is what you will need for the html…
<html>
<head>
<title></title>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
async function createButton() {console.log("Create new Div running...")
var myButtonTitle="xxxxx"
var myChannel = "LuisMetalKid"
var myDIV = document.createElement("DIV");
var divTitle = document.createTextNode(myButtonTitle);
myDIV.id = "youtubeContainer";
myDIV.appendChild(divTitle);
document.body.appendChild(myDIV)
document.getElementById("youtubeContainer").innerHTML = ('<div class="g-ytsubscribe" data-channel='+myChannel+' data-layout="default" data-count="default"></div>');
}
createButton();
</script>
</head>
<body>
</body>
</html>
When changing → “myChannel” <— manualy it already works.
All you have to do now, is to get data from your site to the HTML.
DATA = “LuisMetalKid” (for example")
…or…
DATA = “UCZTlGPEnQ66TFG0m6Wa3KFQ”
Your first part you can test here…https://jsfiddle.net/russian_dima/c5bqjhy7/19/
Change MANUALY the —> DATA and press onto the YT-Button. See what happens.
Here you have an example what to add to your site-code-section…
$w.onReady(async function () {
$w('#button1').onClick(()=>{
$w("#html1").postMessage("LuisMetalKid");
});
$w('#button2').onClick(()=>{
$w("#html1").postMessage("UCZTlGPEnQ66TFG0m6Wa3KFQ");
});
$w('#button3').onClick(()=>{
$w("#html1").postMessage("loveradionetwork");
});
});
I took a third look onto your problem and tried to solve it, but could not find the end-solution. To manage this, seems to be a little bit tricky.
Perhaps i need some API-Key to get it to work, i don’t know.
This is what i can offer you so far…
<html>
<head>
<title></title>
<script src="https://apis.google.com/js/platform.js"></script>
</head>
<body>
<div id="youtubeContainer" class="" data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>
<script>
async function createButton(recievedData) {console.log("Create new Div running...")
var myButtonTitle=recievedData
//var myChannel = recievedData
var divTitle = document.createTextNode(myButtonTitle);
var myDIV = document.createElement("DIV");
myDIV.id = await "youtubeContainer";
await myDIV.appendChild(divTitle);
document.body.appendChild(myDIV)
//document.getElementById("youtubeContainer").innerHTML = ('<div class="g-ytsubscribe" data-channel='+myChannel+' data-layout="default" data-count="default"></div>');
}
window.onmessage = async (event) => {
let recievedData = await event.data
console.log(recievedData.substring(0,1))
if (recievedData.substring(0,1)!=="!" && recievedData.substring(0,1)!=="{"){
console.log(recievedData)
await createButton(recievedData);
}
else{console.log("No data found!!!")}
}
</script>
</body>
</html>
Set attributes this way…
//myDIV.innerHTML = '<div class="g-ytsubscribe" </div>';
//myDIV.innerHTML = '<div data-channel="LuisMetalKid" </div>';
//myDIV.innerHTML = '<div data-layout="default" </div>';
//myDIV.innerHTML = '<div data-count="default" </div>';
…or this way…
//myDIV.setAttribute("id", "youtubeContainer");
//myDIV.setAttribute("class", "g-ytsubscribe");
//myDIV.setAttribute("data-layout", "default");
//myDIV.setAttribute("data-count", "default");
…was not possible.
When using the on.message-command everything gone crazy.
Seems like there is an automatic interval given inside the YT-element, which causes problems.
I tried to resolve the issue, by using an simple if-query…
if (recievedData.substring(0,1)!=="!" && recievedData.substring(0,1)!=="{"){......
I did some testings on this site … https://www.media-junkie.com/html-test-1
The communication between website & html-component, worked, but anyway without success.
Perhaps you will find a way how to solve it, sorry.
Some useful informations, perhaps you will be able to find here…
Good luck.
Sorry this was the last version…
<html>
<head>
<title></title>
<script src="https://apis.google.com/js/platform.js"></script>
</head>
<body>
<button onclick="xxx()">Button</button>
<script>
window.onmessage = async (event) => {createButton(event.data);
let recievedData = await event.data
// console.log(recievedData.substring(0,1))
if (recievedData.substring(0,1)!=="!" && recievedData.substring(0,1)!=="{"){
console.log(recievedData)
await createButton(recievedData);
}
else{}
}
async function createButton(recievedData) {console.log("Create new Div running...")
var recievedData = recievedData
var myButtonTitle = recievedData
var myChannel = recievedData
var divTitle = document.createTextNode(myButtonTitle);
var myDIV = document.createElement("div");
myDIV.appendChild(divTitle);
myDIV.id = "youtubeContainer"
myDIV.innerHTML = ('<div class="g-ytsubscribe" data-channel='+myChannel+' data-layout="default" data-count="default"></div>');
document.body.appendChild(myDIV)
}
async function xxx(){console.log("click")
let myDIV=document.getElementById("youtubeContainer")
alert(myDIV.id + myDIV.innerHTML);
}
</script>
</body>
</html>
Oh my gosh… Thank you very much! this is awesome! @russian-dima you’re a rockstar! Tried it, almost there huh. Thank you I really appreciate the effort! I’m gonna sit staring at the code and see what I can experiment on. But this is really step towards the direction we want to go. Thanks again!
Yes i understand. It looks like a simple button, but it IS NOT !
I had to fight with the button for a long time 
(and i lost the fight).
Perhaps someone can give you more informations on it.
You will have first to learn HTML5 (and CSS) before you can understand the code.
Your best friend in this situation is ----> search for W3Shool .
@russian-dima Thank you for your effort. Really appreciate it! Just to push my luck further. How about if we pass the whole code from the website to html something like this:
on the website
datatoPass = "<div class="g-ytsubscribe"data-channel="GoogleDevelopers" data-layout="default" data-count="default"></div>"
$w("#html1").postMessage("datatoPass");
Would that be easier to receive in the CSS code?
@mobilegames Ok, my last post for today…
Then you perhaps could do something like that…
<html>
<head>
<title></title>
<script src="https://apis.google.com/js/platform.js"></script>
</head>
<body onload="start()">
<div id="youtubeContainer" ></div>
<script>
function start(){
window.onmessage = async (event) => {
let recievedData = await event.data; console.log(recievedData)
document.getElementById("youtubeContainer").innerHTML=recievedData
else{console.log("No data found!!!")}
}
}
</script>
</body>
</html>
Your data should look this way…
$w.onReady(()=>{
let myData2send =('<div class="g-ytsubscribe" data-channel="LuisMetalKid" data-layout="default" data-count="default"></div>');
$w('#mySendButton').onClick(()=>{
"$w("#html1").postMessage(myData2send);
});
});
Good luck!