Instagram의 소셜 플러그인을 Rails에서

Facebook이나 Twitter의 소셜 플러그인은 유명합니다만, 의외로 일본어 정보가 없는 것이 Instagram이 아닐까요? Instagram의 개발자 사이트에도 쓰지 않고 Wordpress 플러그인 정보와 얼마 안됩니다.

그러나 사실 다른 플러그인처럼 쉽게 붙여 넣을 수 있습니다.
일반 설치 방법과 비교하는 형태로 Rails-slim에서의 설정 방법을 기재합니다.

자세한 것은 이쪽에 실려 있습니다.
htps //w w. j 쿠에 rysc pt. 네 t/소시아-메아아/인 s타g 등 mP 호토 s-우우테오 t-아피인 s타g 등 m후에 d. HTML

JQuery Instagram 플러그인 다운로드

htps //w w. j 쿠에 rysc pt. 네 t/두w 응아 d/인 s타g등 mP 똥 s-우우테오 t-아피인 s타g등 m후에에 d. 지 pvendor/assets/javascripts/ 아래로 확장합니다. 필요한 것은 jquery.instagramFeed.js 입니다.

config/initializers/assets.rb에 다음 행 추가

Rails.application.config.assets.precompile += %w( jquery.instagramFeed.js )

플러그인을 붙이고 싶은 곳에 다음 태그를 붙입니다.

html

<div id="instagram-feed-demo" class="instagram_feed"></div>

슬림이라면

슬림

  .instagram_feed#instagram-feed-demo

됩니다.

JS를 로드합니다.

html

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous"></script>
<script src="jquery.instagramFeed.js"></script>

슬림이라면

슬림

= javascript_include_tag "//code.jquery.com/jquery-3.3.1.min.js"
= javascript_include_tag "jquery.instagramFeed.js"

하지만 JQuery는 이중으로 읽으면 문제를 일으키므로 다른 곳에서 사용하고 있지 않은지 확인하여 code.jquery.com/jquery-3.3.1.min.js 행을 추가할지 결정하십시오.

플러그인 동작 설정 JQuery 작성

위의 html 파일에 직접 붙여 넣으면

html

<script>
$(window).on('load', function(){
  $.instagramFeed({
    'username': 'instagram',
    'container': "#instagram-feed-demo",
    'display_profile': true,
    'display_biography': true,
    'items': 8,
    'items_per_row': 4,
    'margin': 0.5
  });
});
</script>

username은 Instagram의 사용자 이름입니다. container는 2.의 ID와 일치합니다.
display_profile: 프로필 보기 숨기기
display_biography : 바이오 표시 숨기기
items: 표시할 이미지 수
items_per_row : 한 줄의 표시 이미지 수
margin : 표시된 이미지 사이의 마진
자신만의 스타일을 적용할 수도 있습니다.
'styling': false
목록에 추가하고 CSS에

css

.instagram_profile {
  /* CSS styles here */
}

.instagram_profile_image {
  /* CSS styles here */
}

.instagram_username {
  /* CSS styles here */
}

.instagram_biography {
  /* CSS styles here */
}

.instagram_gallery {
  /* CSS styles here */
}

로 스타일을 넣습니다.

슬림이라면

슬림

  javascript:
    $(window).on('load', function(){ $.instagramFeed({ 'username': 'vegewel', 'container': "#instagram-feed", 'display_profile': true, 'display_biography': true, 'styling': true }); });

라고 쓰는 법

이렇게 붙인 플러그인은 이쪽입니다.