UnexpectedWeb
Home About Contact Tools
Connect

Popular Technology Blog where you'll find some interesting things around the web, that you never knew existed.

link Link copied
Home code Create own Instagram Downloader with JavaScript & HTML

Create own Instagram Downloader with JavaScript & HTML

By
April 02, 2020
3 minuteRead
Add Comment
Share on: link Link copied
Build an Instagram Downloader like DonwloadGram with HTML and JavaScript (only with JavaScript, without any libraries or plugin).

If you are thinking that it is very difficult to create a web-app or website that allows you to download photos, videos and IGTV from Instagram.

Then you're probably wrong because If you have a basic knowledge of HTML and JavaScript, you can quickly understand how the downloader can work. And how to build a HTML and JavaScript based applications that would allow users to download instagram video or photo to mobile/PC.

Websites like DonwloadGram, instadownloader, instasaveonline offer to save photos locally on your computer or mobile.Websites are good, but you may have problems with annoying ads on websites. instavideosdownloader.com is the best option right now.

Use our Instagram Downloader to save photos and videos with one click. (completely Ads-Free)

Instagram Downloader

Copy image or video link from Instagram and put it on the field given on the top.














How Instagram Downloader Works

  1. Copy instagram video or photo’s link from the app or website. (Tap 3-dots above the post and then "Copy Link" ) 
  2. Get HTML source code of Instagram link through Javascript.
  3. If you analyze the HTML source code, you will find that the actual link to the Instagram photo or video is stored in the meta tag with "og: video" or "og: image".
  4. And finally extract this link via JavaScript and give it to the user.

How to Download Instagram Photos & Videos using  Javascript


STEP 1: Use XMLHttpRequest (XHR) objects to get HTML source code from a instagram URL

<!DOCTYPE html>
<html>
<body>  
  <script>
     var xmlhttp = new XMLHttpRequest();
     var url = "https://www.instagram.com/p/B-Rl4iKp4HK/";
     xmlhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             var htmlSource = this.responseText;
             document.getElementById("id01").value = htmlSource;
         }
     };
     xmlhttp.open("GET", url, true);
     xmlhttp.send();
  </script>
  <textarea id='id01' />
</body>
</html>


STEP 2: Fetch the actual url of instagram media by using  split() method.

var xmlhttp = new XMLHttpRequest();
var url = "https://www.instagram.com/p/B-Rl4iKp4HK/";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var htmlSource = this.responseText;

        if (htmlSource.indexOf('property="og:video"') > -1) {
            var VidLink = htmlSource.split('property="og:video"')[1].split('"')[1];

        } else if (htmlSource.indexOf('property="og:image"') > -1) {
            var ImgLink = htmlSource.split('property="og:image"')[1].split('"')[1];
        }

        document.getElementById("id01").innerHTML = VidLink + '</br></br>' + ImgLink;

    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();


 InstagramDownloader.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Instagram Downloader</title>
</head>
<style>
.postURL:focus {
border: 2px solid #6f6f6f!important;
}
.postURL{
background: #fafafa;
border: 2px solid #dce4ec;
font-size: 16px;
line-height: 18px;
margin-top: 10px;
overflow: hidden;
outline: none;
padding: 14px 27px;
text-overflow: ellipsis;
width: calc(100% - 60px);
display: block;
border-width: 2px;
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
box-shadow: none;
color: #2c3e50;
}
.instasearch{
background-color: #2c3e50;
height: 50px;
font-size: 20px;
border: none;
margin: 10px auto;
width: 100%;
color: #eee;
border-radius: 5px;
cursor: pointer;
}
.card{
background-color: #fafafa;
border: 1px solid rgba(var(--b6a,219,219,219),1);
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
max-width: 400px;
padding: 6px;
margin: auto;
}
.videoDownload{
background-color: #3F51B5;
font-size: 18px;
color: #eee!important;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<div>
<input id='postURL' class="postURL" placeholder="Paste link here..." type="text" value="" />
<div id="msgBox" style='padding: 4px; color: #f44336eb;'></div>
<button class="instasearch" onclick="submit()">DOWNLOAD</button>
</div>
<section>
<div id="result"></div>
<p> Copy image or video link from Instagram and put it on the field given on the top. </p>
</section>
<script>
function submit()
{
var msgBox = document.getElementById("msgBox");
var result = document.getElementById("result");
var url = document.getElementById("postURL").value;
var validateURL ='none';
var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(expression);
if (url) {
if (url.match(regex) ) {
msgBox.innerHTML = "wait...";
getMedia(url);
} else {
msgBox.innerHTML = "Enter a valid image or video link.";
}
} else {
msgBox.innerHTML = "Enter Instagram image or video link.";
}
}
function getMedia(url)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var htmlSource = this.responseText;
if (htmlSource.indexOf('property="og:video"') > -1) {
var VidLink = htmlSource.split('property="og:video"')[1].split('"')[1];
var videoDiv = '<div class="card"><video style="width: 100%; height: auto;" controls> <source src="'+VidLink +'" type="video/mp4"> Your browser does not support HTML5 video.</video><a class="videoDownload" rel="nofollow" href="'+VidLink +'&amp;dl=1" >Download</a></div>';
document.getElementById("result").innerHTML = videoDiv ;
document.getElementById("msgBox").innerHTML = '';
} else if (htmlSource.indexOf('property="og:image"') > -1) {
var ImgLink = htmlSource.split('property="og:image"')[1].split('"')[1];
var videoDiv = '<div class="card"><img src="'+ImgLink +'" style="width: 100%; height: auto;"> <a class="videoDownload" rel="nofollow" href="'+ImgLink +'&amp;dl=1" >Download</a></div>';
document.getElementById("result").innerHTML = videoDiv ;
document.getElementById("msgBox").innerHTML = '';
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</body>
</html>
view raw InstagramDownloader.html hosted with ❤ by GitHub

Method 2: Magical URL of instagram

With the above method we can download photos, videos and IGTV but in case of photo album it will only be able to download the first image of that album.

So if you want to build an advanced Instagram downloader that provides more details of an Instagram page or post (feed), you can do it with the magical URL of Instagram.

Add "? __ a = 1" just after the Instagram link, now this URL will return all the details of that page in JSON format. You can get almost all the information of instagram page like profile name, profile photos, media, caption, comments and other details.

Instagram Page Magical URL :

Instagram Post (Feed) Magical URL :

# Use Firefox, because it has a default JSON viewer.


 AdvancedInstagramDownloader.html
Live Demo - bit.ly/save-insta
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Instagram Downloader</title>
<style>
.postURL:focus {
border: 2px solid #6f6f6f!important;
}
.postURL{
background: #fafafa;
border: 2px solid #dce4ec;
font-size: 16px;
line-height: 18px;
margin-top: 10px;
overflow: hidden;
outline: none;
padding: 14px 27px;
text-overflow: ellipsis;
width: calc(100% - 60px);
display: block;
border-width: 2px;
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
box-shadow: none;
color: #2c3e50;
}
.instasearch{
background-color: #2c3e50;
height: 50px;
font-size: 20px;
border: none;
margin: 10px auto;
width: 100%;
color: #eee;
border-radius: 5px;
cursor: pointer;
}
.card{
background-color: #fafafa;
border: 1px solid rgba(var(--b6a,219,219,219),1);
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
max-width: 400px;
padding: 6px;
margin: 6px auto;
}
.videoDownload{
background-color: #3F51B5;
font-size: 18px;
color: #eee!important;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<div>
<img border="0" data-original-height="493" data-original-width="1600" src="https://4.bp.blogspot.com/-oa2vr0oCDhM/XodPVG-jaSI/AAAAAAAAGBk/a9cBzv8CbIU-Sd1NzQawbcsH-zBAMWcyACLcBGAsYHQ/s920/512x512bb.jpg" width="100%" />
<input id='postURL' class="postURL" placeholder="Paste link here..." type="text" value="" />
<div id="msgBox" style='padding: 4px; color: #f44336eb;'></div>
<button class="instasearch" onclick="submit()">DOWNLOAD</button>
</div>
<section>
<div id="mediaType" style='padding: 4px;font-size: 16px; color: #E91E63;'></div>
<div id="result"></div>
<p> Copy image or video link from Instagram and put it on the field given on the top. </p>
</section>
<script>
function submit()
{
var msgBox = document.getElementById("msgBox");
var result = document.getElementById("result");
var url = document.getElementById("postURL").value;
var validateURL ='none';
var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(expression);
if (url) {
if (url.match(regex) ) {
msgBox.innerHTML = "wait...";
var nURL = url.split('?')[0] +'?__a=1';
fetchURL(nURL);
} else {
msgBox.innerHTML = "Enter a valid image or video link.";
}
} else {
msgBox.innerHTML = "Enter Instagram image or video link.";
}
}
function fetchURL(url)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var getJSON= JSON.parse(this.responseText);
if (getJSON.graphql.shortcode_media) {
getMedia(getJSON);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function getMedia(getJSON)
{
document.getElementById("result").innerHTML = '';
if (getJSON.graphql.shortcode_media.__typename == "GraphSidecar") {
document.getElementById("mediaType").innerHTML = "Instagram Album";
var albumJSON = getJSON.graphql.shortcode_media.edge_sidecar_to_children.edges;
for (var i = 0; i < albumJSON.length; i++) {
if (albumJSON[i].node.__typename == "GraphImage") {
var albumLink = albumJSON[i].node.display_url;
updateResult("Image", albumLink);
} else if (albumJSON[i].node.__typename == "GraphVideo") {
var albumLink = albumJSON[i].node.video_url;
updateResult("Video", albumLink);
}
}
} else if (getJSON.graphql.shortcode_media.__typename == "GraphImage") {
var imageLink = getJSON.graphql.shortcode_media.display_url;
document.getElementById("mediaType").innerHTML = "Instagram Image";
updateResult("Image", imageLink);
} else if (getJSON.graphql.shortcode_media.__typename == "GraphVideo") {
document.getElementById("mediaType").innerHTML = "Instagram Video";
var videoLink = getJSON.graphql.shortcode_media.video_url;
updateResult("Video", videoLink);
} else {
document.getElementById("mediaType").innerHTML = "Error: Not found Video / Image / Album.";
}
loadCaption(getJSON.graphql.shortcode_media.edge_media_to_caption.edges);
}
function updateResult(type, url)
{
if (type=='Video') {
var elem = '<div class="card"><video style="width: 100%; height: auto;" controls> <source src="'+ url +'" type="video/mp4"> Your browser does not support HTML5 video.</video><a class="videoDownload" rel="nofollow" href="'+ url +'&amp;dl=1" >Download</a></div>';
} else if (type=='Image') {
var elem = '<div class="card"><img src="'+ url +'" style="width: 100%; height: auto;"> <a class="videoDownload" rel="nofollow" href="'+ url +'&amp;dl=1" >Download</a></div>';
} else {
var elem = '<div class="card">Sorry, Something went wrong.</div>';
}
document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + elem ;
document.getElementById("msgBox").innerHTML = '';
document.getElementById("postURL").value= '';
}
function loadCaption(captionJSON)
{
for (var i = 0; i < captionJSON.length; i++) {
var captionText = captionJSON[i].node.text;
document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + '<div class="card">'+ captionText +'</div>'; ;
}
}
</script>
</body>
</html>
view raw AdvancedInstagramDownloader.html hosted with ❤ by GitHub


Get all posts of instagram :
https://instagram.com/graphql/query/?query_id=17888483320059182&variables={"id":"[userid]","first":20,"after":null}

Source:
https://stackoverflow.com/questions/45787021/how-to-use-instagram-graphql
https://github.com/MohanSha/InstagramResearch
Tags :
Subscribe to: Post Comments ( Atom )

Leave a Comment

2 comments:

  1. Ozkan5 December 2021 at 06:53

    It doesnt work for me, is there a problem with the code or.. ?

    ReplyDelete
    Replies
    1. Kanak18 January 2022 at 03:59

      Instagram blocked all javascript downloaders

      Delete

Search

Looking for something? Search here!
S
Powered by Blogger.

Created By Themexpose · Powered by Blogger
All rights reserved