Thursday 5 November 2020

Get Instagram Profile Picture Without Instagarm API

You want to get Instagram profile picture of any public or private account without its API? You're at the right place.

Profile images are considered as public irrespective of your account status(ie. account is public or private).

Sometimes, we need to import the profile from other social networks if you have a app or a website/web-app. In these case, asking user to login with their accounts can led to trust issue.

So now we can import profile images without need to have API key or user account permission, its good for us.

Ill be sharing you how to get profile image with JavaScript and JQuery. For other languages, you can follow general method given at the end of this page.

Instagram Request Endpoint

The usual structure for any Instagram profile is - https://Instagram.com/{username}.

Now the above request will return in text/html. If we want to return in JSON (to be easier to work upon), you need to add ?a=1 parameter at the end of URL. For example - https://Instagram.com/{username}/?__a=1.

Now this will return the JSON containing data such as Instagram username, name, bio, profile picture URL, number of posts, followers and following count, account verified or not (and any other public information). The plus point of this endpoint is it doesn't require API key.

Get Instagram Profile Using JavaScript

To get profile picture URL, first we need to send AJAX request to endpoint stated above, and then look for profile_pic_url and profile_pic_url_hd. This 2 parameters can be found  in user object.

profile_pic_url usually have 150x150 px image, whereas, in profile_pic_url_hd you will see 320x320 px image.

In JavaScript, we can use XMLHttpRequest() to make AJAX request and then using JSON.parse() we can get both the image URL's.

See the Example Below -

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var a = JSON.parse(this.responseText);
var img1 = a.graphql.user.profile_pic_url;
var img2 = a.graphql.user.profile_pic_url_hd;
    }
else{//ERROR}
  };
  xhttp.open("GET", "https://www.instagram.com/instagram/?__a=1", true);
  xhttp.send();
}

In above code, img1 and img2 are the variables which contain image src.

Same approach in Other Languages

You can send the same request in Jquery using ajax() method and get the data. Similarly, in case of any other languages, you can use their respective AJAX sending mechanisms.(For eg. in Android you can use OkHttp)

Demo

I've made a demo here to show how this work. Just enter the username in the box and give 2 sec for request to complete. Then you'll see both the photos as shown in the image.

Instagram Profile Picture Viewer

That's it for now and if you have any problem comment down below :)

0 Please Share a Your Opinion.:

Comment something useful and creative :)