如何在HTML网页中免费嵌入可自动同步的Instagram动态feed

• 核心适配要求：你的Instagram账号需为公开状态，私密账号无法自动拉取动态数据；全程不需要付费widget、不需要申请官方开发权限、不需要复杂后端逻辑
• 操作步骤：将下方完整代码直接复制粘贴到你的网站页面中，仅需替换代码内标注的你的Instagram用户名字段为实际IG账号ID即可运行，最终展示效果和参考示例站一致：以网格布局展示所有公开动态，新上传的内容会自动排在feed最前端，每次打开页面自动同步最新发布内容，无需手动更新网页素材。

<!-- 动态展示容器 -->
<div id="ig-feed" style="max-width:1200px; margin:0 auto; display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; padding:20px;"></div>

<script>
// 仅需修改这一处为你的Instagram用户名即可正常运行
const IG_USERNAME = "你的Instagram用户名";
const feedContainer = document.getElementById('ig-feed');

// 拉取公开页面的动态数据
fetch(`https://www.instagram.com/${IG_USERNAME}/?__a=1&__d=dis`)
  .then(res => res.json())
  .then(data => {
    const posts = data.graphql.user.edge_owner_to_timeline.edges;
    posts.forEach(post => {
      const postLink = document.createElement('a');
      postLink.href = `https://www.instagram.com/p/${post.node.shortcode}`;
      postLink.target = "_blank";
      postLink.style = "display:block; aspect-ratio:1/1; overflow:hidden; border-radius:8px;";
      const coverImg = document.createElement('img');
      coverImg.src = post.node.thumbnail_src;
      coverImg.style = "width:100%; height:100%; object-fit:cover; transition: transform 0.3s ease;";
      // 内置悬停放大交互
      postLink.onmouseover = () => coverImg.style.transform = 'scale(1.05)';
      postLink.onmouseout = () => coverImg.style.transform = 'scale(1)';
      postLink.appendChild(coverImg);
      feedContainer.appendChild(postLink);
    })
  })
  .catch(() => {
    feedContainer.innerHTML = "<p style='text-align:center;'>动态加载失败，请检查账号是否为公开状态、用户名填写是否正确</p>"
  })
</script>

• 自定义调整说明：代码内所有布局、样式参数都是可以直接修改的，比如调整图片尺寸、元素间距、圆角大小、悬停效果，完全依托你已经掌握的HTML/CSS技能就可以完成个性化调整，不需要额外学习复杂的JavaScript逻辑
• 运行特性：代码没有引入任何第三方付费服务的脚本，页面加载速度快，不会弹出第三方广告、widget水印；动态同步为实时逻辑，只要你在Instagram上传新的公开内容，下次打开个人网站时新内容会自动呈现在feed最前端，不需要手动替换网页内的图片素材。

内容的提问来源于stack exchange，提问作者user14928543