嗨，我来帮你搞定这个问题！之前用InstaFeed因为旧API弃用挂了，换成Graph API确实是正确的方向，不过因为Graph API的权限和跨域限制，直接在Angular前端搞会有不少坑，我一步步给你捋清楚怎么实现你的需求：展示企业账号图片、按标签筛选、限制展示数量。

一、先搞定前置准备（这步不能省！） #

Graph API对企业账号有硬性要求，得先把这些配置好：

• 你的企业Instagram账号必须绑定到一个公开的Facebook主页（个人账号没法用Graph API哈）
• 去Facebook开发者平台创建一个应用，申请instagram_basic和pages_show_list这两个权限
• 获取一个长期有效的Access Token（短期Token只有1小时有效期，长期的可以通过Facebook的工具生成，或者调用API刷新），一定要确保这个Token能访问你的Instagram企业账号

⚠️ 重点提醒：绝对不能把Access Token写在Angular前端代码里！会直接泄露给用户，所有Graph API请求必须通过你的后端转发，这是核心原则。

二、Angular项目里的具体实现 #

1. 先搞一个Instagram数据服务 #

先在Angular里生成一个服务来处理数据请求：

ng generate service instagram

然后在instagram.service.ts里写请求逻辑（这里假设你有后端代理，或者用Angular的代理配置转发请求到你的后端）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class InstagramService {
  // 这里的路径对应你的后端接口，或者Angular代理配置的路径
  private apiProxyUrl = '/api/instagram';

  constructor(private http: HttpClient) { }

  // 传入标签和最大数量，获取筛选后的帖子
  getFilteredPosts(tag: string, maxCount: number): Observable<any[]> {
    return this.http.get<any[]>(`${this.apiProxyUrl}/filtered-posts`, {
      params: {
        tag: tag,
        limit: maxCount.toString()
      }
    });
  }
}

2. 后端转发请求（核心，必须做） #

因为前端不能直接调用Graph API（跨域+Token泄露），所以得写个简单的后端来转发请求，这里给你个Node.js/Express的示例：

const express = require('express');
const axios = require('axios');
const app = express();

// 替换成你的企业Instagram账号ID和长期Access Token
const INSTAGRAM_BUSINESS_ID = '你的账号ID';
const LONG_LIVED_TOKEN = '你的长期Token';

// 处理前端的筛选请求
app.get('/api/instagram/filtered-posts', async (req, res) => {
  const { tag, limit } = req.query;
  try {
    // 1. 从Graph API获取最近的帖子
    const postsRes = await axios.get(`https://graph.facebook.com/v18.0/${INSTAGRAM_BUSINESS_ID}/media`, {
      params: {
        fields: 'id,caption,media_url,permalink', // 只拿我们需要的字段
        limit: limit,
        access_token: LONG_LIVED_TOKEN
      }
    });

    // 2. 按标签筛选帖子（统一转小写避免大小写问题）
    const filteredPosts = postsRes.data.data.filter(post => {
      if (!post.caption) return false;
      return post.caption.toLowerCase().includes(`#${tag.toLowerCase()}`);
    });

    res.json(filteredPosts);
  } catch (err) {
    console.error('获取Instagram数据失败:', err);
    res.status(500).json({ error: '加载失败，请稍后重试' });
  }
});

app.listen(3000, () => console.log('后端服务跑在3000端口啦'));

3. 写一个展示组件 #

生成组件：

ng generate component instagram-feed

组件逻辑（instagram-feed.component.ts）：

import { Component, Input, OnInit } from '@angular/core';
import { InstagramService } from '../instagram.service';

@Component({
  selector: 'app-instagram-feed',
  templateUrl: './instagram-feed.component.html',
  styleUrls: ['./instagram-feed.component.css']
})
export class InstagramFeedComponent implements OnInit {
  posts: any[] = [];
  // 用@Input让父组件可以传入筛选标签和最大数量
  @Input() filterTag: string = 'default-tag';
  @Input() maxDisplayCount: number = 6;

  constructor(private instagramService: InstagramService) { }

  ngOnInit(): void {
    this.loadPosts();
  }

  loadPosts(): void {
    this.instagramService.getFilteredPosts(this.filterTag, this.maxDisplayCount)
      .subscribe({
        next: (data) => {
          this.posts = data;
        },
        error: (err) => {
          console.error('加载帖子失败:', err);
        }
      });
  }
}

组件模板（instagram-feed.component.html）：

<div class="instagram-feed-grid">
  <div class="feed-card" *ngFor="let post of posts">
    <a [href]="post.permalink" target="_blank" rel="noopener noreferrer">
      <img [src]="post.media_url" [alt]="post.caption || 'Instagram 帖子'" loading="lazy" />
    </a>
  </div>
</div>

组件样式（instagram-feed.component.css），整个网格布局：

.instagram-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.feed-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.feed-card img:hover {
  transform: scale(1.02);
}

4. 在父组件里调用这个组件 #

比如在app.component.html里，你可以直接传入参数：

<!-- 展示标签为company-event的最多8张图片 -->
<app-instagram-feed [filterTag]="'company-event'" [maxDisplayCount]="8"></app-instagram-feed>

三、一些要注意的坑 #

• 标签筛选的局限性：Graph API没有直接按标签过滤帖子的接口，所以我们是通过帖子的caption来匹配标签的，如果帖子里没写标签，就筛选不到哦
• Token有效期：长期Token也会过期（一般60天），记得设置刷新机制，或者用Facebook的系统用户Token（更稳定，适合服务器端使用）
• 权限问题：如果获取不到数据，先检查你的Token权限是否足够，以及Instagram账号是否真的绑定了Facebook主页
• 分页处理：如果要获取超过Graph API单次返回上限的帖子，需要在后端处理分页游标，实现加载更多的功能

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