Get YouTube channel videos, statistics and comments

You can get your YouTube channel statistics using YouTube Javascript SDK. You can also get comments of each video by providing its ID.

YouTube Data API allows you to get statistics from your YouTube channel. You can get all videos from your channel and you can get individual video detail. Video detail will contain video title, description, thumbnails, tags, views, likes, dislikes and comments. Comments section will include name of author, thumbnail image of user. Also, the comment he has posted and the time that comment was posted. Google provides an API which uses GET method to send requests and it can be used with Javascript and PHP.

YouTube channel statistics – Javascript SDK

When it comes with Javascript, you can use jQuery AJAX request to get the data. And when it comes to PHP, you can use built-in CURL method to send that request. Today, we will be using Javascript API to first list at-least 50 videos from your YouTube channel. Every video will have a button which when clicked will show the details of that video.

The detail of video includes video title, description, thumbnails, tags, published date, date when last time the video was updated. You can also get comments of individual video. You will get name of person who commented, his profile image, comment text and the date the comment was published.

Goto Google Developers Console and enable YouTube Data API. YouTube Data API is running on version 3 at the time of writing this. After that you need to get your API key which you can get from left menu. There was an option labeled as “Credentials”. You will see a list of all API keys already created and you use any old API key.

Create new API key

You can create a new API too by simply clicking the button at top right corner, it will be labeled as “Create Credentials”. Copy that API, we will need that later. Also goto youtube.com and click on your profile icon on top right and goto “My channel” and you can get your channel ID from URL, copy that too. Download jQuery from here and paste in your project folder. Create a file named “index.php” this will be the only file that we will be using in whole tutorial.

First you need to include jQuery in your file because we will be sending an AJAX request to call Google Api. To get videos you will need API key and your channel ID whose videos needs to be fetched. Replace variables apiKey and channelId with your API key and channel ID respectively. These will be send as parameter in the API along with some other parameters.

Part parameter specifies which fields needs to be fetched, here we wanted each video ID so that we can get it’s further details later and snippet will contain title which will be visible in the list. An ul list is created and all videos are appended in it with a clickable button which when clicked should send the video ID so we can get details of video using that ID.

index.php

<!-- include jquery -->
<script src="js/jquery.js"></script>

<ul id="videos"></ul>

<script>
	var apiKey = "";
	var channelId = "";

	var url = "https://www.googleapis.com/youtube/v3/search?key=" + apiKey + "&channelId=" + channelId + "&part=id,snippet&maxResults=50";

	// call ajax to get the videos
	$.ajax({
		url: url,
		method: "GET",
		success: function (response) {
			console.log(response);
			var html = "";

			for (var a = 0; a < response.items.length; a++) {
				html += "<li>";
					html += "<button onclick='videoSelected(this);' data-id='" + response.items[a].id.videoId + "'>";
						html += response.items[a].snippet.title;
					html += "<button>";
				html += "</li>";
			}

			$("#videos").html(html);
		}
	});
</script>

Now a list will be displayed with 50 videos from your channel with their title inside a button. When you click the video title it will call the function videoSelected and pass the clicked button as a parameter. As we have set an attribute data-id with video ID so we can get the video ID easily and display it’s details by sending another API request.

Get video detail

Now we can get each video ID separately and by sending another API request we can get it’s detail. This time we will be calling videos API from googleapis.com and sending the video ID as a parameter whose details needs to be fetched. We will be creating a separate div to show video detail. We will be displaying title, description, thumbnail, views, likes and dislikes but you can show other details too as per your needs.

Regarding the thumbnail you will have 4 options in quality of thumbnail image (low, normal, high, maximum resolution). Although it depends on the actual video thumbnail quality, if the video does not have maximum resolution quality thumbnail then only 3 fields will be returned.

index.php

<div id="video-detail"></div>

<script>
function videoSelected(self) {
	// get video ID
	var videoId = self.getAttribute("data-id");

	// call ajax to get video detail
	var url = "https://www.googleapis.com/youtube/v3/videos?key=" + apiKey + "&id=" + videoId + "&part=statistics,snippet";

	$.ajax({
		url: url,
		method: "GET",
		success: function (response) {
			console.log(response);
			var html = "";

			// display title
			html += "<p>" + response.items[0].snippet.title + "</p>";

			// description
			html += "<p>" + response.items[0].snippet.description + "</p>";

			// display thumbnail
			html += "<img src='" + response.items[0].snippet.thumbnails.maxres.url + "'>";

			html += "<p>Views: " + response.items[0].statistics.viewCount + ", Likes: " + response.items[0].statistics.likeCount + ", Dislikes: " + response.items[0].statistics.dislikeCount + "</p>";

			$("#video-detail").html(html);

			showComments(videoId);
		}
	});
}
</script>

Get video comments

Displaying comments require only video ID and API key in the parameters. Please keep that in mind that all API calls to googleapis.com requires an API key to be provided. Without that, even if everything else was provided correctly, data will not be returned from API. Here we are displaying name of person who commented along with his profile image and the comment that he has posted.

<ul id="comments"></ul>

<script>
function showComments(videoId) {
	var url = "https://www.googleapis.com/youtube/v3/commentThreads?key=" + apiKey + "&videoId=" + videoId + "&part=snippet&maxResults=50";

	// call ajax to get comments
	$.ajax({
		url: url,
		method: "GET",
		success: function (response) {
			console.log(response);
			var html = "";

			for (var a = 0; a < response.items.length; a++) {
				html += "<li>";
					// show image
					html += "<img src='" + response.items[a].snippet.topLevelComment.snippet.authorProfileImageUrl + "'>";

					html += response.items[a].snippet.topLevelComment.snippet.authorDisplayName;

					// comment text
					html += "<p>" + response.items[a].snippet.topLevelComment.snippet.textDisplay + "</p>";

					html += "<br>";
				html += "</li>";
			}

			$("#comments").html(html);
		}
	});
}
</script>

Conclusion – YouTube channel statistics

Since this post is about using YouTube Data API using Javascript but you can also use it in PHP, Node JS or any other language of your choice. As most of the programming languages today supports Http requests. The URL of API will remain same except the API key and channel ID (of course). If you are using Node JS then you can Express JS, if you are using PHP then you can use Curl module and so goes for other languages too.

[wpdm_package id=’172′]