如何在Vue.js网站中嵌入最新Facebook和Instagram帖子

核心问题解决：替换短期令牌为长期有效令牌 #

你遇到的1小时过期问题是因为使用了短期访问令牌，需要换成60天有效期的长期令牌，之后还能定期刷新延长：

• Facebook：先通过Graph API工具生成短期令牌，再调用接口GET /oauth/access_token?grant_type=fb_exchange_token&client_id=你的APP ID&client_secret=你的APP密钥&fb_exchange_token=短期令牌，获取60天长期令牌。
• Instagram：需先将Ins账号关联到Facebook页面，再用相同流程生成长期令牌（Ins Graph API与FB共享令牌体系）。
• 令牌维护：写后端脚本（比如Node.js）每50天自动刷新一次令牌，避免过期，绝对不要把令牌直接写在前端代码里，必须通过后端代理请求API。

Facebook帖子嵌入方案 #

方案一：官方嵌入代码（无需令牌，快速实现） #

直接使用Facebook官方提供的嵌入代码，适合不需要自定义样式的场景：

1. 打开目标Facebook帖子，点击「嵌入」复制代码。
2. 在Vue组件中用v-html渲染代码，同时在项目index.html中加载FB SDK：

<template>
  <div class="fb-post-container" v-html="fbEmbedCode"></div>
</template>

<script setup>
// 替换为你复制的嵌入代码
const fbEmbedCode = '<div class="fb-post" data-href="https://www.facebook.com/xxx/posts/xxx" data-width="500"></div>'
</script>

<!-- index.html中添加SDK脚本 -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v18.0" nonce="YOUR_NONCE"></script>

方案二：Graph API拉取数据自定义渲染（需长期令牌） #

适合需要自定义界面的场景，通过后端代理请求API获取帖子数据：

<template>
  <div class="custom-fb-posts">
    <div v-for="post in posts" :key="post.id" class="post-card">
      <img :src="post.full_picture" alt="帖子图片" v-if="post.full_picture">
      <div class="post-content">{{ post.message }}</div>
      <a :href="post.permalink_url" target="_blank" class="view-original">查看原文</a>
      <span class="post-time">{{ new Date(post.created_time).toLocaleString() }}</span>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'

const posts = ref([])

// 通过后端代理请求，不要直接在前端调用Graph API
async function fetchFbPosts() {
  try {
    const res = await axios.get('/api/facebook/posts')
    posts.value = res.data
  } catch (err) {
    console.error('拉取FB帖子失败:', err)
  }
}

onMounted(() => {
  fetchFbPosts()
  // 每小时刷新一次最新帖子
  setInterval(fetchFbPosts, 3600000)
})
</script>

后端代理示例（Node.js/Express）：

app.get('/api/facebook/posts', async (req, res) => {
  const accessToken = process.env.FB_LONG_TERM_TOKEN
  const pageId = process.env.FB_PAGE_ID
  try {
    const response = await axios.get(`https://graph.facebook.com/v18.0/${pageId}/posts`, {
      params: {
        fields: 'id,message,full_picture,created_time,permalink_url',
        access_token: accessToken
      }
    })
    res.json(response.data.data)
  } catch (err) {
    res.status(500).json({ error: '拉取失败' })
  }
})

Instagram帖子嵌入方案 #

方案一：公开帖子嵌入（无需令牌） #

针对公开Ins帖子，直接用官方嵌入代码：

1. 打开目标Ins帖子，点击「分享」→「嵌入」复制代码。
2. 在Vue组件中渲染，同时加载Ins SDK：

<template>
  <div class="ig-post-container" v-html="igEmbedCode"></div>
</template>

<script setup>
const igEmbedCode = '<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/xxx/" data-instgrm-version="14"></blockquote>'
</script>

<!-- index.html中添加SDK脚本 -->
<script async src="//www.instagram.com/embed.js"></script>

方案二：Graph API拉取自有账号帖子（需长期令牌） #

适合拉取自己Ins账号的所有最新帖子，同样通过后端代理：

<template>
  <div class="custom-ig-posts">
    <div v-for="media in igMedia" :key="media.id" class="media-card">
      <img :src="media.media_url" alt="Ins帖子">
      <div class="media-caption">{{ media.caption }}</div>
      <a :href="media.permalink" target="_blank" class="view-original">查看原文</a>
      <span class="media-time">{{ new Date(media.timestamp).toLocaleString() }}</span>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'

const igMedia = ref([])

async function fetchIgPosts() {
  try {
    const res = await axios.get('/api/instagram/posts')
    igMedia.value = res.data
  } catch (err) {
    console.error('拉取Ins帖子失败:', err)
  }
}

onMounted(() => {
  fetchIgPosts()
  setInterval(fetchIgPosts, 3600000)
})
</script>

后端代理示例（Node.js/Express）：

app.get('/api/instagram/posts', async (req, res) => {
  const accessToken = process.env.FB_LONG_TERM_TOKEN
  const igAccountId = process.env.IG_ACCOUNT_ID
  try {
    const response = await axios.get(`https://graph.facebook.com/v18.0/${igAccountId}/media`, {
      params: {
        fields: 'id,caption,media_url,permalink,timestamp',
        access_token: accessToken
      }
    })
    res.json(response.data.data)
  } catch (err) {
    res.status(500).json({ error: '拉取失败' })
  }
})

关键注意事项 #

• 确保Facebook App已通过审核，拥有pages_show_list、pages_read_engagement等必要权限。
• Instagram账号需为商业/创作者账号，并关联到已认证的Facebook页面。
• 所有令牌操作必须在后端完成，绝对不能暴露在前端代码中，防止泄露。
• 定期检查Graph API版本，及时更新避免兼容性问题。

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