인스타그램 위젯을 자신의 웹사이트에 다는 법

  웹사이트를 소유한, 인스타그램 유저라면 자신의 인스타그램 이미지를 위젯으로 만들어 자신의 사이트에 올리고 싶다는 생각이 종종 들 것이다. 필자 또한 그러했다. 필자의 홈에 인스타그램 이미지를 연동시켜 갤러리 게시판을 대체하고, 나름 컨텐츠를 많아보이게 하려는 수작(?)을 하려 한 것이다. 이를 돕는 사이트로 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 객체