Can Instagram posts be easily retrieved?

Mike Wang

Edit29 Mar 2018 – In the time between when this article was posted and now, Instagram updated this API. The map() example has been updated to reflect this.

 

Edit22 Apr 2018 – It looks like Instagram has entirely removed the endpoint that this retrieval method depended on. To my knowledge, integrating with Instagram’s new GraphQL API is now the only way to retrieve posts.

 

Displaying Instagram posts on your website can be unexpectedly confusing. Most developers’ first thought is to use the Instagram API to pull in content. Unfortunately, Instagram’s API requires clients to use the decidedly complex OAuth 2.0 protocol. Even worse, the API is being deprecated in July 2018 (per this announcement), so any work done with the API now will need to be redone in six months anyway.

Fortunately, if all you want to do is display a few instas from a single user on your site, there’s an easier way.

GET requests to URLs of the form https://www.instagram.com/${username}/?__a=1 will return a JSON object containing the 12 latest posts by the user ${username}. For example, https://www.instagram.com/mikevonwang/?__a=1 returns the following JSON:

screenshot of long JSON objectThis goes on for 9 more kilobytes.

After a quick JSON.parse(), we now have an Object we can comb through to get the data we want. Let’s call this Object data. If we just want a neat little Array of images, we can do a map():

const posts = data.graphql.user.edge_owner_to_timeline_media.edges.map((c) => {
  return ({
    image: c.node.display_url,
    caption: c.node.edge_media_to_caption.edges[0].node.text,
    date: new Date(c.node.taken_at_timestamp * 1000),
    likes: c.node.edge_media_preview_like.count,
    comments: c.node.edge_media_to_comment.count,
  });
});

There! posts now contains 12 Objects, each containing information about an Instagram post:

screenshot of console.log of posts variable

From here, we can create an <img/> element for each post and style them to our heart’s content.

We can also make each image link back to the original post on Instagram. In the original JSON, each image Object also comes with a shortcode property set to a string like 'BYgmA03Abn7'. Add that property to your mapping function, assemble an href like this:

const href = "https://www.instagram.com/p/" + posts[0].shortcode;

wrap each <img/> element inside an <a/>, add the href, and you’re done!

 

Last updated by on .

6 thoughts on "Can Instagram posts be easily retrieved?"

  1. Tom says:

    Hey Mike,

    Thanks for the writeup! Do you see a possibility to also gather the likes and comments and Sum them up for these last 12 posts? I imagine it would be relatively easy but iā€™m no expert šŸ™‚

  2. Mike Wang says:

    Hi Tom,

    That’s definitely possible. The easiest way to do this is with a forEach() loop:

    https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

    Let’s say you already have the `posts` variable like above (just an array of 12 objects, each representing an insta post). Create a variable like `commentCountTotal` and set it to 0. Then, use the forEach() loop to go through each object in `posts` and add the number of comments to `commentCountTotal`. When the forEach() loop is done, `commentCountTotal` will have the total number of comments in those 12 insta posts.

  3. Philipp says:

    Hey,

    I have one question:
    Is it allowed to get the Data on this way?

    Because in the Terms of Use of Instagram stands:
    “You must not access Instagram’s private API by means other than those permitted by Instagram. Use of Instagram’s API is subject to a separate set of terms available here (“API Terms”).”

    Thanks!

  4. Mike Wang says:

    Hi Philipp,

    It should be! This endpoint of Instagram’s API is public: in fact, it’s the same endpoint that your browser uses when you visit instagram.com. There are some common sense items, of course: make sure you only display posts from users you’ve received permission from, don’t overwhelm the API with too many calls, etc.

  5. Attila V. says:

    This now returns a 403… šŸ™ Stupid Facebook (Instagram)!!! Was using it an Ionic app via a HTTP call. Was good while it lasted…

  6. Mike Wang says:

    Hi Attila,

    Unfortunately it looks like you’re right. I wasn’t aware that this endpoint would change so drastically as well. I’ll edit the post to reflect this. My apologies for wasting your time, and good luck with your app!

What Are Your Thoughts?

Your email address will not be published. Required fields are marked *