Skip to main content

Instagram Post Downloader using JQuery and Ajax

 


Introduction

  • In this project, we will learn to get the data from Instagram using the link given by the user.
  • First the given link is modified and passed to the instance of XMLHttpRequest.
  • Using instance of XMLHttpRequest, we will get JSON data and Access the required data such as image url, video url and create image and video tag respectively.
  • Now you can download image as well as video as shown in the preview video.

Pre-Requisite

  • you should know to use JSON data, to access the required data ( object, arrays, string etc ).
  • you should know to use XMLHttpRequest, to send the request, to get the data from the response.
  • basic of JQuery is enough.

Preview


HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="main">
        <h1>Instagram Posts</h1>
        <input id="url" type="text" placeholder="Username"><button id="btn"> >> </button><br><br>
        <hr><br><br>
        <div id="container">
            <h2 id="msg">Post will appear Here</h2>
        </div>
    </div>
</body>
</html>


CSS Code

*
{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

body
{
    background-color: rgba(255, 255, 255, 0.753);
}

#main
{
    text-align: center;
}

#url
{
    width: 200px;
    outline: none;
    border: 2px solid black;
    border-radius: 15px;
    padding: 6px;
}

hr
{
    width: 400px;
    height: 3px;
    background-color: black;
    border: none;
}

button
{
    background-color: rgb(255, 0, 0);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    outline: none;
    margin-left: 10px;
    font-size: small;
}

button:hover
{
    cursor: pointer;
    background-color: rgba(255, 0, 0, 0.692);
}

img,video
{
    border: 2px solid rgb(59, 59, 59);
    border-radius: 10px;
    width: auto;
    height: 500px;
}

#msg
{
    font-style: italic;
    color: rgba(0, 0, 0, 0.753);
}


JavaScript Code

$(document).ready(function () {
    $('#btn').click(() => {
        // Extracting the link ex:- changing link from this /?utm_source=ig_web_copy_link to this /?__a=1
        var link = $('#url').val();
        link = link.split("?");
        var url = link[0] + "?__a=1"

        // Establishing the connection and getting the Data
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "json";
        xhr.onload = () => {
            $('#container').empty();
            getData(xhr);
            $('#msg').hide(); // hiding the message "Post will appear here"
        };
        xhr.send();
    });
});


function getData(xhr) {
    var request = xhr;

    if (request.readyState === 4 && request.status === 200) {
        var JsonData = JSON.parse(JSON.stringify(request.response));  // getting JSON data
        var PostType = JsonData.graphql.shortcode_media.__typename;  // Accessing JSON value

        // GraphSidecar is for multiple post
        // GraphImage is for Images
        // GraphVideo is for Videos
        if (PostType == "GraphSidecar") {
            var links = JsonData.graphql.shortcode_media.edge_sidecar_to_children.edges;  // Accessing JSON values

            for (let i = 0; i < links.length; i++) {
                if (links[i].node.__typename == "GraphImage") {
                    createImage(links[i].node.display_url); // Passing the image url
                }
                else if (links[i].node.__typename == "GraphVideo") {
                    createVideo(links[i].node.video_url); // Passing the video url
                }
            }
        }
        else if (PostType == "GraphImage") {
            createImage(JsonData.graphql.shortcode_media.display_url); // Passing the image url 
        }
        else if (PostType == "GraphVideo") {
            createVideo(JsonData.graphql.shortcode_media.video_url); // Passing the video url
        }
    }
}

function createImage(value) {
    var element = document.getElementById("container");
    var link = value;
    var image = document.createElement('img');
    image.src = link;
    element.appendChild(image);
    element.appendChild(document.createElement("br"));
    element.appendChild(document.createElement("br"));
}

function createVideo(value) {
    var element = document.getElementById("container");
    var link = value;
    var video = document.createElement("video");
    video.src = link;
    video.controls = true;
    element.appendChild(video);
    element.appendChild(document.createElement("br"));
    element.appendChild(document.createElement("br"));
}



Thank you

Comments

  1. AnonymousApril 27, 2022 at 1:43 AM

    Instagram Post Er Using Jquery And Ajax >>>>> Download Now

    >>>>> Download Full

    Instagram Post Er Using Jquery And Ajax >>>>> Download LINK

    >>>>> Download Now

    Instagram Post Er Using Jquery And Ajax >>>>> Download Full

    >>>>> Download LINK pC

    ReplyDelete

Post a Comment