html - 显示单张特定的 Instagram 照片 - 可能吗？

Question

在此处强调特定照片。

我知道那里的所有 Instagram 插件和 Instagram API，但是我正在尝试找出一种方法来显示来自 Instagram 的单个特定照片。不是通过标签或用户名，而是最好通过 Instagram URL，甚至是带有照片的 ID。

我想要类似这样的东西:(Instagram 照片覆盖了 div 的背景)

<div class="instagram-photo" 
     style="background-image:URL(*instagram_photo_url_here*);
            background-size:cover">
</div>

我很高兴链接到照片以获取照片版权等等。

这可能吗？我已经搜索了几个小时，但什么也没有出现，我一定是忽略了一些东西。

Answer 1

我花了一些时间才得出答案，Instagram 提供了一种直接使用 Media redirect 轻松获取媒体的方法。 ，通过将 /media/?size={size} 添加到任何照片永久链接的末尾

Desired size of the resulting media. Supported values are t (thumbnail), m (medium), l (large). Defaults to m.

例子；

• > https://www.instagram.com/p/8l2vIrhQQ_/media/?size=l
• > https://www.instagram.com/p/7TDiYJBQdf/media/?size=m
• > https://www.instagram.com/p/cn5KZWmJp1/media/?size=t

如果您懒惰或者想一次批量更改，我为此编写了一个 jQuery 片段； <知识库> Demo

这是您尝试的最终 HTML

body {
  padding:10px;
}
.instagram-photo {
  display:block;
  margin-bottom:15px;
  background:#ffffff;
  height:500px;
  border:2px solid #ddd;
}

   <div class="instagram-photo" style="background-image: url(https://instagram.com/p/-FP1PjBQRd/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/8l2vIrhQQ_/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/-XNiICnxXO/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/cn5KZWmJp1/media/?size=l); background-size: cover;"></div>
  <div class="instagram-photo" style="background-image: url(https://instagram.com/p/7TDiYJBQdf/media/?size=l); background-size: cover;"></div>