인스타그램 API 연동하기(feat. 내 홈페이지에) #1

인스타그램의 사진을 홈페이지에 연동하려고 했는데 잘 사용하던 API 서비스를 종료해서 더 이상 이전의 방법으로 연동이 안된다.

새로 변경된 API로 연동하는 방법을 대충 보니 복잡해 보여서 나중에 까먹으면 또 보려고 기록을 해 놓으려고 한다. 😥

 

 

시작하기전에 필요한 준비물이 있다.

인스타그램 연동 준비물

• 페이스북 개발자 계정(이건 페이스북 아이디 있음 걍 되는 거 같고)
• 인스타그램 계정(나중에 테스트 계정에서 필요하다)
• 인스타그램을 연동 할 홈페이지(꼭! HTTPS 필수)
• 포스트맨이나 인썸니아(이건 필수는 아니고 터미널에서 cURL 대신 쓰면 편함)

 

 

 

 

기존의 인스타그램 API 연동 방법

이전에는 위 이미지처럼 인스타그램 개발자 사이트에 가서 가입 및 로그인 후 앱을 생성해서 각종 키를 발급받아 연동이 가능했지만 이제는... 없다!!! 새로운 API를 써야 해!!!

 

 

 

 

 

원래 오른쪽 상단에 초록색 버튼이 있어서 앱을 관리 할 수 있었는데 역시 없다. 없어!!!!!!!!

새로운 API로 연동을 시작 해 보자.

 

 

 

 

 

새로운 페이스북 API로 인스타그램 연동하기

https://developers.facebook.com/

Facebook for Developers

 

페이스북 개발자 페이지(위에 주소)로 가서 로그인 후 내 앱 > 앱 만들기를 클릭

 

 

 

 

 

 

 

새 앱을 만든다. 이거슨 인스타그램 앱이 아니고 페이스북 앱이다. 페이스북 앱을 먼저 만들고 그 안에서 인스타그램 앱을 만들어야 한다.

 

 

 

 

 

 

 

앱 생성 후 방금 만든 앱의 설정에 들어온다.

설정 > 기본 설정에 들어가서 하단에 플랫폼 추가를 누른다. (다른건 입력 안 해도 된다.)

 

 

 

 

 

 

 

홈페이지랑 연동하는거니깐 웹사이트를 선택

 

 

 

 

 

 

 

웹사이트 URL을 입력하고 변경 내용 저장 버튼을 누른다.

 

 

 

 

 

 

 

저장 후 왼쪽에 제품 + 를 눌르고 인스타그램 설정 버튼을 눌러 인스타그램을 추가한다.

(이미지는 스샷 찍기 전에 이것저것 만져보다가 인스타그램을 먼저 추가해서;;;)

 

 

 

 

 

 

 

왼쪽에 추가 된 Instagram을 열고 기본 표시를 눌러 인스타그램 앱을 만든다.

 

 

 

 

 

 

 

앱 이름을 입력하고 앱 만들기 버튼

 

 

 

 

 

 

 

⭐⭐⭐ 아놔 이거 중요

위에서 앱 만들기 버튼을 누르면 기본정보(?)를 입력해야 하는데,

꼭 SSL이 적용된 HTTPS 주소가 필요하다. 이거 모르고 계속 http 주소 입력했는데 변경 내용 저장이 안 돼서 답답해 죽을 뻔 😤

 

하단에 "Instagram 기본 표시의 앱 검수" 안해도 됨

 

 

 

 

 

 

 

OAuth 리디렉션 URI를 잘 입력하고 저장이 잘 됐으면 왼쪽 메뉴에서 역할 > 역할로 이동해서 Instagram 테스터 추가 버튼을 누른다. (Instagram 테스터 위에 있는 그냥 테스터 아님)

 

 

 

 

 

 

 

인스타그램 아이디를 입력한다.

 

 

 

 

 

 

 

인스타그램 사이트로 이동해서 로그인 후 프로필 편집 옆에 톱니바퀴 아이콘 > 앱 및 웹사이트 > 테스터 초대에 가면 초대가 있는데 수락을 눌러준다.

 

https://www.instagram.com/

Instagram

 

고생했다. 여기까지 페이스북 앱을 만들어 그 안에서 인스타그램 앱을 만드는 방법을 보았다면 다음 글에서는 여러 키랑 토큰 등을 발급받는 방법을 알아보자. 😵

 

힘들엉..🤪