Build Youtube Ultimate SEO Tool Using Youtube Data API V3

Build Youtube Ultimate SEO Tool Using Youtube Data API V3

Welcome folks today in this blog post we will be building the ultimate YouTube SEO tool using the YouTube data API version 3 all the source code of this application will be provided in the description show first of all I will be telling you the short demo of this application how to use this application the practical video is there inside below

Youtube Ultimate SEO Tool Link:

 

https://codingshiksha.com/apps/youtubeInfo/

 

Practical Video

 

 

Screenshots

 

 

Now we will build the index.html file for building the front end of the application so for making this application I will be using the jQuery library and also I will be using some bootstrap in all to style this app so just copies is HTML code that you can see below just copy to clipboard and make a new index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>Youtube Video Title Description and Tags Generator Tool Online - Coding Shiksha</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="container">
    
        <br>
      <h1 class="text-center">Youtube Video Info</h1>
      <br /><br />
      <form id="myForm">
        <div class="form-group">
          <input
            class="form-control"
            type="text"
            name=""
            id="url"
            required
            placeholder="Youtube URL"
          />
        </div>
        <div class="form-group">
          <button class="btn btn-danger btn-block">
            Generate Info
          </button>
        </div>
      </form>
      <div id="result">

      </div>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
  <script src="script.js"></script>
</html>

 

See also  Javascript Project to Get Mouse X & Y Coordinates Position of Clicked Element in Browser Full Project For Beginners

Now we will write the actual JavaScript code which will be required for building out the logic for this application show first of all we are making request to the YouTube data API version 3 and then we are getting this this information which is the YouTube thumbnail the YouTube title of the video description of the video and the tags for the video and then we are passing this information that are coming from the API and then displays information inside the application of all the JavaScript code is there in the description so just copy this clipboard and make a new file script.js and copy the code.

 

$(document).ready(function () {
  $("#myForm").submit(function (e) {
    e.preventDefault();

    var url = $("#url").val();

    var apiKey = "AIzaSyAuoPbCRVQIafk4G7VO0o5ge05qNqpvhvE";

    var videoId = getVideoId(url);

    var apiUrl =
      "https://www.googleapis.com/youtube/v3/videos?key=" +
      apiKey +
      "&fields=items(snippet(title,description,tags,thumbnails))&part=snippet&id=" +
      videoId;

    generateInfo(apiUrl);
  });

  function getVideoId(url) {
    return url.split("v=")[1];
  }

  function generateInfo(apiUrl) {
    $.get(apiUrl, function (data) {
      console.log(data);

      $("#result").empty();

      $("#url").val("");

      var title = data.items[0].snippet.title;

      var description = unescape(data.items[0].snippet.description);

      var tags = data.items[0].snippet.tags;

      var thumbnail = data.items[0].snippet.thumbnails.maxres.url;

      var tagsResult = "";

      tags.forEach((tag) => {
        tagsResult += tag + ",";
      });

      $("#result").append(`

            <h3>Thumbnail:</h3>

            <img id="img" src="${thumbnail}" class="img-thumbnail" />

            <div class="form-group">

            <label for="title">Title:</label>
            
            <input type="text" class="form-control" disabled="true" value="${title}"/>

            </div>


            <div class="form-group">

            <label for="description">Description:</label>
            
            <textarea cols="12" rows="9" class="form-control" disabled="true">${description}</textarea>

            </div>


            <div class="form-group">

            <label for="tags">Tags:</label>
            
            <textarea cols="12" rows="5" class="form-control" disabled="true">${tagsResult}</textarea>

            </div>
            
            `);
    });
  }
});

 

Leave a Reply