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

</p>

<p><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></p>

<p>

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

<p>

<script type="text/javascript">  

   jQuery(function($) {  

        var tocken = "000"; /* Access Tocken 입력 */  

        var count = "6";  

        $.ajax({  

            type: "GET",  

            dataType: "jsonp",  

            cache: false,  

            url: "<a href="https://api.instagram.com/v1/users/self/media/recent/?access_token="" target="_blank" rel="noopener noreferrer">https://api.instagram.com/v1/users/self/media/recent/?access_token="</a> + 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>  </p>

<p>