ETC - 2021. 6. 21.
🖼 instagram API [인스타그램 피드를 웹사이트에 출력하기]
- -
instagram API [인스타그램 피드를 웹사이트에 출력하기]
안녕하세요
TriplexLab 입니다. 오늘은 인스타그램 API를 사용해서 웹사이트에 출력하는 과정을 알려 드리겠습니다.
3단계로 나눠서 진행 할것 입니다. 잘 따라 오세요:)
1. Facebook App - instagram API 설정 👇
준비물
1) 인스타그램 계정
2) 페이스북 개발자 사이트의 계정
3) 노출시킬 웹 사이트(페이지)
시작합시다.
1) 앱 만들기 버튼 클릭
2) 개인 계정거를 사용할것이기에 소비자를 체크
3) 본인이 알기 편한 앱 이름를 작성합니다.
그리고 비즈니스 관리자 계정 선택되지 않음.
앱 만들기 버튼 클릭하고 진행 합니다.
4) instagram 기본 표시에 있는 '설정' 버튼을 클릭 합니다.
5) 하단에 '새 앱 만들기' 버튼 클릭합니다.
6) 다음과 같은 팝업이 나오고, 먼저 앞에서 설정한 앱 이름과 동일하게 해서 '앱 만들기' 버튼 클릭
7) 다음 3곳 모두 동일한 노출시킬 웹 사이트(페이지) url를 넣어줘야 합니다.
유효한 OAuth 리디렉션 URI, 콜백 URL 승인 취소, 데이터 삭제 요청 URL
그리고 반드시 url은 https로 시작하는 url를 넣어야 합니다.
8) Add or Remove Instagram Testers 버튼 클릭
9) 인스타그램의 계정을 테스터로 추가 합니다.
2. Access Token 생성 👇
다음 링크를 클릭해서 스크롤 내리면
1) '인증 창 URL 샘플' 이라고 하는 코드 블럭을 확인 할수 있습니다. 그것을 가지고 Access Token 를 받을것 입니다.
https://api.instagram.com/oauth/authorize
?client_id={Instagram 앱 ID}
&redirect_uri={유효한 OAuth 리디렉션 URI}
&scope=user_profile,user_media
&response_type=code
2) 인스타그럄에 하단에 링크에 접속해서 '테스터 초대' 탭에 들어가서 '수락' 버튼을 클릭합니다.
그럼 저 인스타 그램 계정에 접속할수 있는 권한을 준것 입니다.
https://www.instagram.com/accounts/manage_access/
3) 그리고 위에 1)번에서 진행한 '인증 창 URL 샘플'의 url값을 모두 변경했다면
새로운 브라우저를 열고, 복사 붙이기를 합니다.
그럼 하단의 이미지 처럼 허용 문의를 합니다.
허용 버튼을 클릭하면 url이 바뀌면서 리다이랙트가 되는것을 확인 할수 있습니다.
4) 페이스북 디벨로퍼 사이트를 돌아가서
'사용자 토큰 생성기'에서 Generate Token 버튼을 클릭하여 진행을 합니다.
(로그인하고, 동의 버튼 클릭합니다.)
5) 하단의 이미지처럼 코드 처럼 생긴 것을 복사합니다.
이것이 바로 Access Token 입니다.
3. Instafeed Script 작성 👇
<script type="text/javascript" src="./instafeed.min.js"></script>
<script type="text/javascript">
const feed = new Instafeed({
accessToken: 'your-token',
target:'gallery',
template: '<li class="item">'+
'<a href="{{link}}">'+
'<img title="{{caption}}" src="{{image}}"/>'+
'<h3>{{caption}}</h3>'+
'<div>{{username}}</div>'+
'</a>'+
'</li>'
});
feed.run();
</script>Instafeed라는 플러그인에서는 딱히 다양한 정보들은 제공 해주진 않는것 같네요ㅠ
그래도 기본적으로 이미지, 태그, 제목... 등등의 정보는 제공하는것 같습니다.
어느 정도 완성한 코드를 파일로 제공합니다.👇
참고로 하단에 링크를 들어가면 페이스북 공식문서에 원하는 필드를 받아볼수 있는 쿼리문도 확인 할수 있습니다.
https://developers.facebook.com/docs/instagram-basic-display-api/reference
Contents
소중한 공감 감사합니다