YouTube API v3 Subs Count with JavaScript
In this video, we will learn how to use the YouTube API v3 to grab some data and display it on the screen. I will keep everything in one file to keep it simple and straight to the point.
First, you need to get your YouTube API key from the link below, and once you do that make sure you find your YouTube ID too. Reference the video to see how you can find your YouTube channel ID.
YouTube API:
https://console.developers.google.com/apis/library/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube API</title>
</head>
<body>
YouTube Subscribers
<div id="subCount"></div>
<script>
// Get Subscribers
const youtubeKey = ' ADD YOUR KEY HERE';
const youtubeUser = ' ADD YOUR USER ID HERE';
const subCount = document.getElementById('subCount');
let getSubscribers = () => {
fetch(`https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${youtubeUser}&key=${youtubeKey}`)
.then(response => {
return response.json()
})
.then(data => {
console.log(data);
subCount.innerHTML = data["items"][0].statistics.subscriberCount;
})
}
getSubscribers();
</script>
</body>
</html>Live Subscribers Count
Add setInterval to check every 10 minutes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube API</title>
</head>
<body>
YouTube Subscribers
<div id="subCount"></div>
<script>
// Get Subscribers
const youtubeKey = ' ADD YOUR KEY HERE';
const youtubeUser = ' ADD YOUR USER ID HERE';
const subCount = document.getElementById('subCount');
const delay = 1000; // 10 min
let getSubscribers = () => {
fetch(`https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${youtubeUser}&key=${youtubeKey}`)
.then(response => {
return response.json()
})
.then(data => {
console.log(data);
subCount.innerHTML = data["items"][0].statistics.subscriberCount;
})
}
setInterval(() => {
getSubscribers();
}, delay);
</script>
</body>
</html>Thank you for reading this article. Please consider subscribing to my YouTube Channel.
More Resources:
Author
Hi! I’m Raddy. I am a web developer, often making YouTube Videos, Blog Posts and side projects. Enquiries: [email protected]
H!
I implemented your code in my website but it is getting error. Cannot read property ‘0’ undefined.
The very first time it worked and after sometimes api is not working. what should i do?
I will paste my website link below … pls do visit it once and also u r welcome to comment down below and say about my website …try inspecting it pls …and let me know what exact problem is coming.
I will be grateful if u help me… and ya your content is very much worth. Thank you
Hey Rohit,
It seems to be working on my end. It shows that you have 257 subscribers. Could it be that you are reaching your quota for your YouTube API? I can’t remember how many calls you can make for free in a month/day. Check that
Regarding your portfolio, it’s looking pretty cool, but I feel that it might be a little bit too minimal and dark for a Graphics Designer. I would personally do something a little bit more creative.
Your hero image has a typo “H! I am”.
You can link your YouTube channel and your Instagram is private
Everything else is looking good. It’s responsive and clean.
I hope this helps 🙂
How can I search user and not channels? like this: https://www.youtube.com/user/MrBeast6000
I don’t think that there is a difference between a user and a channel. A user automatically has a channel under their name, but you can also create multiple channels with one user.
Correct me if I am wrong, but I think that the http://www.youtube.com/user/ might be how it used to work. Now we have http://www.youtube.com/channel/ or http://www.youtube.com/c/
I assume that for older youtube channels you can still use the “user” URL as if they removed that, the link will break everywhere.
I don’t think that there is a difference.
Hello I just watched your youtube video about the sub count data api.
And Im wondering if you can help me to create a subcount livestream with subscriber comparison?
Like that one : https://www.youtube.com/watch?v=ftMnmPC82qM
And how much will cost me?
Are you looking to do exactly the same thing with the TOP 50 channels?
That is done by embedding the TOP Youtubers using this website:
https://livecounts.io/youtube-live-subscriber-count/UCX6OQ3DkcsbYNE6H8uQQuVA
It’s very easy to do. Pick a top YouTuber and you can embed it.
Unfortunately, I think that this is only a prediction for the Top YouTubers and it will not work on other channels.
Google changed the API and now the numbers are abbreviated.
Question I tried to change the font in more than one way for the numbers to appear in a different font than the average, but the matter did not work on the text, knowing that if I changed the font size easily, can you help me with that
// Get Subscribers
const youtubeKey = ‘*************************’;
const youtubeUser = ‘UCqq5n-Oe-r1EEHI3yvhVJcA’;
const subCount = document.getElementById (‘subCount’);
const delay = 1000; // 10 min
window.subCount.fontFamily = “Impact, Charcoal, sans-serif”;
window.subCount.style.fontSize = “70px”;
Question I tried to change the font in more than one way for the numbers to appear in a different font than the average, but the matter did not work on the text, knowing that if I changed the font size easily, can you help me with that
Picture illustrating the problem
https://www13.0zz0.com/2021/05/21/23/284247782.png
Why don’t you use CSS?
como obtengo los subscriptores sin redondeo? porque un canal autenticado con mas de 35500 de followers lo redondea a 355k
Hola, Desafortunadamente, ya no puedes hacer eso. Google cambió la API y ahora los números se abrevian.
Unfortunately, you can’t do that anymore. The only way to get the real-time sub count is from YouTube Studio