Hello reader,
Today, I’ll explain how to create the YouTube API to show the live & live subscriber count of any YouTube channel. We must use that YouTube API to display the subscriber count in real time for a YouTube channel.
Table of contents
1. Create a project.
Open the Google developer tool and start a new project.
Click my project and create a new project
On the left side, you can see a sidebar menu, click on the Library menu. That 2nd menu option is what you can see above image.
2. Enable YouTube Data API v3
Now here search for YouTube Data API through the Search bar. The one, at the top of the list, just click on it.
Now click on that blue Enable button. Then after enabling the YouTube Data API from the library.
3. Create Credentials
It is now time to create the project credentials. That is, I want to generate an API key. We will be able to obtain the actual subscriber count of any YouTube channel using API. So, in the left sidebar menu, select the Credential option (3rd choice).
After you’ve opened the credential page, click the blue Create Credential button to see a selection of possibilities.
Then click on the Create API Key option.
4. Time to Create the Code 🙂
Download the code file from GitHub. ►►► Link ◄◄◄
After opening the script.js file in your browser, you will see a site like below
//second part for test
getsubs();
async function getsubs(){
// Use You google cloud console Yt api after "&key="
const channelIdCarry = 'UCm1_-vkonHv3nQuvux5xtDw'
const urlCarry = `https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelIdCarry}&key=ApiKey`;
const responseCarry =await fetch(urlCarry);
const dataCarry = await responseCarry.json();
const subscriberCountCarry = dataCarry.items[0].statistics.subscriberCount
console.log(subscriberCountCarry);
const rootCarry = document.getElementById('carry');
// You can change d2020d for place you need to display sub count
const carry = document.createElement('d2020d');
const nodeCarry = document.createTextNode(`Subscriber : ${subscriberCountCarry}`);
carry.append(nodeCarry);
rootCarry.append(carry);
}Replace your API Key in ApiKey in the code and channel ID
`https://www.googleapis.com/youtube/v3/channels?part=statistics&id=${channelIdCarry}&key=ApiKey`;const channelIdCarry = 'UCm1_-vkonHv3nQuvux5xtDw'5. Hide your Private API Key from others 🙁
To not let others use your API key, we will restrict that API’s use to our site to do that click on the API Key in your Developer Console.
You will see a page similar to the one seen above.
As an example, in Application limits, I picked HTTP referrers. You can specify the sort of limits you wish to apply to your API. Then enter the website address, which is the only one that can use your API Key. After that, press the Save button.
