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

Posted 2023-02-19

【中文标题】如何在我的网站上显示我的 Instagram 提要？

【英文标题】：How to display my Instagram feed on my website?

【发布时间】：2020-11-12 00:27:02

【问题描述】：

我有一个显示我的 Instagram 供稿的网站。以前我用 Instagram 关注 API。 用户/自己/媒体/最近

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

【参考方案1】：

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

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

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

【参考方案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="..."    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>

【讨论】：

请在帖子中声明您与链接库的隶属关系，以避免您的答案被标记为垃圾邮件（请参阅How Not to be a Spammer）