본문 바로가기
개발/기타

인스타그램 API 연동하기(feat. 내 홈페이지에) #3

잠만보오 2020. 3. 10. 22:59
반응형

 

2020/01/06 - [개발/기타] - 인스타그램 API 연동하기(feat. 내 홈페이지에) #1

2020/02/18 - [개발/기타] - 인스타그램 API 연동하기(feat. 내 홈페이지에) #2

 

 

앞에 두 게시글에 이어 이번에는 내 홈페이지에 PHP와 jQuery를 이용해서 인스타그램 미디어를 불러와 보도록 하겠습니다.

 

 

 

 

기본 파일 준비

우선 인스타그램을 연동할 페이지에 jQuery를 실행할 수 있게 파일을 불러와야겠죠?

예를 들어 아래와 같은 html 기본 뼈대를 준비하고,

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>사과농장에 인스타그램 불러오기</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> ➊
</head>
<body>
  
</body>
</html>

<head>와 </head> 태그 사이에 jQuery를 불러오는 코드를 넣습니다.

➊ 부분이 CDN으로 jQuery를 불러오는 코드입니다.

 

이 파일을 index.php로 저장!!

 

자, 그럼 index.php는 준비가 됐으니까 이제 인스타 그럼 API와 통신하는 PHP파일을 만들어볼까요.

파일 이름은.. 음음.. instagram.php로? 🤨

빈 파일을 생성하고 아래 코드를 넣어줄게요.

 

<?php
$post = array (
  'fields' => 'id,media_type,media_url,permalink,thumbnail_url,username,caption', ➊
  'access_token' => 'AQD9seCCm7...', ➋
);
$url = "https://graph.instagram.com/0000000000000000/media?".http_build_query($post); ➌
try {
  $curl_connection = curl_init($url);
  curl_setopt($curl_connection, CURLOPT_CONNECTTIMEOUT, 30);
  curl_setopt($curl_connection, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($curl_connection, CURLOPT_SSL_VERIFYPEER, false);
  $result = curl_exec($curl_connection);
  curl_close($curl_connection);
} catch(Exception $e) {
  return $e->getMessage();
}

$data = json_decode($result, true);
$image_array= array();

foreach ($data['data'] as $key => $row) {
  $code = $row['id'];  $username = $row['username'];
  $type = $row['media_type'];
  $link = $row['permalink'];
  $thum = ($type === 'VIDEO') ? $row['thumbnail_url'] : $row['media_url'];
  $text = $row['caption'];
  array_push($image_array, array('username'=>$username, 'link'=>$link, 'thum'=>$thum, 'text'=>$text));
}

echo json_encode($image_array);
?>

➊ 인스타그램 API에서 받아올 데이터 종류

  • id : 인스타그램 미디어의 고유 번호
  • media_type : 인스타그램 미디어의 종류. 이미지인지 비디오인지
  • media_url : 인스타그램 미디어(사진)의 주소
  • permalink : 인스타그램 미디어 링크 주소
  • thumbnail_url : 인스타그램 썸네일 이미지(동영상의 경우는 사진이 아니니깐 썸네일을 줍니다.)
  • username : 인스타그램 사용자 이름
  • caption : 인스타그램 미디어 내용

➋ #2편 마지막에서 발급 받은 토큰 (AQD9seCCm7... 이 부분에 넣어 줍니다.)

➌ #2편 마지막에서 토큰과 함께 받은 user_id 값이구요.

 

 

 

instagram.php가 준비됐으니 index.php에서 jQuery를 이용해 사진을 불러와 보겠습니다.

처음에 만든 index.php 파일을 열고 </body> 태그 바로 위에 코드를 넣습니다.

(jQuery 부르는 코드 밑에다가 넣어주세요.)

<script>
$(document).ready(function() {
  $.ajax({
    url: "instagram.php",
    success: function (response) {
      var list = '';
      var result = JSON.parse(response);
      $.each(result, function(key, val) {
        /* 
        val.username : 사용자 이름 ➌
        val.link : 인스타그램 게시물 링크 주소 ➌
        val.thum : 썸네일이미지 주소 ➌
        vak.text : 인스타그램 게시물 내용 ➌
        */
        list += '<div class="instagram">'+
        '<div class="instagram-thum" style="background:url('+val.thum+') no-repeat top center;"></div></a>'+
        '</div>';
      });
      $('.playon-instagarm').append(list);
    }
  });
});
</script>

 

 

 

 

그리고 불러온 인스타그램 이미지들을 꾸며줄 CSS를 추가해 보겠습니다.

</head> 태그 바로 위에 CSS를 넣어 볼게요.

  <style>
    body {
      background: #fafafa;
    }

    .playon-instagarm {
      width: 800px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .instagram {
      width: 250px;
      margin-bottom: 30px;
    }

    .instagram-thum {
      width:250px;
      height:250px;
      background-size:cover;
    }
  </style>

 

 

 

 

그담에 마지막으로 인스타그램 내용이 들어갈 태그를 만들어 줍니다.

<body></body> 사이에 아래 태그를 넣습니다.

<div class="playon-instagarm"></div>

 

 

 

 

아래는 index.php의 최종 결과물이에요.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <title>사과농장에 인스타그램 불러오기</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style> ➊
    body {
      background: #fafafa;
    }

    .playon-instagarm {
      width: 800px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .instagram {
      width: 250px;
      margin-bottom: 30px;
    }

    .instagram-thum {
      width:250px;
      height:250px;
      background-size:cover;
    }
  </style>
</head>
<body>

<div class="playon-instagarm"></div> ➋

<script>
$(document).ready(function() {
  $.ajax({
    url: "instagram.php",
    success: function (response) {
      var list = '';
      var result = JSON.parse(response);
      $.each(result, function(key, val) {
        /* 
        val.username : 사용자 이름 ➌
        val.link : 인스타그램 게시물 링크 주소 ➌
        val.thum : 썸네일이미지 주소 ➌
        vak.text : 인스타그램 게시물 내용 ➌
        */
        list += '<div class="instagram">'+
        '<div class="instagram-thum" style="background:url('+val.thum+') no-repeat top center;"></div></a>'+
        '</div>';
      });
      $('.playon-instagarm').append(list);
    }
  });
});
</script>

</body>
</html>

➊ 불러온 사진을 꾸며주는 스타일시트 부분

➋ 여기다가 사진을 넣어줍니다.

➌ 요건 인스타그램 API에서 가져온 인스타그램 미디어 정보들

 

 

 

 

PHP파일은 컴퓨터에서 실행되지 않으니 PHP가 실행될 수 있도록 저장하고서 두 개의 파일을 서버에 올려줍니다.

저는 루트 디렉터리에 instagram 폴더를 만들어서 거기다가 업로드하겠습니다.

그리고 브라우저에서 https://playon.tistory.com/instagram 으로 딱!! 이동하면~~~ 쟌쟌쟌!!

 

 

Profit!! 🥳

 

아.. 개인적인 사진이라 모자이크 했더니 뭔가 이상하다;;;; 😳

 

 

 

반응형
저작자표시 비영리 변경금지

'개발 > 기타' 카테고리의 다른 글

SSL 인증서 .key 파일 비밀번호 제거  (0) 2022.02.18
SSH Key로 비밀번호 없이 로그인 하기 (feat. VScode에서도 써보기)  (2) 2020.07.15
인스타그램 API 연동하기(feat. 내 홈페이지에) #2  (36) 2020.02.18
Windows 10 USB만들기  (0) 2020.02.12
인스타그램 API 연동하기(feat. 내 홈페이지에) #1  (11) 2020.01.06

'개발/기타' Related Articles

티스토리툴바