Question

必须有一种更简单的方法来执行此操作，我感觉自己发疯了。

我只是有一个为企业创建的网站，他们希望instagram feed显示在图库页面上，而不是静态图片上。在查看了instagram API开发人员文档后，似乎我不得不跳过各种障碍以进行身份验证，例如上载我的护照照片等。甚至在访问网站时使用户进行身份验证。

有没有办法仅通过商家的instagram帐户对我的应用进行身份验证，然后使用API显示其图像？

Answer 1

据我所知，获得Instagram令牌并不是那么容易。有一种无需使用API即可获取照片的方法。

如果您查看instagram帐户页面的源代码，则将在其中看到数据和照片。您只需要向该页面发出请求并使用正则表达式处理结果即可。

为此，我编写了nanogram.js库，该库的工作与上面所述完全相同。

import Nanogram from 'nanogram.js';

const instagramParser = new Nanogram();

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

接收数据后，您可以制作一个滑块或图库。

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

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

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nanogram.js@1.0.2/dist/nanogram.iife.min.js"></script>
<div class="preloader" id="preloader" />

Answer 2

简短回答：否:(

您需要使用 Instagram Basic Display API。

据我所知，Instagram 从未有过简单的 Feed 嵌入功能。您可以嵌入单个帖子，但不能嵌入供稿。

对此有许多变通方法，其中大部分是通过代理服务器绕过 Instagram 的 API 访问限制来工作的。 Instagram 在 2020 年末更新了他们的 API，导致这些变通方法中的大部分（如果不是全部）无法使用。

为了为您的客户创建 Instagram 提要，您需要set up an app。这将要求您有某种方法来对 API 进行服务器端调用。

完成此操作后，我可以告诉您事情的实际编码方面并不是很困难（上面链接中提供的说明非常全面），如果您只为一个客户执行此操作，则可能只需让应用处于开发模式（这样您就不必经过应用审批流程），只需将您的客户添加为“测试用户”。< /p>

我不确定将应用程序保留在开发模式会产生什么影响 - 是否过期等 - 但如果您可以完成上述所有操作，那么您的主要挑战将是 keeping the long-lived access token refreshed 所以它不会每 60 天到期。

在我自己的网站上显示我自己的instagram feed

2 个答案:

简短回答：否:(