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

Popular posts from this blog

Auto-Image Slider using Javascript

  Introduction Image Slider is a way of displaying multiple images, videos or graphics which is created using javascript. 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 > Auto-Image Slider </ title > < link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.15.1/css/all.css" > < link rel = "stylesheet" href = "ImageSlider.css" > < script src = "ImageSlider.js" > </ script > </ head > < body > < div class = "container" > < div class = "slides" > < div class = "slide" > < img src = "https://cdn.pixabay.com/photo/2020/11/20/01/10/glacier-5760277_960_72...
Post a Comment
Read more

Register form through OTP Verification using Firebase (Android Studio).

Android is an operating system that was developed by Google which is designed for touchscreen mobile devices such as smartphone and tablets. Description In this project we will build an app using A ndroid Studio. T his app will take your username and phone number.By this phone number you will receive an OTP and after entering OTP you will be able to register your phone number with the Firebase. Android Studio it is a integrated development environment (IDE) for  Android operating system, built on JetBrains' IntelliJ IDEA software and designed specifically for Android development.It is available for download on Windows, macOS and Linux based operating systems. Firebase Firebase Authentication is a service that can authenticate users using only client-side code. It supports social login providers Facebook, GitHub, Twitter and Google as well as other service providers like Google Play Games, Apple, Yahoo, and Microsoft. Additionally, it includes a user manag...
1 comment
Read more