在我自己的网站上显示我自己的 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 基本显示 API 。

据我所知，Instagram 从来没有简单的提要嵌入功能。 您可以嵌入单个帖子，但不能嵌入提要。

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

为了为您的客户创建 Instagram 提要，您需要设置一个应用程序。 这将要求您有某种方法来对 API 进行服务器端调用。

完成此操作后，我可以告诉您事情的实际编码方面并不是很困难（上面链接中提供的说明非常全面），如果您只为一个客户端执行此操作，则可能只需离开应用程序即可在开发模式下（因此您不必通过应用程序批准过程），只需将您的客户添加为“测试用户” 。

我不确定将应用程序保留在开发模式会产生什么影响 - 它是否过期等 - 但是如果您可以完成上述所有操作，那么您的主要挑战将是保持长期访问令牌的刷新，因此它不会每 60 天到期。