Raddy The Brand Official Website

YouTube API v3 Subs Count with JavaScript

By Raddy in 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.

  1. Rohit Dhende says:

    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

    1. Raddy says:

      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 šŸ™‚

  2. MB says:

    How can I search user and not channels? like this: https://www.youtube.com/user/MrBeast6000

    1. Raddy says:

      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.

  3. Denis says:

    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?

    1. Raddy says:

      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.

  4. BENABDELLAH says:

    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”;

    1. BENABDELLAH says:

      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

      1. Raddy says:

        Why don’t you use CSS?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.