必须有一种更简单的方法来做到这一点，我觉得自己快要疯了。
我只是为一家企业创建了一个网站，他们希望他们的instagram订阅源显示在他们的图库页面上，而不是静态图像。在浏览了instagram API开发者文档后，我似乎不得不经历各种困难才能获得认证，比如上传我护照的照片等，甚至让用户在访问网站时进行认证。
难道没有办法通过企业的instagram帐户验证我的应用程序，然后使用API显示他们的图像吗？
据我所知，获得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" />简短回答：否：(
您将需要使用Instagram基本显示API
据我所知，Instagram从来没有一个简单的订阅源嵌入功能。您可以嵌入单独的帖子，但不能嵌入提要。
有很多解决方法，其中大多数都是通过代理服务器规避Instagram的API访问限制来实现的。Instagram在2020年末更新了他们的API，使这些解决方案中的大部分(如果不是全部的话(无法运行。
为了为您的客户创建Instagram订阅源，您需要设置一个应用程序。这将要求您有某种方法对API进行服务器端调用。
完成这项工作后，我可以告诉你，实际的编码方面并不是很困难(上面链接中提供的说明非常全面(，如果你只为一个客户端这样做，你可以简单地将应用程序置于开发模式(这样你就不必经过应用程序审批过程(，然后简单地将你的客户端添加为"测试用户">。
我不确定让应用程序处于开发模式会有什么影响——它是否过期等等——但如果你能做到以上所有这些，那么你的主要挑战将是保持长期访问令牌的刷新，使其不会每60天过期一次。