Instagram API 를 이용하여 게시물 가져오기(수정본)

   <!-- ------------------------------- instagram ------------------------------- -->

    <div class="m_br"></div>

    <script src="/absolute/path/to/instafeed.min.js" type="text/html"></script>

    <div id="instagram_area">

      <div class="instagram_title">

        <h2 align="center">Instagram</h2>

      </div>

      <div class="instagram_contents" align="center">

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

        <button id="instagram-button">Instagram 에서 전체 게시물 보기</button>

        <script>

          // 사용자의 액세스 토큰을 여기에 입력

          var accessToken =

            "";

          // Instagram Graph API 엔드포인트

          var apiUrl =

            "https://graph.instagram.com/me/media?fields=id,caption,media_type,media_url,thumbnail_url,permalink&access_token=" +

            accessToken;

          // Instagram 게시물을 가져오고 표시하는 함수

          function fetchInstagramPosts() {

            $.ajax({

              url: apiUrl,

              method: "GET",

              dataType: "JSON",

              success: function (response) {

                console.log(response);

                var maxPosts = Math.min(response.data.length, 9); // 최대 포스트 수 제한

                var instaFeed = $("#instagram-feed");

                for (var i = 0; i < maxPosts; i += 3) {

                  var $instaRow = $("<div>").addClass("insta-row");

                  for (var j = 0; j < 3 && i + j < maxPosts; j++) {

                    var mediaUrl = response.data[i + j].media_url;

                    var permalink = response.data[i + j]?.permalink;

                    // 이미지에 링크 추가

                    var $imageLink = $("<a>")

                      .attr("href", permalink)

                      .attr("target", "_blank");

                    var $imageContainer = $("<div>")

                      .addClass("insta-image-container")

                      .append(

                        $imageLink.append($("<img>").attr("src", mediaUrl))

                      );

                    // 클로저 문제 해결을 위해 IIFE (즉시 실행 함수) 사용

                    (function (permalink) {

                      $imageContainer.click(function () {

                        window.open(permalink, "_blank");

                      });

                    })(permalink);

                    $instaRow.append($imageContainer);

                  }

                  instaFeed.append($instaRow);

                }

              },

              error: function (xhr, status, error) {

                console.error(xhr.responseText);

              },

            });

          }

          // 페이지 로드 시 Instagram 게시물 가져오기

          fetchInstagramPosts();

          // 인스타그램 페이지로 이동하는 버튼 클릭 이벤트 처리

          $("#instagram-button").on("click", function () {

            window.open("https://www.instagram.com/gogumawedding/", "_blank");

          });

        </script>

      </div>

      <div id="instagram_contents_bottom"></div>

    </div>

    <div class="m_br"></div>

이제 각각 이미지 마다 맞는 게시물로 이동한다 휴..

단, 아직 토큰은 영구토큰이 아닌거 같아서 영구토큰을 발급받는방법에 대해서 찾아봐야할거 같다.