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.18 18:23

    뭐 바꾸신거 없으신가요? 처음에 잘 나오가다가 10일날 Unable to show Instagram photos 나오는것을 확인했고, 연동한 제 홈페이지에서도 동일한 현상이 발생되었는데..
    오늘 확인해보니 hooni님은 다시 잘 나오는데.. 여전히 제 홈페이지는 안나오네요..
    잘나오가다가 소스바꾼것도 없고 네트워크 설정은 바꾼것도 없는데..
    왜 안나올까요..ㅠㅠ

    최근에 인스타 api가 이제는 비즈니스 토큰을 발급받아야 한다는 얘기가 있는데
    저는 일반토큰이라서 그런가요?
    혹시 hooni님은 비즈니스 토큰값은 아니신가요?

  • profile
    hooni 2018.10.19 02:02
    토큰은 저도 특별한 케이스는 아니라서 잘 모르겠습니다.
    증상으로만 봐서는 저도 잘 모르겠습니다.
    JS 에러 로그를 살펴봐야 할거 같은데요.
  • ?
    코딩아빠 2018.10.15 11:56
    와...잘 됩니다.
  • profile
    hooni 2018.10.19 02:02
    댓글 감사합니다^^
  • ?
    10 2018.11.01 16:33
    Unable to show Instagram photos라고 나와요
  • profile
    hooni 2019.05.15 06:56
    혹시 API 권한 등 환경적인 부분은 확인하셨는지요?
  • ?
    정상준 2019.05.08 18:05 SECRET

    "비밀글입니다."

  • profile
    hooni 2019.05.15 06:57
    호출하실 때 count="+this.options.limit.. 부분의 파라미터를 20보다 크게 해주시면 됩니다.

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
841 Develop 프로그램 문서 관리 (Doxygen) hooni 2013.04.23 16382
840 Develop 프로그래밍에서 foo, bar 함수의 유래 file hooni 2013.06.25 21202
839 Develop 프로그래밍 소스 관련 사이트.. hooni 2013.04.23 16483
838 Develop 페이팔에서 돈 찾기 (Paypal withdraw) file hooni 2014.02.20 10944
837 Develop 캘리포니아 운전면허 족보 file hooni 2017.06.12 708
836 Develop 최근 논문 자료 (2011/01/03, 만현형한테 보낸거..) secret hooni 2013.04.23 10366
835 Develop 참고하고 지울 자료.. 집에서 바야지.. ㅋㅋ file hooni 2013.04.23 12112
834 Develop 정리할 자료. file hooni 2015.07.02 667
833 Develop 자주 쓰는 Docker 명령어 alias hooni 2020.01.10 267071
832 Develop 이어서 작업할 내용~ secret hooni 2013.11.21 0
831 Develop 웹페이지 성능 테스트 툴 설명 hooni 2013.04.23 27442
830 Develop 알고리즘 성능분석 file hooni 2014.06.24 2942
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 71 Next
/ 71