[Instagram] [jQuery] 인스타그램 API 접근과 사진 불러오기 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

SNS [Instagram] [jQuery] 인스타그램 API 접근과 사진 불러오기

페이지 정보

댓글 0건 조회 4,281회 작성일 17-08-06 03:55

본문

1. 인스타 그램 자신의 계정에 로그인 한 후, 자신의 아이디를 클릭하고 해당 화면 아래쪽에 API 페이지로 이동.


2. 상단 메뉴의 Manage Clients 메뉴를 통해 새로운 클라이언트 생성.


3. Client ID와 Redirect URI를 이용해 다음 주소로 이동.
https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token 
* 위 코드에서 CLIENT-ID와 REDIRECT-URI부분을 자신의 ID와 URI로 수정한다.
CLIENT-ID = 앞에서 인스타그램에서 제공한 아이디
REDIRECT-URI = http://localhost


4. 응답된 내용에서 UserID 와 access_token 을 추출합니다.
http://localhost/#access_token=xxxxxxxx.yyyyyyyyy.zzzzzzzzzzzzzzzzz


<div id="instaPics"></div> 

<style type="text/css">  
#instaPics {  
    max-width: 320px;  
    overflow: hidden;  
}  
.insta-box {  
    position: relative;  
    width: 120px;  
    height: 120px;  
    float: left;  
    margin: 4px;  
    border: 1px solid #ddd;  
}  
.image-layer {  
    overflow: hidden;  
    width: 100%;  
    height: 100%;  
}  
.image-layer img {  
    max-width: 100%;  
}  
.caption-layer {  
    display: none;  
    position: absolute;  
    top: 0;  
    background: rgba(255,255,255,0.8);  
    height: 100%;  
    width: 100%;  
    padding: 10px;  
    box-sizing: border-box;  
    font-size: 10px;  
    color: #333;  
}  
.insta-likes {  
    float: right;  
}  
</style> 

<script type="text/javascript">  
   jQuery(function($) {  
        var tocken = ""; /* Access Tocken 입력 */  
        var count = "6";  
        $.ajax({  
            type: "GET",  
            dataType: "jsonp",  
            cache: false,  
            url: "https://api.instagram.com/v1/users/self/media/recent/?access_token=" + tocken + "&count=" + count,  
            success: function(response) {  
             if ( response.data.length > 0 ) {  
                  for(var i = 0; i < response.data.length; i++) {  
                       var insta = '<div class="insta-box">';  
                       insta += "<a target='_blank' href='" + response.data[i].link + "'>";  
                       insta += "<div class'image-layer'>";  
                       //insta += "<img src='" + response.data[i].images.thumbnail.url + "'>";  
                       insta += '<img src="' + response.data[i].images.thumbnail.url + '">';  
                       insta += "</div>";  
                       //console.log(response.data[i].caption.text);  
                       if ( response.data[i].caption !== null ) {  
                            insta += "<div class='caption-layer'>";  
                            if ( response.data[i].caption.text.length > 0 ) {  
                                 insta += "<p class='insta-caption'>" + response.data[i].caption.text + "</p>"  
                            }  
                            insta += "<span class='insta-likes'>" + response.data[i].likes.count + " Likes</span>";  
                            insta += "</div>";  
                       }  
                       insta += "</a>";  
                       insta += "</div>";  
                       $("#instaPics").append(insta);  
                  }  
             }  
             $(".insta-box").hover(function(){  
                  $(this).find(".caption-layer").css({"backbround" : "rgba(255,255,255,0.7)", "display":"block"});  
             }, function(){  
                  $(this).find(".caption-layer").css({"display":"none"});  
             });  
            }  
           });  
   });  
   </script>


자료출처
http://jimkimau.blogspot.kr/2015/08/instagram-api-with-javascript.html 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 2,248건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. ( update. 2017-12-05 16:33 ) Hit.16080
2247 PHP
2246 그누보드
2245 JSP
2244 JSP
2243 HTML
2242 일반
2241 그누보드
2240 Linux
2239 제로보드
[XpressEngine] files 폴더의 비밀 ( update. 2018-07-13 21:51 ) Hit.39
2238 MySQL
2237 JavaScript
[jQuery] Magnific Popup ( write. 2018-07-12 ) Hit.53
2236 일반
전자책 읽기에 최적화된 무료 EPUB 뷰어 ( update. 2018-07-11 17:27 ) Hit.66
2235 HTML
2234 HTML
2233 그누보드
ZeroBoard 4를 그누보드 5 로 변경 ( update. 2018-07-02 21:40 ) Hit.85
2232 Search
Bing (빙) 웹마스터도구 사이트 등록하기 ( update. 2018-07-01 02:41 ) Hit.114
2231 일반
IU 노래 181곡을 Youtube에서 연속듣기 ( update. 2018-07-04 23:09 ) Hit.124
2230 그누보드
2229 그누보드
XE -> 그누보드5 변경 v7 ( update. 2018-06-12 13:13 ) Hit.246
2228 제로보드
2227 호스팅
무료 호스팅을 제공하는 업체 ( update. 2018-06-12 03:53 ) Hit.194
2226 제로보드
[XpressEngine] 버전 확인하기 ( write. 2018-06-11 ) Hit.159
2225 제로보드
2224 호스팅
let's encrypt 지원하는 호스팅 ( write. 2018-06-07 ) Hit.174
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
671
어제
1,405
최대
3,174
전체
4,134,697

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.