인스타그램 API 자료는 풍부한 편

일반적인 인스타그램 API 활용법은 대체로 인터넷에 공개되어 공유되는 내용들이 잘 작동합니다. 최근 API가 좀 변하긴 했습니다만, ChatGPT, 구글검색, 메타 도큐멘테이션을 활용하면 수월한 편이라고 생각합니다.

문제는 해시태그 검색 부분인데, 해시태그 검색은 2번에 걸쳐서 API를 호출해야합니다. nextjs15를 통해 instagram api를 연결하면서 삽질한 내용을 기록해봅니다.

Source

/**
 * 주어진 해시태그에 해당하는 인스타그램 게시물을 가져옵니다.
 * @param {string} tag - 검색할 해시태그
 * @returns {Promise<Object>} - 해시태그에 해당하는 인스타그램 게시물 데이터
 * @throws {Error} - 인스타그램 게시물 가져오기 실패 시 오류 발생
 */
export const getHashTagPosts = async (tag: string) => {
  // 그래프 api 탐색기를 통해 가져온 Access Token, 1시간 뒤 만
  const accessToken = process.env.NEXT_PUBLIC_FB_APP_ACCESS_TOKEN
  // 그래프 API 탐색기의 엑세스 토큰 좌측 안내 아이콘 -> 액세스 토큰 도구 -> instagram_basic에서 아이디 확인
  const userId = process.env.NEXT_PUBLIC_IG_USER_ID
  // 1.해시태그를 검색하여 해시태그의 아이디를 추출 
  const getTagId = `https://graph.facebook.com/ig_hashtag_search?user_id=${userId}&q=${tag}&access_token=${accessToken}`
  // 2.추출된 해시태그 아이디를 기반으로 최근 미디어 가져오기(기본 50개)
  const getTagPosts = (tagId) =>
    `https://graph.facebook.com/v21.0/${tagId}/recent_media?user_id=${userId}&fields=id,caption,children,media_type,media_url,timestamp,permalink&access_token=${accessToken}`
try {
// 해시태그 아이디 추출
const getHashtagId = await axios.get(getTagId)
if (getHashtagId.status !== 200) {
throw new Error(
인스타그램 해시태그 아이디를 가져오기 실패 : ${getHashtagId.status} ${getHashtagId.statusText},
)
}
// 응답받은 hashtag id
const tagId = getHashtagId.data.data[0].id
// 해시태그 아이디를 통해 최근 미디어 검색
const tagPosts = await axios.get(getTagPosts(tagId:string))
if (tagPosts.status !== 200) {
throw new Error(
해시태그 기반 포스트 가져오기 실패 : ${tagPosts.status} ${tagPosts.statusText},
)
}
return tagPosts.data
} catch (error:any) {
console.error(
"Error fetching Instagram posts:",
error.response ? error.response.data : error.message,
)
throw new Error("Failed to fetch Instagram posts")
}
}

해시태그 이름을 통해 해시태그 아이디를 얻고, 그 아이디를 통해 최근미디어/인기미디어를 얻어오는 방식입니다.

user_id를 요구하기때문에, instagram user id를 얻어야하는데, graph.facebook.com/me를 통해서 얻은 아이디는 작동하지 않습니다. 그래프API탐색기에서 엑세스 토큰을 발급받을때 토큰 옆에 안내 아이콘을 눌러 엑세스 도구 탐색기를 들어가면 instagram_basic 권한을 연결할때 설정한 계정의 아이디를 확인할 수 있습니다.

근데 정작 결과는 전세계 인기미디어/최근 미디어를 가져오는 것이라... 이럴거면 사용자 아이디는 왜 물어본거냐고 반문하고 싶은 결과물입니다. 제가 원했던 것은 내가 올린 포스트 기반으로 해시태그 정렬된 결과물을 원했던 것이기 때문이죠.

잦은 API 변경, 납득하기 어려운 호출 방식

코드 자체가 복잡하고 어려운 코드는 아닙니다만, 인스타그램 API를 호출할때 요구하는 내용들이 복잡해서 메타 개발자 페이지에서 설정하는 부분에서 애를 먹었습니다.

일반적인 인스타그램 feed 호출은 graph.instagram.com를 통해 이뤄지지만, 해시태그 검색 및 노출은 graph.facebook.com 을 통해 이뤄집니다. 그리고 [그래프 api 탐색기](https://developers.facebook.com/tools/explorer?method=GET&path=me%2Faccounts&version=v21.0)를 통해서 권한을 설정해보며 테스트 할 수 있는데 instagram_basic은 일단 필수로 들어가야합니다. pages_show_list와 pages_read_engagement 권한도 추가하라고 매뉴얼에서는 안내되고 있는데, 실제 이게 작동에 영향을 주는지 좀 의아한 부분이긴 합니다.

추후 해결이 필요한 부분

그리고 엑세스 토큰이 1시간 동안 작동하기 때문에, 주기적으로 새롭게 갱신하는 부분도 고민 해봐야할 부분입니다. 테스트 개발중이라 임시 엑세스 토큰을 발급하여 사용하였으나, 별도의 갱신 방법이 있는지 확인이 필요한 상황입니다.