인스타그램 API Java Script로 연동하기, 최근 게시물 불러오기

인스타그램 API를 사이트에 연동하여 최근 게시글 가져오는 방법

비디오 썸네일도 포함하여 가져오는 방법

참고 : 개발 블로그

인스타그램 API 사용을 위한 토큰값 발급 방법은 위에 참고 링크가 제일 정리가 잘되어 있으니
방문하여 무사히 토큰값 얻으시길...

스크립트

토큰값이 존재한다는 가정하에 진행

데이터를 가져오는 파라미터를 공식 홈페이지에서 참고
https://developers.facebook.com/docs/graph-api/reference/instagram-user?locale=ko_KR

//해당 GET URL에 적용시켜 제출을 하면 게시글에 관한 데이터를 받을 수 있다.
https://graph.facebook.com/v14.0/페이지ID값/feed?fields=id,name,full_picture,message,link
&access_token=엑세스 토큰

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

// 인스타그램 api 스크립트
$(function(){

  var token = "토큰키값";

/*
  발급된 토큰은 장기 실행 액세스 토큰으로 60일간 사용이 가능합니다.
  https://developers.facebook.com/docs/instagram-basic-display-api/guides/long-lived-access-tokens

  발급된 토큰은 만료일(60일)이내에 refresh_access_token혹은, 페이스북 개발자 센터내의 토큰 재발급을 통해 연장을 해주어야합니다.
  https://developers.facebook.com/docs/instagram-basic-display-api/reference/refresh_access_token
*/

$.ajax({
  type: "GET",
  dataType: "jsonp",
  cache: false,
  url: "https://graph.instagram.com/me/media?access_token=" + token + "&fields=id,caption,media_type,media_url,thumbnail_url,permalink",
  success: function(response) {
      console.log(response);
      if (response.data != undefined && response.data.length > 0) {
          for(i = 0; i < 4; i++){
              if(response.data[i]){
                  var item = response.data[i];
                  var image_url = "";
                  var post = "";
										
				// 영상 게시글 가져오기
                  if(item.media_type === "VIDEO"){
                      image_url = item.thumbnail_url;
                  }else{
                      image_url = item.media_url;
                  }

                  post += '<div class="instagram_item instagram_item'+i+'">';
                      post += '<a href="'+ item.permalink +'" target="_blank" rel="noopener noreferrer" style="background-image: url(' + image_url + ');">';
                          post += '<img src="' + image_url + '">';
                          // post += '<p>'+ item.caption +'</p>';
                      post += '</a>';
                  post += '</div>';

                  $('#instagram-feed').append(post);
              }else{
                  // if no curent item
                  show_fallback('#insta-item-'+i)
              }
          }
      }else{
          // if api error
          show_fallback('.instagram-item')
      }
  },
  error :function(){
      // if http error
      show_fallback('.instagram-item')
  }

});

  function show_fallback(el){
    $(el).addClass('loaded fallback');
  }
})

검색하며 찾아보았을 때 영상은 제외하고 가져올 수 있다는 얘기가 많아서
이것저것 방법을 찾아보다가

// 영상 게시글 가져오기
if(item.media_type === "VIDEO"){
	image_url = item.thumbnail_url;
}else{
	image_url = item.media_url;
}

조건문을 넣어주니, 영상일 경우에 영상 썸네일을 자동으로 가지고 오게 되었다.

오픈 전 백엔드에서 해당 페이지에 들어가는 다른 영역 개발을 진행하시면서,
토큰 노출을 막기 위해 토큰값을 DB에 저장해서 마무리 해주셨다.
게시글 가져오는 건데 뭐 어때~ 싶을 수 있지만,
사용자의 접근 토큰의 탈취나 파밍, 재킹 등에 의한 보안사고를 미연에 방지하기 위해 토큰키 노출은 조심하는 게 좋으니 프론트 작업 후 백엔드 개발자분과 상의를 해보는 것도 좋을 거 같다. 💁‍♀️