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

Leave a Reply

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