Instagram 게시물 불러오기 / api 연동

soob·2021년 10월 4일
1

etc

목록 보기
1/1

참고한 자료

동영상 강의
https://www.youtube.com/watch?v=cWj1vEuB1GI

Instagram api 내용 정리된 블로그
https://tonhnegod.tistory.com/245

자세한 내용은 동영상 강의와 블로그에 나온 자료들을 보자.

계정 준비

인스타그램과 페이스북 계정 둘 다 있어야한다.

  1. 인스타그램 계정 프로페셔널 계정으로 전환
  2. 인스타그램과 페이스북 계정 연결

페이스북 개발자 사이트

https://developers.facebook.com/

페이스북 계정으로 로그인한 뒤 '앱 만들기'


기타 선택 (맨 마지막)

  • 처음에 비즈니스 관리로 선택했다가 인스타그램 기본 표시 제품이 없어서 삭제하고 다시 만들었다. 기타로 선택해준다.

토큰

테스터 추가
인스타그램 설정에서 테스터 추가를 수락 해줘야한다.

토큰 생성
Generate Token을 눌러서 토큰 생성. 나온 토큰을 복사해서 적어둔다.

https://api.instagram.com/oauth/authorize?client_id={app-id}&redirect_uri={redirect-uri}&scope=user_profile,user_media&response_type=code 

client_id={app-id} : app-id 넣을 때 instagram app id로 넣어야한다. facebook app id와 헷갈리지 않도록 한다.

인스타 피드 가져오기

instafeed.js Plugin
https://instafeedjs.com/#/

instafeed.js을 사용해서 피드를 불러왔다.

accessToken에 발급받은 토큰을 넣어준다.

Options

target : 인스타 피드를 넣어줄 DOM요소의 아이디 값을 넣어준다.
template : 넣어줄 HTML 태그를 입력한다.
limit : 게시물 개수 설정해준다.

설정하고 난 뒤, CSS로 마무리 해준다.

0개의 댓글