---
title: "Instagram 嵌入"
description: "服务端渲染的 Instagram 嵌入，零客户端 API 调用。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/instagram-embed"
last_updated: "2026-05-22T14:11:57.061Z"
---

[Instagram](https://instagram.com) 是一个照片和视频分享的社交媒体平台。

Nuxt Scripts 提供了一个 [`<ScriptInstagramEmbed>`](/scripts/instagram-embed) 组件，它在服务器端获取 Instagram 的嵌入 HTML，并通过你的服务器代理所有资源 —— 无需客户端调用 Instagram API。

<script-stats>



</script-stats>

<script-docs :embed="true">



</script-docs>

<callout type="info">

当配置 `NUXT_SCRIPTS_PROXY_SECRET` 时，该脚本的代理端点使用 [HMAC URL 签名](/docs/guides/first-party#proxy-endpoint-security)。有关设置说明，请参阅 [安全指南](/docs/guides/first-party#proxy-endpoint-security)。

</callout>

这将注册所需的服务器 API 路由（`/_scripts/embed/instagram`、`/_scripts/embed/instagram-image` 和 `/_scripts/embed/instagram-asset`），用于处理嵌入 HTML 获取和资源代理。

## [`<ScriptInstagramEmbed>`](/scripts/instagram-embed)

`<ScriptInstagramEmbed>` 组件特性：

- 服务器端获取官方 Instagram 嵌入 HTML
- 重写所有图片和资源 URL，通过你的服务器代理
- 移除 Instagram 的 embed.js 脚本（不需要）
- 缓存响应 10 分钟

### 示例

<code-group>
<instagram-embed-demo label="输出">



</instagram-embed-demo>

```vue [基础用法]
<template>
  <ScriptInstagramEmbed
    post-url="https://www.instagram.com/p/C3Sk6d2MTjI/"
    :captions="true"
  />
</template>
```

```vue [自定义加载/错误状态]
<template>
  <ScriptInstagramEmbed
    post-url="https://www.instagram.com/p/C3Sk6d2MTjI/"
    :captions="true"
  >
    <template #loading>
      <div class="animate-pulse bg-gray-100 rounded-lg p-4 aspect-square max-w-md">
        正在加载 Instagram 帖子...
      </div>
    </template>

    <template #error>
      <div class="bg-red-50 border border-red-200 rounded-lg p-4 max-w-md">
        加载 Instagram 帖子失败
      </div>
    </template>
  </ScriptInstagramEmbed>
</template>
```

```vue [自定义渲染]
<template>
  <ScriptInstagramEmbed post-url="https://www.instagram.com/p/C3Sk6d2MTjI/">
    <template #default="{ html, shortcode, postUrl }">
      <div class="instagram-wrapper">
        <a :href="postUrl" target="_blank" class="text-sm text-gray-500 mb-2 block">
          在 Instagram 查看 ({{ shortcode }})
        </a>

        <div v-html="html" />
      </div>
    </template>
  </ScriptInstagramEmbed>
</template>
```

</code-group>

### Props

`ScriptInstagramEmbed` 组件接受以下属性：

<table>
<thead>
  <tr>
    <th>
      属性
    </th>
    
    <th>
      类型
    </th>
    
    <th>
      默认值
    </th>
    
    <th>
      说明
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        postUrl
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      必填
    </td>
    
    <td>
      Instagram 帖子链接（例如 <code>
        https://www.instagram.com/p/ABC123/
      </code>
      
      ）
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        captions
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      是否在嵌入中包含字幕
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        apiEndpoint
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        /api/_scripts/instagram-embed
      </code>
    </td>
    
    <td>
      用于获取嵌入 HTML 的自定义 API 端点
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rootAttrs
      </code>
    </td>
    
    <td>
      <code>
        HTMLAttributes
      </code>
    </td>
    
    <td>
      <code>
        {}
      </code>
    </td>
    
    <td>
      根元素属性
    </td>
  </tr>
</tbody>
</table>

### 插槽 Props

默认插槽接收：

```ts
interface SlotProps {
  html: string      // 处理后的嵌入 HTML
  shortcode: string // 帖子短码（例如 "C3Sk6d2MTjI"）
  postUrl: string   // 原始帖子链接
}
```

### 命名插槽

<table>
<thead>
  <tr>
    <th>
      插槽
    </th>
    
    <th>
      说明
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      主要内容，接收 <code>
        { html, shortcode, postUrl }
      </code>
      
      。默认渲染 HTML。
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        loading
      </code>
    </td>
    
    <td>
      获取嵌入 HTML 时显示
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        error
      </code>
    </td>
    
    <td>
      嵌入获取失败时显示，接收 <code>
        { error }
      </code>
    </td>
  </tr>
</tbody>
</table>

## 支持的 URL 格式

- 帖子：`https://www.instagram.com/p/ABC123/`
- Reels：`https://www.instagram.com/reel/ABC123/`
- TV：`https://www.instagram.com/tv/ABC123/`

## 工作原理

1. **服务器端抓取**：从 `{postUrl}/embed/` 获取 Instagram 嵌入 HTML
2. **资源代理**：将来自 `scontent.cdninstagram.com` 的所有图片和来自 `static.cdninstagram.com` 的资源重写为通过你的服务器代理
3. **脚本移除**：移除 Instagram 的 `embed.js`（静态渲染不需要）
4. **缓存**：服务器级别缓存响应 10 分钟

该方案启发自 [Cloudflare Zaraz 的嵌入实现](https://blog.cloudflare.com/zaraz-supports-server-side-rendering-of-embeds/)。

## 隐私优势

- 不加载第三方 JavaScript
- Instagram/Meta 不设置任何 Cookies
- 浏览器不会直接与 Instagram 通信
- 不会向 Instagram 共享用户 IP 地址
- 所有内容均由你的域名提供

## 限制

- 仅支持单图帖子（图集仅显示第一张图片）
- 视频显示为静态封面图
- 部分交互功能不可用（点赞、评论）

<script-types>



</script-types>