显示单个特定的 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}

生成的媒体所需的大小。支持的值为t （缩略图）、m（中）、l（大）。默认为 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

如果你是 lasy 或者想要一次批量更改，我为此编写了一个 jQuery sn-p； 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>