Create own Instagram Downloader with JavaScript & HTML
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)
InstagramDownloader.html
# Use Firefox, because it has a default JSON viewer.
AdvancedInstagramDownloader.html
Live Demo - bit.ly/save-insta
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
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
- 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
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
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
It doesnt work for me, is there a problem with the code or.. ?
ReplyDeleteInstagram blocked all javascript downloaders
Delete