invitation india
UnexpectedWeb
Connect

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

link Link copied

Create own Instagram Downloader with JavaScript & HTML

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


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

2 comments:

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

    ReplyDelete
    Replies
    1. Instagram blocked all javascript downloaders

      Delete

Powered by Blogger.