{"id":46,"date":"2020-03-03T19:44:29","date_gmt":"2020-03-03T14:14:29","guid":{"rendered":"https:\/\/ganofins.com\/blog\/?p=46"},"modified":"2020-10-02T18:07:34","modified_gmt":"2020-10-02T12:37:34","slug":"creating-youtube-live-subscriber-count-website","status":"publish","type":"post","link":"https:\/\/ganofins.com\/blog\/creating-youtube-live-subscriber-count-website\/","title":{"rendered":"How to create a YouTube Live Subscriber Count\u00a0Website using YouTube API"},"content":{"rendered":"\n

Hey Guys,Today I will tell you how you can use\u00a0YouTube API<\/strong><\/a>\u00a0to display real-time live subscriber count of any YouTube channel. To display the real-time subscribe count of a youtube channel we need to use this\u00a0API<\/a><\/strong> by YouTube.<\/p>

  1. Open Google Developer Console<\/strong>

    Open\u00a0Google Developer Console<\/a><\/strong> and register for Google account, if you don\u2019t have a one. Oh, What I am saying you definitely have a Google account \ud83d\ude42Anyways, then create a new project and give it a name whatever you like.\"GoogleYou will see a similar page like above.On the left side you can see a sidebar menu, click on Library menu. That 2nd menu option as like you can see above image.<\/p> <\/li>

  2. Enable YouTube Data API v3<\/strong>

    Now here search for YouTube Data API through the Search bar. The one, at the top of the list just click on it.\"YouTubeNow click on that blue Enable button. Then after enabling the YouTube Data API from the library.<\/p> <\/li>

  3. Create Credentials<\/strong>

    Now it\u2019s time to create the credentials for the your project. By that I mean to create API key. Using API we will able to get the exact the subscriber count of any YouTube channel. So, for that click on the Credential option (3rd option) on the left sidebar menu.After opening the credential page, click on that blue Create Credential button and that will show you a list of options.Then click on Create API Key option.\"GoogleIt will create a API key for your project.<\/p> <\/li>

  4. Time to Code \u2665\ufe0f<\/strong>

    Create a simple HTML text file with a input text field and button in it. Like –HTML File (index.html) :-<\/strong>

    \n<h1 class=\"site_heading\">Live Sub Counter<\/h1>\n<form class=\"form-inline\">\n    <input type=\"text\" id=\"channel_id\" placeholder=\"Channel ID (UCC2-EIXX2LSYInLPSR3kxPQ)\">\n    <input type=\"button\" onclick=\"result(document.getElementById('channel_id').value)\" value=\"Count\">\n<\/form>\n<div class=\"main_content\">\n    <span id=\"channel_name\"><\/span><\/br>\n    <span id=\"sub_count\"><\/span>\n<\/div>\n<script>\nfunction result(channel_id)\n{\n\tif (channel_id === \"\")\n\t{\n\t\treturn alert(\"Please enter a Channel ID\");\n\t}\n\tdocument.getElementById(\"channel_id\").value = \"\";\n\t\n\t\/\/for the request\n\trequest_data(channel_id);\n}\n\nfunction request_data(channel_id)\n{\n\tvar xhttp = new XMLHttpRequest();\n\txhttp.onreadystatechange = function()\n\t{\n\t\tif (this.readyState == 4 && this.status == 200)\n\t\t{\n\t\t\tvar output = this.responseText;\n\t\t\toutput = JSON.parse(output);\n\t\t\tdocument.getElementById(\"channel_name\").innerHTML = output.items[0].snippet[\"title\"];\n\t\t\tdocument.getElementById(\"sub_count\").style.display = \"inline\";\n\t\t\tif(output.items[0].statistics[\"hiddenSubscriberCount\"] === true)\n\t\t\t{\n\t\t\t\tconsole.log(\"Subscriber count is hidden by the channel\");\n\t\t\t   \treturn document.getElementById(\"sub_count\").innerHTML = \"N\/A\";\n\t\t\t}\n\t\t\tdocument.getElementById(\"sub_count\").innerHTML = output.items[0].statistics[\"subscriberCount\"];\n\t\t}\n\t\telse if(this.readyState == 4)\n\t\t{\n\t\t\treturn console.log(JSON.parse(this.responseText)[\"error\"][\"message\"]);\n\t\t}\n\t};\n\txhttp.open(\"GET\", \"https:\/\/www.googleapis.com\/youtube\/v3\/channels?part=snippet,statistics&id=\"+channel_id+\"&key=AIzaSyDxF-lYhQOFbcA1qd22DMbmgoVRFzAE3hQ\", true);\n\txhttp.send();\n\tsetTimeout(request_data, 2500);\n}\n<\/script>\n<\/code><\/pre>CSS File (style.css) :-<\/strong>
    body{\n\tbackground-color: #e0d5d5;\n}\n\nh1.site_heading{\n\ttext-align: center;\n\tfont-size: 130px;\n}\n\ndiv.main_content{\n\ttext-align: center;\n}\n\nform{\n\ttext-align: center;\n}\n\ninput[type=text]{\n\tborder-radius: 5px;\n\twidth: 450px;\n\theight: 50px;\n\tpadding: 9px;\n\tborder: 1px solid #ccc;\n\tfont-size: 21px;\n}\n\ninput[type=button]{\n\twidth: 100px;\n\theight: 50px;\n\tfont-size: 20px;\n\tborder-radius: 8px;\n\tbackground-color: #007bff;\n\tcursor: pointer;\n\tmargin: 0px;\n\tcolor: white;\n\tborder: 1.5px solid white;\n}\n\ninput[type=button]:hover{\n\tbackground-color: #0033ff;\n}\n\n#channel_name{\n\tfont-size: 40px;\n\tfont-weight: bold;\n}\n\n#sub_count{\n\tmargin-top: 5px;\n\tdisplay: none;\n\tfont-size: 60px;\n\tbackground-color: black;\n\tcolor: white;\n\tborder-radius: 20px;\n\tpadding: 5px 10px;\n}<\/code><\/pre><\/p> <\/li>
  5. Time to Run the Code \ud83d\ude42<\/strong> 
    After opening the index.html file in your browser, you will see site like below – \"Live<\/p> <\/li>
  6. Worried that anyone can see your Private API Key \ud83d\ude41<\/strong> 
    To not let others use your API key, we will restrict that API’s use to our site only. In order to do that click on the API Key in your Developer Console.\"APIYou will see page like above. Like I selected HTTP referrers in Application restrictions. You can select the type of restrictions, you want to restrict your API based on. Then type the website address, only which can use your API Key. After that click on Save button.<\/p><\/li><\/ol><\/div>\n\n\n\n
    I also a created GitHub respository with all codes – YouTube Live Subscriber Counter Website<\/a><\/em><\/strong><\/p>\n\n\n\n
    I also published a video on YouTube which explains how to create a Live YouTube subscriber count website.<\/p>\n\n\n\n
    \n