웹사이트를 소유한, 인스타그램 유저라면 자신의 인스타그램 이미지를 위젯으로 만들어 자신의 사이트에 올리고 싶다는 생각이 종종 들 것이다. 필자 또한 그러했다. 필자의 홈에 인스타그램 이미지를 연동시켜 갤러리 게시판을 대체하고, 나름 컨텐츠를 많아보이게 하려는 수작(?)을 하려 한 것이다. 이를 돕는 사이트로 http://www.intagme.com/ 등이 있다. 여기서 자신의 위젯을 쉽게 만들어 올릴 수 있다. 실제로 많은 사람들이 이들 사이트를 잘 이용하고 있다. 그러나 이런 웹사이트들은 걸핏하면 유저를 찾을 수 없다는 오류가 뜨며, 심지어는 서비스 제공 사이트 자체가 폭파되어 이용할 수 없게 되기도 한다. 필자는 위젯 제공 사이트(http://instagram.me/)가 권총 이모티콘(...)을 남기며 폭파되자 결국 대체 위젯을 찾아냈다. 다음 문단에서 이를 소개하겠다.


Instafeed

  instafeed는 인스타그램 위젯을 직접 웹사이트에 설치할 수 있게 도와주는 툴이다. instafeed 자바스크립트 파일을 직접 웹 서버에 올리는 방식으로, 이걸 쓰면 서비스 제공자의 사정과 관계 없이 인스타그램 위젯을 이용할 수 있다.


설치 방법


1. 인스타그램 개발자 사이트(http://instagram.com/developer/)에 접속해 자신의 인스타그램 아이디로 로그인한다.


2. register your application을 누른 뒤 register a new client를 눌러 들어간다.

  2-1 버튼 하나를 더 누르고 들어가면 휴대폰 인증 안내가 뜬다. 해준다.

  2-2 등록 양식을 작성한다. 애플리케이션 이름과 설명은 아무렇게나 써도 된다. 웹사이트 주소란에는 자신의 사이트 주소를 쓰면 된다. OAuth redirect_uri에는 일단 자신의 사이트 주소를 쓴다. 그런 다음 캡챠를 쓰고 등록하면 된다.


3. 등록을 완료한 후에, manage clients에서 자신의 클라이언트 정보를 확인한다. 여기서 client id, client secret을 메모해 두어야 한다.


4. http://blog.naver.com/bihyun07/220125788572 를 참고하여 자신의 토큰을 구한다.(자세한 내용은 다른 사람의 아이디어이기 때문에 가져올 수 없다. 직접 들어가서 확인한다.)

  4-1 4의 블로그 포스팅 주소로 들어가서 스크롤을 쭉 내려보면, 맨 마지막에 access token 받는 코드가 있다. 복사해서 php 확장자로 저장한 다음 자신의 웹사이트에 올린다. 이때 client_id와 client_secret는 3에서 확인한 것으로 수정하고, redirect_uri는 이 파일을 업로드할 경로로 수정해야 한다.

  4-2 인스타그램 개발자 사이트에 가서 manage clients에서 redirect uri를 4-1에서 올린 파일의 경로로 수정한다.

  4-3 https://api.instagram.com/oauth/authorize/?client_id=자신의 client id&redirect_uri=자신의 redirect uri&response_type=code 에 들어간 다음 authorize 버튼을 누른다.

  4-4 잘 되었다면, access_Token에 자신의 토큰값이 뜰 것이다. 이것 역시 메모해 두어야 한다.


* https://instagram.com/oauth/authorize/?client_id=자신의 client id&redirect_uri=자신의 redirect uri&response_type=token 로 접속하면 토큰값이 주소창에 뜬다. 이렇게 해도 됨. 단, manage clients-edit client에서 Disable implicit OAuth를 체크 해제해야 한다.


5. http://instafeedjs.com/ 에 접속하여 js 파일을 받고, 자신의 사이트에 올린다. 이때, 다운로드 링크를 바로 누르지 말고 '다른 이름으로 링크 저장'(크롬 기준)을 눌러 저장한다.


6. 5의 사이트를 참고해서 자신의 사이트에 적용한다.

  6-1 instafeed js 파일을 불러온다. <script type="text/javascript" src="path/to/instafeed.min.js"></script>를 삽입하면 된다. src값은 자신의 js 파일 경로로 해주면 된다.

  6-2 이것은 다음과 같은 구조로 되어 있다. 


  <script type="text/javascript">

      var feed = new Instafeed({

          옵션: '값'

      });

      feed.run();

  </script>

  

  이것에 다음의 옵션을 참고해서 넣고 웹페이지에 삽입하면 된다.


instafeed 기본 옵션 목록 :


clientId : 필수 옵션이므로 반드시 넣어줘야 한다. 3에서 확인한, 자신의 client id값을 넣어준다.

accessToken : 필수는 아니지만 특정 이용자의 인스타그램 게시물을 불러오고 싶다면 필요하다. get: 'user'와 함께 사용된다.

target : 인스타그램 컨텐츠를 불러올 곳을 지정할 수 있다. 이때 그 값은 html 요소의 id로 지정되어 있어야 한다.

template : 인스타그램 컨텐츠가 올라올 형식을 지정할 수 있다.

get : 여기서 불러올 인스타그램 컨텐츠 유형을 지정할 수 있다.

  이 옵션에서 사용 가능한 값 : 

    popular : popular page에서 불러온다. 기본 값이다.

    tagged : 특정 태그가 달린 게시물을 불러온다.

    location : 특정 위치에서 등록된 게시물을 불러온다.

    user : 특정 이용자의 게시물을 불러온다.

tagName : 어떤 태그의 게시물을 불러올 것인지를 지정할 수 있다. get: 'tagged'과 함께 사용된다.

locationId : 어떤 위치의 게시물을 불러올 거인지를 지정할 수 있다. get: 'location'과 함께 사용된다.

userId : 어떤 이용자의 게시물을 불러올 것인지를 지정할 수 있다. 이때, 해당 이용자의 아이디가 아니라 고유 번호를 기입해야 하며, 따옴표가 없어야 한다. 고유번호는 http://jelled.com/instagram/lookup-user-id 에서 볼 수 있다. 예: userId: 1234567890

sortBy : 이미지의 정렬 기준을 지정할 수 있다.

 이 옵션에서 사용 가능한 값 : 

    none : 인스타그램에서 받아온 대로 출력한다. 기본 값이다.

    most-recent : 가장 나중에 올라온 게시물부터 보여준다.

    least-recent : 가장 먼저 올라온 게시물부터 보여준다.

    most-liked : 좋아요 개수가 높은 게시물부터 보여준다.

    least-liked : 좋아요 개수가 낮은 게시물부터 보여준다.

    random : 임의의 순서로 보여준다.

links : 이미지를 인스타그램 게시물 링크로 감쌀 수 있다. true 혹은 false로 지정해야 한다.

limit : 불러올 게시물의 개수를 지정할 수 있다. 최대 60개까지 지정 가능하다.

resolution : 이미지의 크기를 지정할 수 있다.

  이 옵션에서 사용 가능한 값 : 

    thumbnail : 150x150. 기본 값이다.

    low_resolution : 306x306.

    standard_resolution : 612x612


instafeed 템플릿 : 다음의 치환자를 이용하여 자유롭게 설정할 수 있다.

예시 : <a href="{{link}}"><img src="{{image}}" /></a>


{{link}} : 인스타그램 게시물 주소

{{image}} : 인스타그램 게시물 이미지 주소

{{caption}} : 이미지에 대한 설명

{{likes}} : 게시물의 좋아요 수

{{comments}} : 게시물의 댓글 수

{{location}} : 게시물의 위치 이름

{{id}} : 이미지의 고유 아이디

{{model}} : 이미지의 전체 JSON 객체


  1. 16wok 2015.09.14 11:23  LINK EDIT/DELETE REPLY

    좋은자료 감사합니다.
    보관할데가 없어서 제 블로그로 퍼갑니다~

  2. BlogIcon 앵그리벌드 2015.11.09 05:30 신고  LINK EDIT/DELETE REPLY

    안녕하세요 이나님 최근 티스토리 스킨 배포해주셔서 정말 감사드립니다.
    깔끔하고 예뻐서 어제 열심히 수정했어요.
    제가 이 글에 댓글을 달게 된 건.. 다름이 아니라 티스토리 카테고리 중에 인스타그램을 연결하고 싶은데 (이나님 개인 페이지에 있는 것 처럼요!)
    아무리 이나님 포스트를 읽어봐도 이해가 되질 않아서요 ㅠㅠ
    인스타 API에서 access token도 받고 instafeed.min.js 파일도 받고 어떻게 적용시켜야할지도 대충 이해한 것 같은데 실제 적용을 못시키겠어요 ㅠㅠㅠ
    티스토리에서 포스트를 하나 만들어서 거기에 연결 시키려고 했는데 제 접근방식이 잘못된 건가요?
    조언 부탁드립니다 ㅠㅠ

    • BlogIcon 이나 ☻ 2015.11.12 02:00 신고 LINK EDIT/DELETE

      일단 div 태그로 위젯이 들어갈 자리를 만드신 다음에 본문 참고해서 스크립트 짜서 넣으시면 됩니다. 포스트를 만드신다고 하였으니 글 쓸 때 html 체크하시고 넣으세요.

  3. 2015.11.21 01:36  LINK EDIT/DELETE REPLY

    비밀댓글입니다

    • BlogIcon 이나 ☻ 2015.11.23 15:40 신고 LINK EDIT/DELETE

      new Instafeed 안에 아래의 코드를 넣고,
      // every time we load more, run this function
      after: function() {
      // disable button if no more results to load
      if (!this.hasNext()) {
      loadButton.setAttribute('disabled', 'disabled');
      }
      }

      바깥에 이 코드도 넣으세요.
      // bind the load more button
      loadButton.addEventListener('click', function() {
      feed.next();
      });

      그런 다음에 onclick="feed.next();"을 가진 버튼을 하나 만드시면 됩니다.

  4. BlogIcon 앵그리벌드 2015.11.27 07:29 신고  LINK EDIT/DELETE REPLY

    이나님 넘넘 감사드려요 ㅠㅠㅠ 방금 성공했습니다. 정말 감사드려요!!!!! 이 은혜를 어떻게 갚나요ㅠㅠ 기프티콘이라도 보내드리고싶네요 ㅠㅠ 좋은 하루 보내세요 ㅠㅠ!!!!!!

  5. googler 2016.01.21 17:41  LINK EDIT/DELETE REPLY

    혹시
    http://ecudemo32130.cafe24.com/
    여기 사이트 하단처럼 사이트에 특정 해시태그만을 모아서 보여줄 수도 있을까요?

    • BlogIcon 이나 ☻ 2016.01.22 17:39 신고 LINK EDIT/DELETE

      get의 값을 tagged라고 지정하고 tagName 속성에 값을 넣으시면 되겠습니다.
      이미 본문에 나와 있는 내용입니다.

  6. 2016.01.28 13:09  LINK EDIT/DELETE REPLY

    비밀댓글입니다

  7. aaaaa 2016.01.29 19:51  LINK EDIT/DELETE REPLY

    전부다 제대로 작성했는데도 홈페이지에서 이미지가 안가져와지네요 ㅠㅠ

    혹시 처음 api만들때 입력했던 도메인에다가 연결했을경우에만 정삭출력이 되는건가요??

    아직 도메인을 옮기지않아서 전에쓰던 홈페이지쪽에있는 도메인이름으로 모든 과정을 진행했고,

    현재 인스타그램을 적용시킨 홈페이지에는 아직 그 도메인을 연결해놓지 않은 상태입니다.

    도메인도 영향을 받나요??

  8. aaaaa 2016.01.29 20:14  LINK EDIT/DELETE REPLY

    이나님 정말감사합니다~
    다른 문제가아닌 cafe24에서 js파일 불러오는 자체모듈 사용했더니 적용이 안됬던거였네요!!

    정말 많은도움됬습니다. 감사합니다.

  9. BlogIcon volant 2016.02.09 00:17 신고  LINK EDIT/DELETE REPLY

    안녕하세요 이나님
    포스팅을 보고 제 블로그에 인스타 페이지를 연동하는데까지 성공했어요. 감사합니다. ^^
    그런데 인스타 사진이 20개만 로드되는데 밑에 more 버튼 한개를 넣어서 사진들을 더 불러오고 싶어서요.
    제 나름대로 버튼을 구현해서 넣어봐도 영 적용이 어려워서 도움을 요청합니다;

    • BlogIcon 이나 ☻ 2016.02.09 00:18 신고 LINK EDIT/DELETE

      new Instafeed 안에 아래의 코드를 넣고,
      // every time we load more, run this function
      after: function() {
      // disable button if no more results to load
      if (!this.hasNext()) {
      loadButton.setAttribute('disabled', 'disabled');
      }
      }

      바깥에 이 코드도 넣으세요.
      // bind the load more button
      loadButton.addEventListener('click', function() {
      feed.next();
      });

      그런 다음에 onclick="feed.next();"을 가진 버튼을 하나 만드시면 됩니다.

  10. 2016.02.25 11:39  LINK EDIT/DELETE REPLY

    비밀댓글입니다

    • BlogIcon 이나 ☻ 2016.02.25 11:39 신고 LINK EDIT/DELETE

      js파일이 올바른 경로에 있는 것 맞아요?

    • helpme 2016.02.25 11:40 LINK EDIT/DELETE

      네 맞습니다.. 크롬 개발자모드로 해서 network로 들어가면 빨간색으로 안뜨고 연결 된다고 뜨고있는데ㅠㅠ 경로도 맞다생각해서 넣었구요

    • 2016.02.25 11:43 LINK EDIT/DELETE

      비밀댓글입니다

    • BlogIcon 이나 ☻ 2016.02.25 11:45 신고 LINK EDIT/DELETE

      일단 저거 다 쓰신 그대로 복붙하신 거 맞죠?

    • 2016.02.25 11:48 LINK EDIT/DELETE

      비밀댓글입니다

    • BlogIcon 이나 ☻ 2016.02.25 11:56 신고 LINK EDIT/DELETE

      님이 제시한 코드에서 제 클라이언트 아이디 넣고 시도해봤는데, target 옵션을 넣으니까 잘 나옵니다. 일단 타겟 옵션 넣고 토큰 재발급해보세요.

    • helpme 2016.02.25 13:14 LINK EDIT/DELETE

      이나님 마지막 질문이 될거 같습니다ㅠ_ㅠ

      다 완료 된거 같은데.. 지금 현재 퍼미션 문제가 생겼습니다..

      권한 설정은 어떻게 하는지요?ㅠㅠ

      아래 에러코드 첨부 합니당..

      Uncaught Error: Error from Instagram: This request requires scope=public_content, but this access token is not authorized with this scope. The user must re-authorize your application with scope=public_content to be granted this permissions

    • BlogIcon 이나 ☻ 2016.02.25 13:22 신고 LINK EDIT/DELETE

      최근에 발급된 앱은 해시태그를 지원하지 않는 것 같습니다.

    • helpme 2016.02.25 13:25 LINK EDIT/DELETE

      지금 현재 권한이 basic / comments / follower_list / likes / public_content / relationships 에 review status 가 다 N/A로 되어있는데 권한을 변경할수는 없는건가요..?

      아래있는 스타트 서브미션으로 넘어가니까 권한에 대한 설명인거같은데..ㅠㅠ 따로 설정하는부분은 없네요... 번거롭게해서 죄송합니다ㅠㅠ 답변 부탁드리겠습니다.

    • BlogIcon 이나 ☻ 2016.02.25 13:27 신고 LINK EDIT/DELETE

      그 페이지에서 확인해봤는데 (영어로) 지원되지 않는 부분이라고 합니다. 번역기 돌린 거긴 한데 그 부분은 다른 위젯서비스에서 해결해야될 것 같습니다.

    • helpme 2016.02.25 13:29 LINK EDIT/DELETE

      그럼 이 js 파일로는 불가능 한거군요.... 도움 주셔서 감사합니다ㅠㅠ...

  11. sj 2016.02.29 17:31  LINK EDIT/DELETE REPLY

    자료 감사해요..
    저도 블로그에 담아두겠습니다^^

  12. trying 2016.03.02 22:47  LINK EDIT/DELETE REPLY

    안녕하세요, 꼼꼼한 포스팅 감사합니다..!
    열심히 보고 따라해서 성공을 짠! 하고 싶었는데; 어인일인지 화면에 등장해주지를 않습니다..
    우선 현재 까페 24 /js 디렉토리에 해당 instafeed.min.js를 올렸고, 테스트 페이지로 instafeed.html을 만들어서 div로 삽입해보았습니다.

    <!--@layout(/layout/basic/layout.html)-->

    <div module="Layout_Dummy">
    <script type="text/javascript" src="/js/instafeed.min.js">
    var userFeed = new Instafeed({
    get: 'user',
    userId: '6d2b6cb35bf044558f7cfefd6a26b2b8',
    accessToken: '1582077128.6d2b6cb.04c48b55c86d4c10906c3b6e20e30ad6'
    });
    userFeed.run();
    </script>

    </div>

    저는 베이직 html정도만 알아서 자바스크립트쪽의 지식은 전무합니다.. ㅠㅠ
    우선 저렇게 작성해서 해보았는데 로딩이 될 생각을 안하네요.. 뭐가 잘못 되었을까요..? ㅠㅠ?

  13. 김지태 2016.04.14 15:15  LINK EDIT/DELETE REPLY

    Failed to load resource: the server responded with a status of 404 ()
    이런.... 오류가 뜨는데... 어떤 문제일지 혹시 알수있을까요?...
    설명데로 전부 따라한것같은데;; access_Token을 얻어 오는것까지는 성공되었습니다.

  14. 2016.05.09 14:20  LINK EDIT/DELETE REPLY

    비밀댓글입니다

    • 2016.05.09 15:11 LINK EDIT/DELETE

      비밀댓글입니다

    • BlogIcon 이나 ☻ 2016.05.09 16:13 신고 LINK EDIT/DELETE

      인스타그램 api 정책이 바뀌어서 태그 지원은 힘듭니다. 다른 서비스를 이용하시는 게 좋겠습니다.

  15. 김동진 2016.05.09 14:21  LINK EDIT/DELETE REPLY

    헐 비밀댓글을 위에 남겼는데 제가 볼 수 있는방법이 뭐죠?
    제 댓글을 볼 수가 없다니...ㅠㅠ

    • BlogIcon 이나 ☻ 2016.05.09 16:13 신고 LINK EDIT/DELETE

      원래 티스토리가 그렇습니다. 댓글 수정을 이용하시거나 로그인하고 써주세요.

    • 김동진 2016.05.10 14:14 LINK EDIT/DELETE

      감사합니다. 태그지원 외에 그냥 유저지원으로만 가야겠네요~ ^^

  16. 2017.01.10 11:45  LINK EDIT/DELETE REPLY

    비밀댓글입니다