Contents

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

instagram01.jpg



# How to add my Instgram Feed my own website.

인스타그램 API로 최신 피드 이미지 가져오기 (Using Instagram API)



# Task

내 홈페이지에 나의 인스타그램 피드를 보여주고 싶다.

내 홈페이지에 다른 사람의 인스타그램 피드를 보여주고 싶다.



# To-Do

Instagram API  토큰을 얻은 후 Javascript를 이용해 피드를 가져온다.


1. 인스타그램 API Access-Token 발급

 - 개발자 사이트(instagram.com/developer)에 Client 등록 후 Access-Token 발급

 - Access_Token 발급 방법은 http://hooni.net/91805 참고.


2.  첨부된 파일 업로드 (JS/CSS)

UI와 AJAX 통신을 위한 CSS와 JS파일로 각자의 환경이나 디자인에 맞게 수정해서 사용.

sb-instagram.js의 내부에서 jQuery를 사용. (버전은 2.1.4와 같지 않아도 된다)

 - jQuery Library : jquery-2.1.4.min.js

 - UI & Display : sb-instagram.css

 - AJAX & Data : sb-instagram.js


3. 숫자로 된 USERID 확인

서버사이드 방식으로 Access-Token을 발급한 경우 응답으로 오는 JASON 데이터의 "id" 필드의 값으로 제공된다. 이를 메모하지 않았다면 다른 방법으로 확인할 수 있다.

 1) Access-Token을 얻을 때 응답 JASON의 "id" 필드 값 (서버사이드 방식에 한함)

 2) 또는, 인스타그램이 제공하는 URL에 Access-Token을 보내서 확인

   - https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN

 3) 또는, 서드파티에서 제공하는 API를 통해 확인

   - 예) https://smashballoon.com/instagram-feed/find-instagram-user-id/


4. 피드를 출력할 위치에 HTML 코드 삽입

 - 숫자로 된 USERID 적용

 - 출력될 데이터와 컬럼 갯수 등 파라미터 적용

 - 여러 계정에서 가져오고 싶으면 USERID 를 “,”로 연결하면 됨.


<link rel="stylesheet" href="./css/sb-instagram.css" type="text/css" media="all" />

<div
	id="sb_instagram"
	class="sbi sbi_col_6"
	style="width:100%; padding-bottom: 10px;"
	data-id="{인스타그램숫자로 된 USERID}"
	data-num="12"
	data-res="high"
	data-cols="6"
	data-options='{&quot;sortby&quot;: &quot;none&quot;, &quot;headercolor&quot;: &quot;&quot;, &quot;imagepadding&quot;: &quot;5&quot;}'>
		
	<div class="sb_instagram_header" style="padding: 10px; padding-bottom: 0; display: none"></div>
	<div id="sbi_images" style="padding: 5px;">
		<div class="sbi_loader fa-spin"></div>
	</div>
	<div id="sbi_load"></div>
</div>

<script language="javascript" type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	var sb_instagram_js_options = {"sb_instagram_at" : "{Access_Token}"};
</script>
<script type="text/javascript" src="./js/sb-instagram.js"></script>


5. 적용 예

https://hooni.net/toy/instagram/




[관련자료]

인스타그램 API Access_Token 발급 방법

https://hooni.net/91805



?
  • ?
    tae 2018.05.07 17:51
    안녕하세요! 좋은 정보 감사합니다.
    ~/toy/instagram 로 접근시에 "Unable to show Instagram photos" 라고 나옵니다. 왜 그런거죠?
  • profile
    hooni 2018.05.08 09:52
    안녕하세요,
    일단 썸네일을 가져오기는 하지만 Follower가 아닌 경우 비공개 포스트라서 클릭하면 볼 수 없다고 나옵니다.
  • ?
    여치 2018.06.08 15:16
    내용이 좋아서 가입하려고 하는데 인증메일이 안오네요
  • profile
    hooni 2018.06.28 15:17

    현재는 인증메일 없이 가입하실 수 있습니다.

  • ?
    유진 2018.07.23 09:41
    다운로드할수있는 권한이 없다고 뜹니다 ㅠㅠ
  • profile
    hooni 2018.08.07 02:53
    이 경로에서 소스보기 하셔서 다운 받으시면 됩니다^^
    https://hooni.net/toy/instagram/
  • ?
    2018.08.02 10:41
    인스타 연동이 필요해서 고민하다 가입했는데 왜 이틀이나 로그인이 불가능한가요
  • profile
    hooni 2018.08.07 02:55
    로그인 없이 다음 경로에서 소스보기 하셔서 다운 받으실 수 있습니다.
    https://hooni.net/toy/instagram/
  • ?
    리딕 2018.08.03 15:58
    좋은 정보 감사드립니다 해시태그도 연동하고 싶은데 그건 어떻게 해야 하나요?
  • ?
    Ted 2018.08.17 09:54
    질문있어요~ 데이터 카운트는 12개로 하셨는데 맥스는 몇개인지 혹시 알수 있을까요?
    테스트를 하고 있는데 최대 20 개 밖에 나오지를 않는것 같은데 등록되어있는 컨텐츠 전체를 가져오는 방법이 있는지 궁금합니다.
  • ?
    안녕하세요 2018.10.10 23:36

    5. 적용예 누르면 Unable to show Instagram photos 나오는데요??

  • profile
    hooni 2018.10.11 02:13

    방금 확인해보니 잘 나오는데요. 혹시 아직도 그러신가요?

    네트워크에 따라 방화벽 등으로 인스타그램 API의 URL이 차단된 경우에 그러지 않을까요?

  • ?
    코딩아빠 2018.10.15 11:56
    와...잘 됩니다.

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
1122 System/OS Mac에서 Node.js 설치하기 file hooni 2018.09.28 40
1121 System/OS 서버 확장을 위한 두 가지 방법 file hooni 2018.08.29 129
1120 Develop [ios] Requesting Location Permissions in iOS file hooni 2018.08.18 96
1119 Develop [PHP] Mac OS에서 PHP 7 설치하기 file hooni 2018.05.11 352
1118 Develop [php] Connect to Firebase Console in Laravel file hooni 2018.05.09 297
1117 Develop [api] 인스타그램 API Access_Token 발급 방법 (Instagram API) 2 file hooni 2018.04.05 1676
» Develop [api] 인스타그램에서 최신 이미지 가져오기 (Using Instagram API) 13 file hooni 2018.04.05 3113
1115 Develop [js] Click button copy to clipboard hooni 2018.04.05 194
1114 Develop [php] Laravel 4. twitter bootstrap 적용하기 hooni 2018.04.05 242
1113 System/OS How to Setup an Email Server on CentOS 7 hooni 2018.04.05 130
1112 Develop How to Test SMTP AUTH using Telnet hooni 2018.04.05 122
1111 Develop [python] DJI Tello 드론 코딩 (프로그래밍) 1 file hooni 2018.03.04 1660
1110 System/OS [mac] 맥에서 기본 실행 앱 변경하기 file hooni 2018.03.02 157
1109 System/OS 콘솔에서 패스워드 걸린 zip 압축하는 명령 hooni 2018.03.02 143
1108 Develop What is difference between Get, Post, Put and Delete? hooni 2018.02.28 134
1107 Develop [php] Laravel Route에서 PC/Mobile 분기 hooni 2018.01.24 272
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 71 Next
/ 71