Instagram AIP - 웹사이트에 피드 로드하기.

instagram API 를 이용해서 내 웹사이트에 피드 로드하기를 구현해볼까합니다.
여기서 전제조건은 해당 인스타그램 계정이 공개계정이여야 한다는 점입니다.
그리고, 아무 계정이나 가져오진 못합니다. 해당 계정의 주인이 계정의 공개 토큰을 가져와야하기 때문입니다.

 

1. Instagram developer site 로그인

아래 첨부한 사이트에서 인스타 계정 로그인을 합니다. 단, 아무 계정이 아닌 피드를 가져올 해당 계정이여야 합니다.

instargraim developer site URL : https://www.instagram.com/developer/

 

2. Manage Clients 클릭

예시 캡쳐본에 따라 해당 버튼을 클릭합니다. 

 

3. Register a New Client 클릭

 

4. 데이터 채우기 및 체크박스 해제

위 왼쪽 예시를 보며 노란색 마크 부분에 데이터를 꼭 기입해야한다.
가장 중요한 부분은 Website URL , Valid redirect URLs 이다. 이 부분은 피드를 불러올 사이트 url을 넣어줘야한다.
그리고 두번째 탭인 Security 영역에서 해당 체크박스를 해제 하여 피드가 공개적으로 웹사이트에 게재되는 것을 허락(?)한다.
그리고 마지막 Register 를 클릭.


자, 여기까지하면 클라이언트 아이디가 생성된다.
생성된 아이디를 access token을 받기 위해 사용한다. 방법은 아래와 같다. 

 

5.

발급받자 아래 코드에 보면, CLIENT-ID 부분에 생성된 위의 아이디를 추가하고, 
REDIRECT-URI 부분에 우리가 피드를 게시할 앞서 4번에 적어넣었던 URL을 넣고, 브라우저 주소창에 넣고 엔터! 

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

// 예
https://api.instagram.com/oauth/authorize/?client_id=e9088f3d894d451b8d103aa909eeae26&redirect_uri=http://sssjeon.cafe24.com&response_type=token

 

6. access token 발급

출처 : http://tonhnegod.tistory.com/88

처음에 하면 이런 창이 뜨는데, 저 버튼을 클릭한다. 
그러면 아래 창으로 변경되는데. 주소창의 저 토큰이 바로 우리가 발급받고자 한 access token이다. (토큰 저장해두자)

 

자, 대망의 코드 붙이기이다.  여기까지 왔으면 다했다고 보시면 됩니다. 

7. 코드 넣기

<div id="instafeed">
</div>

var userFeed = new Instafeed({
    get: 'user',
    userId: 1655195941,
    sortBy: "most-recent",
    limit: 20,
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" />{{caption}}</a>',
    accessToken: '1655195941.e9088f3.4251e5bca50445ca9a54e38ad6a24ff9'
});

userFeed.run();

위의 코드를 HTML 에 넣어보자. 스크립트에서 중요한 것은, userId 영역과 accessToken 이다.
해당 부분은, 6번에서 생성된 access token을 준비하고,
userId에는 아래 예시의 노란색 부분을 (뒤에 .은 생략), accessToken에는 빨간색 안의 문자들을 넣으면된다.

 

 

좀더 찾아봐야겠지만, html 의 id값은 변경이 가능한 것인지는 모르겠다.
가능하지않을까??? .. 이상입니다.