Hey there! I totally get your frustration—Meta's Instagram Graph API doesn't offer a direct endpoint to filter posts by both location and hashtag in one go. But don't worry, we can work around this with a two-step approach using official APIs, then handle the filtering client-side in JS/TS. Here's how to make it happen:

Step 1: Understand the Official API Limitations #

First, let's set clear expectations:

• The Graph API's /ig_hashtag_search and /search endpoints don't support combining location and hashtag filters natively.
• You'll need a Meta Developer Account, a registered app, and specific permissions (instagram_basic, pages_show_list) to access public post data. Personal user accounts have extremely limited API access, so you'll need to link a Business or Creator Instagram account to a Facebook Page.

Step 2: Two-Step Query + Client-Side Filtering #

We'll fetch two separate datasets and merge/filter them on the frontend to get posts that meet both criteria:

1. Fetch Posts from the Target Location (France) #

First, retrieve the location ID for France, then pull posts tagged with that location:

// Fetch location ID for France (adjust coordinates if targeting a specific city)
async function getFranceLocationId(accessToken: string): Promise<string | undefined> {
  const response = await fetch(`https://graph.facebook.com/v18.0/search?q=France&type=place&fields=id,name&access_token=${accessToken}`);
  const data = await response.json();
  // Grab the first matching location ID (tweak if you need a region/city-specific ID)
  return data.data[0]?.id;
}

// Fetch posts linked to the location
async function getLocationPosts(locationId: string, accessToken: string) {
  const response = await fetch(`https://graph.facebook.com/v18.0/${locationId}/media?fields=id,caption,latitude,longitude,timestamp,ig_hashtags&access_token=${accessToken}`);
  return await response.json();
}

2. Fetch Posts with the Target Hashtag (#Beach) #

Next, get the hashtag ID for #Beach, then pull recent posts tagged with it:

// Fetch hashtag ID for #Beach
async function getBeachHashtagId(accessToken: string): Promise<string | undefined> {
  const response = await fetch(`https://graph.facebook.com/v18.0/ig_hashtag_search?q=Beach&access_token=${accessToken}`);
  const data = await response.json();
  return data.data[0]?.id;
}

// Fetch posts tagged with the hashtag
async function getHashtagPosts(hashtagId: string, accessToken: string) {
  const response = await fetch(`https://graph.facebook.com/v18.0/${hashtagId}/recent_media?fields=id,caption,latitude,longitude,timestamp,ig_hashtags&access_token=${accessToken}`);
  return await response.json();
}

3. Merge & Filter Results Client-Side #

Combine the two datasets, remove duplicates, and keep only posts that meet both location and hashtag criteria:

async function getCombinedPosts(accessToken: string) {
  // Fetch both datasets in parallel
  const locationId = await getFranceLocationId(accessToken);
  const hashtagId = await getBeachHashtagId(accessToken);
  
  if (!locationId || !hashtagId) throw new Error("Failed to retrieve location or hashtag ID");

  const [locationPosts, hashtagPosts] = await Promise.all([
    getLocationPosts(locationId, accessToken),
    getHashtagPosts(hashtagId, accessToken)
  ]);

  // Use Sets for fast ID lookup
  const locationPostIds = new Set(locationPosts.data.map(post => post.id));
  const hashtagPostIds = new Set(hashtagPosts.data.map(post => post.id));

  // Filter posts present in both datasets and deduplicate
  const combinedPosts = [...locationPosts.data, ...hashtagPosts.data]
    .filter(post => locationPostIds.has(post.id) && hashtagPostIds.has(post.id))
    .filter((post, index, self) => self.findIndex(p => p.id === post.id) === index);

  return combinedPosts;
}

Step 3: Cluster Posts on a Map #

Once you have filtered posts with latitude/longitude, use a mapping library like Leaflet (or Google Maps JS API) to cluster markers:

Example with Leaflet + MarkerCluster #

import L from 'leaflet';
import 'leaflet.markercluster';

function renderMap(posts: any[]) {
  const map = L.map('map').setView([46.2276, 2.2137], 6); // Center on France
  
  // Add base map layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  }).addTo(map);

  // Initialize marker cluster group
  const markerCluster = L.markerClusterGroup();
  
  posts.forEach(post => {
    if (post.latitude && post.longitude) {
      const marker = L.marker([post.latitude, post.longitude])
        .bindPopup(`
          <b>Post ID:</b> ${post.id}<br>
          <b>Posted:</b> ${new Date(post.timestamp).toLocaleString()}<br>
          <b>Hashtags:</b> ${post.ig_hashtags?.join(', ') || 'None'}
        `);
      markerCluster.addLayer(marker);
    }
  });

  map.addLayer(markerCluster);
}

// Usage (replace with your valid access token)
getCombinedPosts('YOUR_META_ACCESS_TOKEN').then(posts => renderMap(posts));

Critical Things to Keep in Mind #

• Rate Limits: Meta's Graph API enforces strict rate limits—implement error handling for 429 responses and add retry logic with backoff.
• Public Posts Only: You can only access content from public Instagram accounts; private account posts are off-limits.
• Data Freshness: The recent_media endpoint only returns posts from the last few days (the exact window varies by API version).
• Permission Approval: Meta reviews access to post data closely—make sure your app is approved for the required permissions before launching.

Avoid Unofficial Workarounds #

Steer clear of web scraping or third-party "unofficial" APIs—these violate Instagram's Terms of Service and can lead to account bans or legal action. Stick to the official Graph API for long-term stability.

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