API 없이 인스타그램 HTML (by TagName)

 

1. #instagram-feed 영역 추가

          <div id="instagram-feed"></div>

 

2. 스크립트 임포트 / 스크립트 추가

<script src="js/jquery.instagramFeed.min.js"></script>
    <script >
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'tag': '해시태그',
                'container': "#instagram-feed",
                'display_profile': false,
                'display_gallery': true,
                'items': 10,
                'items_per_row': 5,
                'margin': 0,
                'callback': null,
                'styling': true
            });
        });
    })(jQuery);
</script>

3. 반응형 소스 추가

<style>
  @media (max-width: 375px){
  .instagram_gallery a, .instagram_gallery a img{ width: calc(50% - 0px) !important; }
  }
  @media (min-width: 375px){
    .instagram_gallery a, .instagram_gallery a img{ width: calc(33.3333% - 0px) !important; }
    #insta-box{min-height:810px;}

  }
  @media ( min-width: 768px){
    .instagram_gallery a, .instagram_gallery a img{ width: calc(33.3333% - 0px) !important; }

  }
  @media (min-width: 768px){
    .instagram_gallery a, .instagram_gallery a img{ width: calc(25% - 0px) !important; }
    #insta-box{min-height:620px;}
  }
  @media (min-width: 992px) {
    .instagram_gallery a, .instagram_gallery a img{ width: calc(20% - 0px) !important; }
    #insta-box{min-height:560px;}
  }
</style>

 

 

scontent-ssn1-1.cdninstagram.com/v/t51.2885-15/sh0.08/e35/s640x640/107457615_309015266907659_5616632477996359043_n.jpg?_nc_ht=scontent-ssn1-1.cdninstagram.com&_nc_cat=111&_nc_ohc=lv5XcFez34MAX9JJyfj&oh=f21a6e16cfb8892934386fa114f9ff7f&oe=5F38E659