Display my own instagram feed on my own website

Question

There must be a simpler way to do this, I feel like I am going insane.

I simply have a website I created for a business, and they would like their instagram feed to display on their gallery page rather than static images. After looking through the instagram API developer documentation it would seem I'm having to jump through all sorts of hoops to get authenticated, like uploading photos of my passport etc. Or even having users authenticate upon visiting the website.

Is there no way to just authenticate my app through the business' instagram account, and then use the API to display their images?

user_13374604 · Answer

As far as I know, getting an Instagram token is not so easy. There is a way to get photos without using the API.

If you look at the source code of your instagram account page, you will see data and photos there. You just need to make a request to this page and process the result with a regular expression.

For this purpose, I wrote the nanogram.js library, which works exactly as I described above.

import Nanogram from 'nanogram.js';

const instagramParser = new Nanogram();

instagramParser.getMediaByUsername('instagram').then((media) => {
  console.log(media);
});

After receiving the data, you can make a slider or gallery.

// Initialize library
var lib = new Nanogram();

function buildPorfolio() {
  var preloader = document.getElementById("preloader");
  preloader.classList.add("preloader--loading");
  // Get content from https://www.instagram.com/instagram/
  return lib
    .getMediaByUsername("instagram")
    .then(function (response) {
      console.table(response.profile);

      // Get photos
      var photos = response.profile.edge_owner_to_timeline_media.edges;
      var items = [];

      // Create new elements
      // 
      //   
      //     
      //   
      // 

      for (var i = 0; i <= photos.length - 1; i++) {
        var current = photos[i].node;

        var div = document.createElement("div");
        var link = document.createElement("a");
        var img = document.createElement("img");

        var thumbnail = current.thumbnail_resources[4];
        var imgSrc = thumbnail.src;
        var imgWidth = thumbnail.config_width;
        var imgHeight = thumbnail.config_height;
        var imgAlt = current.accessibility_caption;

        var shortcode = current.shortcode;
        var linkHref = "https://www.instagram.com/p/" + shortcode;

        div.classList.add("portfolio__item");

        img.classList.add("portfolio__img");
        img.src = imgSrc;
        img.width = imgWidth;
        img.height = imgHeight;
        img.alt = imgAlt;

        link.classList.add("portfolio__link");
        link.href = linkHref;
        link.target = "_blank";

        link.appendChild(img);
        div.appendChild(link);

        items.push(div);
      }

      // Create container for our portfolio
      var container = document.createElement("div");
      container.id = "portfolio";
      container.classList.add("portfolio");

      // Append all photos to our container
      for (var j = 0; j <= items.length - 1; j++) {
        container.appendChild(items[j]);
      }

      // Append our container to body
      document.body.appendChild(container);

      // Add masonry layout just for example, you probably don't need it
      new Masonry(container, {
        itemSelector: ".portfolio__item",
        percentPosition: true,
        gutter: 20
      });

      preloader.classList.remove("preloader--loading");
    })
    .catch(function (error) {
      console.log(error);
      preloader.classList.remove("preloader--loading");
    });
}

buildPorfolio();

body {
  margin: 0;
  padding: 20px;
  background-color: rgb(212, 201, 201);
}

.portfolio__link {
  display: block;
  width: 100%;
  height: 100%;
}

.portfolio__img {
  display: block;
  width: inherit;
  height: inherit;
  object-fit: cover;
}

.portfolio__item {
  width: 100%;
  max-width: calc((100% / 3) - 25px);
  margin-bottom: 20px;
}

.preloader {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  background-image: url("https://i.gifer.com/ZlXo.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 256px 256px;
}

.preloader--loading {
  display: block;
}

user_1684875 · Answer

Short answer: No :(

You will need to use the Instagram Basic Display API.

As far as I'm aware, there has never been a simple feed embed feature for Instagram. You can embed individual posts, but not feeds.

There have been a number of workarounds to this, most of which work(ed) by circumventing Instagram's API access restrictions via proxy servers. Instagram updated their API in late 2020, rendering most (if not all) of these workarounds inoperable.

In order to create an Instagram feed for your client, you will need to set up an app. This will require that you have some way to make a server-side call to the API.

Having done this I can tell you the actual coding side of things isn't very difficult (the instructions provided in the link above are pretty comprehensive) and if you're doing this for only one client you might be possible to simply leave the app in development mode (so you don't have to have to go through the app approval process) and simply add your client as a "test user".

I'm not sure what the implications are of leaving an app in development mode - whether it expires, etc - but if you can do all the above then your primary challenge will be keeping the long-lived access token refreshed so it doesn't expire every 60 days.

Display my own instagram feed on my own website

2 Answers

Short answer: No :(