채택완료

인스타그램 피드 가져오기 그누보드에 적용중인데 잘 안되네욤 ㅠ

2017-12-16 (토) 16:10:09 4,223
Copy
<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>


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


<script type="text/javascript">  
   jQuery(function($) {  
        var tocken = "000"; /* 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>

이라고 적용했는데요

토큰도 정상으로 받아서 입력했는데 그냉 하얀페이지만 나오네욤 ㅠㅠ

모가 문제일가요? 인스타그램 개발자 에서 모 환경설정을 해야되는지 ㅠ

|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트

현재 소스에서 보기에는 제이쿼리를 로드하고 있는 부분은 없는데요.

제이쿼리 버전은 현재 로드된 코드가 있나요?

답변에 대한 댓글 1개

제이쿼리 로드가 없어욤 제리쿼리 로드 해야되는군요? ㅠㅠㅠ 에공 ㅠㅠ

답변을 작성하려면 로그인이 필요합니다.