인스타그램 피드 가져오기 그누보드에 적용중인데 잘 안되네욤 ㅠ
본문
<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>
이라고 적용했는데요
토큰도 정상으로 받아서 입력했는데 그냉 하얀페이지만 나오네욤 ㅠㅠ
모가 문제일가요? 인스타그램 개발자 에서 모 환경설정을 해야되는지 ㅠ
!-->
답변을 작성하시기 전에 로그인 해주세요.