소개

생각보다 쉽게 instagram을 구현할 수 있었기 때문에.
적어두고 싶습니다.

구현

여기에서 소스를 얻고 "jquery.instagramFeed.min.js"를 파일에 넣습니다. (이번에는 js의 파일 내에 설치하고 있습니다.) ↓

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
</head>

<body>

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

<script src="./js/jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'instagram',       usernameを記入                
                'container': "#instagram-feed1",    idを取得:上に表示されます
                'display_profile': true,
                'display_biography': true,
                'display_gallery': true,
                'display_captions': true,
                'max_tries': 8,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1,
                'lazy_load': true,
                'on_error': console.error
            });
        });
    })(jQuery);
</script>
</body>
</html>

이제 username에 쓴 instagram이 표시됩니다! !
나머지는 CSS에서 원하는대로 다른 장식을 ...

끝에

꽤 쉽게 구현할 수있었습니다! !
편리하네요.

참고

세세한 설정은 여기에서 볼 수 있습니다. ↓

Rails로 구현. 이곳은 나중에 확인.

Reference

이 문제에 관하여([jquery] InstagramFeed 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sumiiii/items/8c14294f74e9fa5b2a9e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다