Question

我有一个显示我的Instagram提要的网站。以前我在用 Instagram遵循API。用户/自我/媒体/最近

此API使用的访问令牌是我生成的，并且作为变量保存在我的代码中，并且没有对其进行长时间更改（2-3年）。现在，不建议使用此API时，Instagram建议使用“基本显示API”，我们需要为其创建一个访问令牌，该令牌将在1小时或60天内失效。它还说只能使用一次。而且我有兴趣显示我的Instagram提要，而我不希望显示已登录我的网站的用户的提要。是否有一个API不需要对令牌进行持续身份验证并且可以用于检索Instagram feed

Answer 1

不幸的是，Instagram使得获取用户媒体变得更加困难。所有公用方法都不再每次都起作用。

我的建议是，当有人访问您的网站时，您可以使用旧令牌生成新令牌并将其存储在下一次访问中。

来源：https://developers.facebook.com/docs/instagram-basic-display-api/reference/refresh_access_token

Answer 2

您可以通过正则表达式解析Instagram页面并获取照片。使用此library，您最多可以拍摄12张照片；不幸的是，您将无法加载更多内容。

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

如何在我的网站上显示我的Instagram feed？

2 个答案: