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

user_11492048 · Answer

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

user_13374604 · Answer

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
    // 
    //   
    //     
    //   
    // 

    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;
}

How to display my Instagram feed on my website?

2 Answers