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.
DOWNLOAD
How Instagram Downloader Works
Copy instagram video or photo’s link from the app or website. (Tap 3-dots above the post and then "Copy Link" )
Get HTML source code of Instagram link through Javascript.
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".
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 +'&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 +'&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 rawInstagramDownloader.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.
