인스타그램 API 적용하여 게시물 가져오기

들어오는 유저들마다 Login 시켜줄 것도 아니고, 인스타계정 하나에 대한 게시물을 뿌려줄거라 간단했다.

인스타그램 회원가입, 앱 생성 같은건 건너뛰고 설명해보자.

 

적용 화면

 

---

1. 브라우저 주소창에 아래 주소로 접속하여 AccessToken 값을 가져온다.

https://api.instagram.com/oauth/authorize/?client_id={Client_id}&redirect_uri={redirect_uri}&response_type=token

 

2. 인스타 게시물을 쉽게 가져오기위해 아래 js파일을 다운받아 프로젝트에 넣는다.

instafeed.min.js

다운로드

 

3. 아래 소스를 참고해서 수정한다.

<!-- 인스타그램 3rd party lib -->
<script type="text/javascript" src="/javascript/instafeed.min.js"></script>

 

var userFeed = new Instafeed({
    get: 'user',
    userId: {userId}, //accessToken 의 앞자리
    sortBy: "most-recent",
    limit: 5,
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>&nbsp;', 
    // {{link}} : 게시물 링크, {{image}} : 사진 url, {{caption}} : 게시물 텍스트
    accessToken: '{accessToken}'
});
         
userFeed.run();

 

<!-- 인스타그램 --><br><br>
<div id="instagram" align="center">
    <img src="/images/sns/instagram.PNG" width="30" height="30"> @vvh_avv
    <div id="instafeed"></div>
</div>