2018.1.30 스킨 제작 일지 - 인스타그램 피드 불러오기

아이콘을 클릭하면 인스타그램으로 리다이렉트 시키는건 너무 밋밋해서, 자기 전 시간을 조금 내어 수정해봤다.

라고 끝내기엔 너무 짧은 글이 될 것 같아 짧게 첨언하자면,

function toggleLayer(layer) {
    var l = document.getElementById(layer);    
    if (l.style.display == "")
    l.style.display = "none";
    else if (l.style.display == "none")
    l.style.display = "";
}

이렇게 짧은 숨긴 div를 표시할 수 있게 해주는 스크립트를 짜고

<a href="javascript:toggleLayer('insta_hide');"><img src="./images/INSTA-ICON.png" class="nav_box"></a>
<div id="insta_hide" style="display:none">
</div>

div를 작성하면 된다.

이제 "insta_hide" div 안에 인스타그램 피드를 불러오면 끝이다.

http://instafeedjs.com/에서 인스타그램 피드를 불러오는 자바스크립트를 받은 후에

<div id="instafeed"></div>
    <script type="text/javascript" src="./images/instafeed.js"></script>
    <script type="text/javascript">
        var userFeed = new Instafeed({
        get: 'user',
        userId: ID,
        sortBy: "most-recent",
        limit: 4,
        template: '<a class="animation" href="{{link}}" target="_blank"><img src="{{image}}" /></a>',
        accessToken: 'TOKEN'
    });
    userFeed.run();
 
</script>

ID와 TOKEN 칸에 숫자로 된 인스타그램 ID와 액세스 토큰을 입력해주면 된다.

숫자로 된 ID는 액세스 토큰에서 첫 .이 나오기 전까지 숫자들이다.

#insta_hide {
    text-align: center;
    position: fixed;
    bottom: 50px;
    right: 20px;
}
#insta_hide a{text-decoration:none;background-color:white;color:black;}
#insta_hide a:hover{color:aqua}

css에서 피드가 노출될 div의 위치와, a태그를 손본다.

#instafeed {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

#instafeed img {
    width: 150px;
    -moz-transition: -moz-transform 0.2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    -ms-transition: -ms-transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    margin: .2rem;
}

#instafeed img:hover {
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075);
}

그 후 flex 디스플레이 속성을 이용해서 간단하게 중앙정렬을 한 후에,

이미지의 가로 길이와 마진값을 설정하고,

마우스 hover 효과를 넣어주면 끝난다.