인스타그램 api, 내 웹사이트에 인스타그램 사진 가져오기

- 2020. 11. 08. 추가

 

드디어 페이스북 계정 문제를 해결하고, 정상적으로 작동하는 인스타그램 api 테스트를 마쳤습니다.

최신 버전으로 업데이트 된 방법은 아래 링크에서 보실 수 있습니다.

 

https://tonhnegod.tistory.com/245

 

 

---

 

 

현재 해당 포스팅의 방법으로는 인스타그램 api를 사용할 수 없게 되었습니다.

사용할 수 있는 방법을 찾게되면 업데이트 하겠습니다.

 

그때까지는

https://developers.facebook.com/docs/instagram-api

이 링크를 참조하여 시도해보시는 것을 추천드립니다.

 

 

---

 

- 2020. 8. 25. 추가

 

여러군데 검색해보니, 이제 인스타그램 api도 페이스북을 통해서(페이스북 계정이 있어야) 해야됩니다.

그런데 빌어먹을 페이스북 계정이 자꾸 비활성화되어서 테스트 해볼 수가 없네요.

회원님의 계정이나 계정에서 발생한 활동이 커뮤니티 규정을 위반하여 Facebook 이용이 차단되었습니다.

 

이거 혹시 해결방법 아시는 분 있나요?

페이스북 계정으로 규정을 위반할만한 짓은 한 적이 없는데 말이죠.. 

기껏해야 웹 개발 관련 테스트, 웹 관련 자료 다운받을 때 페이스북에 공유해야만 되는 것들..

이런 경우에만 사용했는데 무슨 규정을 위반했다는건지 도무지 알 수가 없습니다.

 

 

 

---

 

 

 

 

이번 포스팅에서 알려드릴 정보는 인스타그램에서 제공하는 open api 를 이용하여 

내 인스타그램에 게시된 사진들을 내 웹사이트에 가져오는 방법입니다. 

 

api를 사용하기 위해서는 인스타그램 개발자 페이지에서 Client ID 등록 과정을 거쳐 최종적으로 access token 을 발급받아야 합니다. 

Client ID 등록부터 access token 발급, api를 실제 웹사이트에 적용하는 방법까지 모두 안내해 드리겠습니다. 

 

(※ 타인의 인스타그램 사진을 내 웹사이트로 가져오는 것은 저작권 침해의 문제가 있고

open api를 통한 일반적인 방법으로는 불가능함을 미리 알려드립니다.)

 

 

1. 인스타그램 개발자 페이지 접속 후, 자신의 인스타그램 아이디로 로그인 합니다. 

(인스타그램 개발자 페이지 주소 : https://www.instagram.com/developer/)

 

 

 

2. 로그인 후, 상단의 Manage Clients 클릭합니다. 

 

 

3. 초록색 박스 Register a New Client 클릭합니다. 

 

 

4. Register new Client ID 화면에서 Details 탭의 항목들을 입력합니다. 

Website URL 과 Vaild redirect URIs 은 http:// 를 포함하여 실제 내 웹사이트 주소를 정확히 입력해 주시고, Privacy Policy URL 과 Contact email 은 입력을 안해도 무방합니다. 입력을 다 하셨다면 우선 Register 를 누르지 마시고, Security 탭으로 이동합니다.

 

 

5. Security 탭에 이동 후, 상단 Disable implicit OAuth 체크박스를 해제합니다. 

(내 인스타그램의 사진들을 공개적으로 웹사이트에 게재하기 위함) 

그리고 최종적으로 Register 를 클릭합니다. 

 

 

6. 새로운 Client ID가 올바로 생성된 화면입니다. 이 Client ID가 access token 을 발급 받는데 사용됩니다. 

 

 

7. access token을 발급받기 위하여, 인터넷 브라우저 주소창에 

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

의 형태로 access token 발급을 요청합니다. 

CLIENT-ID : 안내 6번 항목의 발급된 CLIENT ID 

REDIRECT-URI : 안내 4번 항목에서 입력했던 Vaild redirect URIs 

 

(입력 예시 : https://api.instagram.com/oauth/authorize/?client_id=2ff7ed0b00944080833325b257f300bb&redirect_uri=https://yourdomain.net&response_type=token)

 

 

 

access token 발급 과정에서 아래와 같은 화면이 뜰 수 있으니, 

만약 이 화면이 뜬다면 Authorize 를 눌러주시면 됩니다. 

 

 

8. access token 발급 요청이 성공적으로 되었다면, 아래와 같이 주소창에 access token 이 발급됩니다. 

(access_token=6952091267.9632906.889ca5eb32e04185adc34767d44751ed 부분을 따로 복사해둡니다.)

 

 

9. 내 웹사이트에서 인스타그램 사진 출력을 원하는 페이지에서 api 사용을 위한 js 파일을 로드하고 스크립트를 입력해 줍니다. 

 

js 파일 다운로드 : 

instafeed.min.js

다운로드

 

<script type="text/javascript" src="/js/instafeed.min.js"></script> <!-- js 파일 로드 -->
<script type="text/javascript">    
var userFeed = new Instafeed({
    get: 'user',
    userId: CLIENT_ID,
    sortBy: "most-recent",
    limit: 20,
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" />{{caption}}</a>', 
 // {{link}} : 게시물 링크, {{image}} : 사진 url, {{caption}} : 게시물 텍스트
    accessToken: 'Access_Token'        
});
 
userFeed.run();
</script>
 
<div id="instafeed"></div>

위에서 복사했던 access_token=6952091267.9632906.889ca5eb32e04185adc34767d44751ed 에서 

. 을 기준으로 앞의 숫자를 스크립트의 userId 부분에, access_token 전체를 스크립트의 accessToken 부분에 적어줍니다. 

 

스크립트 입력 예시)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script type="text/javascript" src="/js/instafeed.min.js"></script> <!-- js 파일 로드 --> <script type="text/javascript">     var userFeed = new Instafeed({     get: 'user',     userId: 6952091267,     sortBy: "most-recent",     limit: 20,     template: '<a href="{{link}}" target="_blank"><img src="{{image}}" />{{caption}}</a>',  // {{link}} : 게시물 링크, {{image}} : 사진 url, {{caption}} : 게시물 텍스트     accessToken: '6952091267.9632906.889ca5eb32e04185adc34767d44751ed'         });   userFeed.run(); </script>   <div id="instafeed"></div>

 

 

아래는 참고사항 입니다. 

 

스크립트의 limit 항목 (limit: 20 부분) 에서 불러올 인스타그램 사진 수를 정할 수 있습니다. 

스크립트의 template 항목 (a 태그 부분) 에서 html 코드를 원하는대로 지정할 수 있습니다. 

여기에 css를 곁들여 원하는 모양대로 만들어 쓰시면 됩니다. 

 

적용 후 결과화면 예시 1

 

결과화면 예시 2

(스크립트 부분에서 게시물 텍스트 {{caption}} 항목을 지움)

이상으로 인스타그램 open api 를 사용하여 내 웹사이트에 인스타그램 사진 가져오는 방법 포스팅을 마치겠습니다.