How to display my Instagram feed on my website?

Question

i have a website that shows my Instagram feed. previously i was using Instagram following API. users/self/media/recent

This API was using access token that i generated once and kept in as a variable in my code without changing it for long time (for 2-3 years). Now when this API is deprecated Instagram is recommending to use 'Basic Display API' for which we need to create a access token which will expire in 1 hour or 60 days. It also says that it can be used only once. And i am interested in showing my Instagram feed I'm not interested in showing feed of the user who is logged-in in my website. Is there a API which will not have to constantly authenticated for token and can be used to retrieve Instagram feed

score 1 · Accepted Answer · answered Jul 22 '20 at 13:41

Unfortunately, Instagram has make it harder to get user media. All public method are not working every time anymore.

My suggestion is when someone visited your website, you can use the old token to generate a new token and store it somewhere for next visit.

source: https://developers.facebook.com/docs/instagram-basic-display-api/reference/refresh_access_token

score 0 · Answer 2 · answered Oct 17 '20 at 20:46

you can parse your Instagram page through regular expression and get photos. Using this library, you can take up to 12 photos; Unfortunately, you won't be able to load more.

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

function buildPorfolio() {
  // Get content from https://www.instagram.com/instagram/
  return lib.getMediaByUsername('instagram').then(function(response) {
    if (console.table) {
      console.table(response.profile);
    }

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

    // Create new elements
    // <div class="portfolio__item">
    //   <a href="..." target="_blank" class="portfolio__link">
    //     <img src="..." alt="..." width="..." height="..." class="portfolio__img">
    //   </a>
    // </div>

    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);
  }).catch(function(error) {
    console.log(error);
  })
}

buildPorfolio()

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

.portfolio {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3,200px);
}

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

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

.portfolio__item {
  width: 200px;
  height: 200px;
}

<script src="https://cdn.jsdelivr.net/npm/nanogram.js@2.0.2/dist/nanogram.iife.js"></script>

Please declare your affiliation to the linked library in the post to avoid your answer being flagged as spam (see [How Not to be a Spammer](https://stackoverflow.com/help/promotion)) — David Buck, Oct 18 '20 at 07:50

How to display my Instagram feed on my website?

2 Answers2

Linked