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

Question

肯定有一种更简单的方法来做这件事，我觉得我要疯了。

我只是有一个网站，我为一家企业创建的，他们希望他们的instagram订阅显示在他们的画廊页面上，而不是静态图像。看过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从来没有一个简单的feed嵌入功能。您可以嵌入单个帖子，但不能嵌入摘要。

有许多解决方法可以解决这个问题，其中大多数都是通过代理服务器绕过Instagram的API访问限制。Instagram在2020年后期更新了他们的API，使得这些解决方案中的大多数(如果不是全部)无法操作。

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

完成这项工作后，我可以告诉你实际的编码方面并不是很难(上面的链接中提供的说明相当全面)，如果你只为一个客户端做这件事，你可以简单地将应用程序留在开发模式(这样你就不必通过应用程序审批过程)，然后简单地添加你的客户端作为“测试用户”。

我不确定将应用程序留在开发模式会有什么影响--它是否会过期等等--但如果你能做到以上所有事情，那么你的主要挑战将是keeping the long-lived access token refreshed，这样它就不会每隔60天就过期一次。