Youtube API to count Subscribers , Views and Video using JavaScript

Learn to create a dashboard using YouTube API and JavaScript.

we can make a simple YouTube analytics and counter dashboard using YouTube API.

Its provides very decent documentation to integrate with JavaScript and in this application,
you don’t need to make any special environment to run this code.

so we are only using the basic features of HTML and JavaScript and the YouTube API.

You have to do two things to make this happen first create a YouTube API key from the Google developer console and get your channel ID.

You can find your channel ID in your YouTube studio but if you are going to check someone else channel you can choose any of the services available for extracting YouTube channel ID from YouTube channel link you can use any of that services to find any channels user ID.

So we are going to make a javascript for getting the youtube channel subscriber count, total video views count and total videos count. so we need an API key for that ..

https://console.developers.google.com/ Go to this website Create a project ->

the click library -> search for YouTube Data API v3 ->

then Enable it -> then click create credentials -> select Credential Type Public -> and get the api key

now get your channel ID and start coding

Here is the code

<!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="subscriberCount"></div>

    YouTube Video Views
    <div id="viewCount"></div>

    YouTube Video Count
    <div id="videoCount"></div>

    <script>

    
    const APIKey = 'Your API Key here';
    const Userid = 'Your Channel ID here';
    const subscriberCount= document.getElementById('subscriberCount');
    const viewCount = document.getElementById('viewCount');
    const videoCount = document.getElementById('videoCount');

   

    let getdata = () => {

        fetch(`https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${Userid}&key=${APIKey}`)
        .then(response => {
            return response.json()
        })
        .then(data => {
            console.log(data);
            subscriberCount.innerHTML = data["items"][0].statistics.subscriberCount;
            viewCount.innerHTML = data["items"][0].statistics.viewCount;
            videoCount.innerHTML = data["items"][0].statistics.videoCount;
            
        })

    }

   getdata();
    </script>
</body>
</html>

Download Source Code :

if you’re having any doubts about creating the API key from Google developer console or integrating the codes,

don’t worry I already made add detailed video about implementing the YouTube API with JavaScript and HTML.

so you can find all the informations and all the details in the video.

if you are interested to learn more about web development you can let me know in the comments and please suggest some topic to write or create videos.

Check out my other javascript tutorials here