본문으로 바로가기



이번 포스팅에서 알려드릴 정보는 인스타그램에서 제공하는 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=http://aq23r1gt.iwinv.net&response_type=token)


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

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



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

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


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

js 파일 다운로드 :  instafeed.min.js


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: 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 를 사용하여 내 웹사이트에 인스타그램 사진 가져오는 방법 포스팅을 마치겠습니다. 



댓글을 달아 주세요

  1. 유밍끼 2018.04.10 11:31

    자세한설명 감사합니다 ^__^ 덕분에 어려움없이 홈페이지에 인스타그램 api 추가할수 있었어용 ㅎ_ㅎ

  2. 특급미 2018.04.22 20:20

    안녕하세요 좋은 정보 감사드립니다.

    결과화면 예시 2 처럼 적용은 하였으나 각 사진의 크기나 간격 등은 어떤방법으로 조절할 수 있는지? 여쭤보아도 될까요..

    웹 왕초보 입니다.ㅜㅠ

  3. 특급미 2018.04.22 20:22

    예를들어 가로 세로 250 정도싸이즈 가로로 5장 만 가져오는법..여쭤봅니다 ㅠㅠ

    • Favicon of https://tonhnegod.tistory.com BlogIcon 누구든좋으니까 2018.04.22 21:41 신고

      인터넷 브라우저 크롬으로 인스타그램 불러온 부분에 요소 검사를 해보시면 태그 구조를 알 수 있습니다.
      원하시는 css를 적용하시면 됩니다.

      예시)
      <style>
      #instafeed a img {width:250px;}
      </style>

  4. 특급미 2018.04.23 19:06

    크키조절 감사합니다ㅜㅜ 한가지만 더 알려주세요 이미지들 사이 간격은 어떻게 해야하나요?
    죄우 사진 아래위 사진들과의 간격을 조절할수 있을까요?

  5. tania 2018.05.10 16:31

    이 api 가 아직 사용가능한가요?
    심지어 3월까지는 api정상적으로 잘 이용했는데~ 4월 말부터 안되서요, 혹시 아시는지 여쭤봐요 ㅜ

  6. 황금 2018.05.15 21:25

    우와 덕분에 정말 쉽게 연동했어요. 제가 이거 정말 하고 싶었는데 정보가 없어서 포기했었거든요
    정말 정말 감사드립니다:)

  7. 서준용 2018.05.28 16:25

    limit 에 가져올 사진 개수를 지정할수 있는데, 제한이 있나요?

  8. Jeon 2018.08.20 11:19

    정말 찾던거였어요 감사합니다. 도움됐어요

  9. 주워니 2018.08.23 07:38

    와~ 요것이야말로 유익한 정보네요 신기방기 써먹어볼게요 :)

  10. 전 안되요 2018.09.11 16:37

    전 안되는데 어찌해야할까요.......

    발급받은 토큰에는 .이 들어가는것도 없고~
    api정책이 바뀐건지 왜 전 안되는거죠.. 똑같이 따라했는데..

    code=d69dae31dabb4fe9a2e20e488dbc70aa << 제토큰...

  11. HAHA 2018.10.22 17:57

    설명 너무 감사드립니다.
    그런데 해시태그로 가져오는 방법은 없을까요?
    저거는 최신 게시물을 가져오는건가요?
    해시태그 검색어 값을 어떻게 넣어야 할까요?

    • Favicon of https://tonhnegod.tistory.com BlogIcon 누구든좋으니까 2018.10.25 19:22 신고

      해당 포스팅은 본인 인스타 계정에 업로드 된 게시물들만 가져올 수 있고, 다른 경로 (말씀하신 해시태그 등) 로 가져올 수 있는 api는 아닌걸로 알고 있습니다.

  12. 연주 2019.01.01 17:46

    안녕하세요
    글 잘 읽었습니다!
    그렇다면 가져오는 사진은 랜덤으로 가져오게 되는것인가요?(가져오는 갯수를 1개로 지정하고 내 인스타그램에는 20장의 사진이 있다고 가정할때)

    • Favicon of https://tonhnegod.tistory.com BlogIcon 누구든좋으니까 2019.01.03 20:21 신고

      자바스크립트 소스에 보시면 sortBy: "most-recent" 이 부분이 정렬 부분입니다.
      본문처럼 most-recent 일 경우에는 최신 게시물 순으로 가져옵니다.
      다른 옵션 값들이 어떤 것들이 있는지는 찾아봐야겠네요.

  13. mazedaka 2019.04.04 16:39

    기존에 제가 알던방식은 각각의 인스타 페이지로 연결이 안됬는데
    이건 잘되네요. 감사합니다 너무너무너무너무너무너무요~

  14. 2019.05.08 18:08

    비밀댓글입니다

  15. 홍단 2019.05.15 14:34

    인스타 api 를 친절히 안내해주신데로 해보니 정말 잘 됩니다! 정말 감사드려요^^

    한가지 궁금한게
    인스타그램 이미지를 가지고 올때 150*150 사이즈를 가지고 오는데

    150*150을 강제로 300*300으로 늘이는게 아닌

    예를 들면 300*300 리사이즈 된 사진을 가지고 오게 하는 방법이 있을까요..?

    • Favicon of https://tonhnegod.tistory.com BlogIcon 누구든좋으니까 2019.05.20 02:44 신고

      <style>
      #instafeed a img {width:150px;}
      </style>
      이렇게 css로 강제로 사이즈 조절하는 방법이 있고,


      resolution 옵션을 추가해서 해상도를 3가지 중에 하나로 지정할 수 있습니다.

      resolution
      - thumbnail (default) - 150x150
      - low_resolution - 306x306
      - standard_resolution - 612x612

      소스는
      var userFeed = new Instafeed({
      .
      .
      .
      resolution : 'standard_resolution',
      .
      .
      .
      });

      이런 식으로 추가하시면 됩니다.
      (http://instafeedjs.com/ 참고)

      300x300 크기를 원하시면 resolution 옵션을 low_resolution 으로 지정해서 300x300으로 조정하시면 될 듯 합니다.

  16. 명랑언니 2019.09.25 16:21

    감사합니다.
    정말 찾아헤매던 소스입니다.ㅜㅜ
    근데 전 왜 안될까요 혹시 이제 안되는걸까요
    적어주신 소스 저 부분만 원하는 위치에 넣고 토큰이랑 아이디 부분만 수정하면 되는거죠? 다시한번 해보려합니다 ㅠㅠ
    저 다운로드 받은 js 파일을 홈페이지 내 호스팅에 올려야 하는거죠>?
    홈페이지 말고 외부 호스팅에는 안되는걸까요>? 하..됐음 좋겠당 ㅠㅠ

    • Favicon of https://tonhnegod.tistory.com BlogIcon 누구든좋으니까 2019.09.25 16:27 신고

      현재 정상 작동하고 있습니다.
      포스팅 내용 그대로 따라하시되 본문 중간에 첨부된 js파일은 다운 받으셔서 호스팅에 업로드한 후 불러와주셔야 합니다.

  17. 명랑언니 2019.09.25 18:02

    개발자님!
    위에소스로 다시 했는데
    먼가적용이 되는거 같은데 이미지가 안뜨고 엑박이 뜨는이유는
    어디가 잘못된걸까요? js파일이 잘못된걸까요?
    완전 초보라 다시한번 여쭤봅니다 ㅠㅠ