개요

개인 블로그나 홈페이지에 자신의 인스타그램 사진을 연동하여 보여주는 기능을 사용하기 위해 Instagram Legacy API가 많이 사용 되고있습니다.

그러나, 2020년 인스타그램에서는 공식적으로 Legacy API 지원중단을 공지하며 새로운 연동 API인 Basic Display API 관련 내용을 소개했습니다.

제이티에서는 정책에 따라 Legacy API를 Basic Display API로 마이그레이션 하기위해 여러 테스트를 진행하였습니다. 테스트를 통해 알게된 정보를 공유함으로써 보다 많은 개발자들이 쉽게 인스타그램 API를 활용할 수 있도록 돕고자 글을 작성하게 되었습니다.

Instagram Basic Display 연동방법

1. 페이스북 개발자 로그인, 앱 개설

페이스북 개발자 센터로 이동하여 로그인 후, ‘내 앱 – 앱 만들기’ 버튼을 클릭합니다.
앱의 기본 정보를 입력한 후 ‘앱 ID 만들기’ 버튼을 클릭하여 APP을 생성해줍니다.

2. 플랫폼 추가하기

생성한 앱의 관리자 화면으로 이동하여 ‘설정 – 기본 설정 – 플랫폼 추가’ 버튼을 클릭합니다.
※ 본 가이드에서는 웹사이트를 대상으로 진행하기 때문에 ‘웹사이트’ 플랫폼을 추가하였습니다.

3. 플랫폼 기본정보 입력

웹사이트 플랫폼 추가 후 노출되는 입력창에 운영할 사이트 URL을 입력한 후 ‘변경 내용 저장’버튼을 클릭합니다.

4. 인스타그램 추가

제품추가 버튼을 선택한 후 Instagram을 추가해 줍니다.

5. 인스타그램 APP 추가

Instagram 관리 메뉴에서 ‘기본 표시 – 새 앱 만들기’를 클릭한후 프로젝트 이름을 입력한 후 앱 만들기를 클릭합니다.

(작성되는 프로젝트 명은 인스타그램 관리자에서 노출되는 이름이기 때문에 명확하게 작성하여 주시는 것이 좋습니다.)

6. 인스타그램 APP ID 셋팅

Instagram App ID 생성 후 하위 사진의 3가지 URL을 입력한 후 ‘변경 내용 저장’버튼을 클릭합니다.
Basic Display API활용중에는 실제로 이용되지 않는 URL들이기 때문에, 실제로 존재하지 않는 페이지 URL을 작성하셔도 무관합니다.
(추후 인스타그램 로그인 등 인증기능이 추가될 때 수정 가능)

7. Token 발급 셋팅

기본 표시 하단의 User Token Generator의 ‘Add or Remove Instagram Token’ 버튼을 클릭하고 이동하여 ‘Instagram 테스트 추가’ 버튼을 클릭합니다.
인스타그램 게시물을 연동할 계정의 아이디를 입력해 줍니다. 정상적으로 추가가 되었다면 Instagram 테스터 영역에 계정정보가 노출되게 됩니다.

8. 인스타그램 연동 수락

위에서 등록한 인스타그램 계정으로 로그인 후,
설정버튼을 클릭한후 설정목록 중 ‘앱 및 웹사이트’ 버튼을 클릭합니다.
설정 페이지에서 ‘테스터 초대’ 탭을 이동하여 페이스북에서 발행된 요청사항을 수락합니다.
초대 제목으로는 Step 8에서 작성한 프로젝트명이 노출됩니다.

9. Token 발급

Instagram에서 초대 수락 후 페이스북 개발자센터 ‘기본 표시 – User Token Generator’로 다시 이동하시면 우측에 ‘Generator Token’버튼이 추가되어 있는 것을 확인할 수 있습니다.
‘Generator Token’버튼을 클릭한 후 노출되는 Token 팝업의 동의 체크박스를 선택한 후 발급되는 토큰을 복사해줍니다.
이 토큰을 이용해 Instagram 게시물을 호출할 것이므로, 반드시 메모해 둡니다.

10. 프로그램 연동 작업

발급된 토큰과 페이스북의 Basic Display Guide를 참고하여 인스타그램 연동 스크립트를 작성합니다.
개발 코드의 경우 데모로 대체합니다!

페이스북 개발 가이드
instagram basic display api guides

JT DEMO (오픈소스로 개발자 도구를 통해 전체코드를 확인하실 수 있습니다.)
https://studio-jt.co.kr/demo/instagram/

참고링크

• 인스타그램 업데이트 공지 : https://developers.facebook.com/blog/post/2018/01/30/instagram-graph-api-updates/
• Instagram Graph API 정보 : https://developers.facebook.com/docs/instagram-api/overview