인스타그램 자바스크립트 API

1. 인스타그램 개발자 사이트 (https://www.instagram.com/developer/)에 접속하여 로그인한다.

2. register your application을 누른 뒤 register a new client 클릭

3. client 등록 양식을 작성한다. 어플리케이션 이름과 설명, OAuth redirect_uri은 각 프로젝트에 맞게 입력한다.

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

5. (4)에서 메모한 client id를 아래 주소 YOUR_CLIENT_ID 대신 입력한다.

OAuth redirect_uri 를 HTTP://WWW.YOUR_DOMAIN.COM/INDEX.PHP  대신 입력한다.

https://api.instagram.com/oauth/authorize/?client_id=YOUR_CLIENT_ID&redirect_uri=HTTP://WWW.YOUR_DOMAIN.COM/INDEX.PHP&response_type=code

수정된 위 주소로 접속하여 authorize 버튼 클릭 후 access_Token 값을 메모한다.

access_Token 값은 위 주소로 접속하면 주소창에 표기 된다.

6. 터미널(osx) 또는 SSH 혹은 서버프로그램 언어의 curl을 이용해 access_token을 얻어온다.

터미널(ssh)에서 curl로 아래 코드를 입력한다.

curl \-F 'client_id=YOUR_CLIENT_ID' \

 -F 'client_secret=YOUR_SECRET' \

 -F 'grant_type=authorization_code' \

 -F 'redirect_uri=HTTP://WWW.YOUR_DOMAIN.COM/INDEX.PHP \

 -F 'code=access_Token' \

https://api.instagram.com/oauth/access_token

위의 코드를 실행하면 아래와 같은 값으로 리턴을 받게 된다.

{"access_token":"1234567890.08e67b6.12083fdfc6664f1c9cfcf492827b4da6","user":{"username":"myusername","bio":"#\uac15\uc544\uc9c0\ubd84\uc591#\uc560\uacac\ubbf8\uc6a9#\uc560\uacac\ud638\ud154#\uad50\ubc30\n032 432 8557\n010 3392 8557\nKakao : devcrespe\nE-mail : dev@crespe.co.kr\n\uc778\ucc9c \ub0a8\uad6c \uc8fc\uc5486\ub3d9 1593-43\nhttp:\/\/www.your_domain.com\n\ub124\uc774\ubc84\uc5d0 \"\ud3ab\uc564\ud3ab\"","website":"http:\/\/www.crespe.co.kr\/y387fhdu3t1","profile_picture":"https:\/\/igcdn-photos-g-a.akamaihd.net\/hphotos-ak-xtf1\/t51.2885-19\/10953311_367047736832102_1392216073_a.jpg","full_name":"\uc804\uad6d \uac15\uc544\uc9c0\ubd84\uc591 \ud3ab\uc564\ud3ab","id":"1436855529"}}

좀더 자세한 사항은 https://www.instagram.com/developer/authentication/ 을 참조.

7. http://instafeedjs.com/ 에 접속하여 download 버튼을 클릭하여 js 파일을 다운로드 받아 프로젝트 사이트에 업로드한다.

http://instafeedjs.com/ 를 참조하여 api를 자유롭게 이용하면 된다.

아래 코드는 http://instafeedjs.com/ 를 참조하여 만든 코드이며, 실 서비스에서 사용중인 코드이다.

    var userFeed = new Instafeed({
        // account id : 1436855529
        get: 'user',
        userId: 1436855529, // user id는 http://jelled.com/instagram/lookup-user-id 에서 검색하여 입력한다.
        accessToken: '01234567890.08e67b6.12083fdfc6664f1c9cfcf492827b4da6', // access_token
        target: 'instagram_list',
        resolution: 'low_resolution',
        template : ''+ 
            '<a href="{{link}}" target="_blank">'+
                '<img src="{{image}}"/>'+
                '<i class="fa fa-play-circle-o fa-4x play-icon"></i>'+
                '<div class="shadow">'+
                    '<i class="fa fa-heart"></i> {{likes}}개'+
                    '<span class="space"></span> '+
                    '<i class="fa fa-comment"></i> {{comments}}개'+
                '</div>'+
            '</a>',
        limit:8,
        after: function(){
            // do noting
        }
    });
    window.onload = function(){
        userFeed.run();
    }