[api] 인스타그램에서 최신 이미지 가져오기 (Using Instagram API)
첨부 '4' |
---|
# 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='{"sortby": "none", "headercolor": "", "imagepadding": "5"}'>
<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 발급 방법
- ?
-
안녕하세요,
일단 썸네일을 가져오기는 하지만 Follower가 아닌 경우 비공개 포스트라서 클릭하면 볼 수 없다고 나옵니다. -
?
내용이 좋아서 가입하려고 하는데 인증메일이 안오네요
-
현재는 인증메일 없이 가입하실 수 있습니다.
-
?
다운로드할수있는 권한이 없다고 뜹니다 ㅠㅠ
-
이 경로에서 소스보기 하셔서 다운 받으시면 됩니다^^
https://hooni.net/toy/instagram/ -
?
인스타 연동이 필요해서 고민하다 가입했는데 왜 이틀이나 로그인이 불가능한가요
-
로그인 없이 다음 경로에서 소스보기 하셔서 다운 받으실 수 있습니다.
https://hooni.net/toy/instagram/ -
?
좋은 정보 감사드립니다 해시태그도 연동하고 싶은데 그건 어떻게 해야 하나요?
-
?
질문있어요~ 데이터 카운트는 12개로 하셨는데 맥스는 몇개인지 혹시 알수 있을까요?
테스트를 하고 있는데 최대 20 개 밖에 나오지를 않는것 같은데 등록되어있는 컨텐츠 전체를 가져오는 방법이 있는지 궁금합니다. -
?
5. 적용예 누르면 Unable to show Instagram photos 나오는데요??
-
방금 확인해보니 잘 나오는데요. 혹시 아직도 그러신가요?
네트워크에 따라 방화벽 등으로 인스타그램 API의 URL이 차단된 경우에 그러지 않을까요?
-
?
뭐 바꾸신거 없으신가요? 처음에 잘 나오가다가 10일날 Unable to show Instagram photos 나오는것을 확인했고, 연동한 제 홈페이지에서도 동일한 현상이 발생되었는데..
오늘 확인해보니 hooni님은 다시 잘 나오는데.. 여전히 제 홈페이지는 안나오네요..
잘나오가다가 소스바꾼것도 없고 네트워크 설정은 바꾼것도 없는데..
왜 안나올까요..ㅠㅠ
최근에 인스타 api가 이제는 비즈니스 토큰을 발급받아야 한다는 얘기가 있는데
저는 일반토큰이라서 그런가요?
혹시 hooni님은 비즈니스 토큰값은 아니신가요? -
토큰은 저도 특별한 케이스는 아니라서 잘 모르겠습니다.
증상으로만 봐서는 저도 잘 모르겠습니다.
JS 에러 로그를 살펴봐야 할거 같은데요. -
?
와...잘 됩니다.
-
댓글 감사합니다^^
-
?
Unable to show Instagram photos라고 나와요
-
혹시 API 권한 등 환경적인 부분은 확인하셨는지요?
- ?
-
호출하실 때 count="+this.options.limit.. 부분의 파라미터를 20보다 크게 해주시면 됩니다.
번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|---|
813 | Develop | [ios] iOS In App Purchase 코드 부분 샘플 2 | hooni | 2013.11.20 | 11340 |
812 | Develop | [ios] iOS In App Purchase 코드 부분 샘플 1 | hooni | 2013.11.20 | 11806 |
811 | Develop |
[ios] iOS In App Purchase #2 (코드 구현)
![]() |
hooni | 2013.11.20 | 13812 |
810 | Develop |
[ios] iOS In App Purchase #1 (코드 구현 전 웹 설정 작업)
![]() |
hooni | 2013.11.20 | 14558 |
809 | Develop | [ios] iphone SetDeviceOrientation 화면 강제 회전 | hooni | 2013.11.20 | 18518 |
808 | Develop | [js] window.open() 속성 사용 방법 | hooni | 2013.11.18 | 13640 |
807 | Develop | [php] php5.3부터는 eregi()대신 preg_match()를 사용 | hooni | 2013.11.18 | 12533 |
806 | Develop |
[java] 초간단 싱글톤(Singleton) 패턴 샘플 코드
![]() |
hooni | 2013.11.18 | 11639 |
805 |
[ios] 인앱결제 & 오토레이아웃 관련 강좌
![]() |
hooni | 2013.11.14 | 0 | |
804 | Etc | [NFC] 단말기와 서버 통신 내용 | hooni | 2013.11.12 | 11242 |
803 | Develop | [python] 파이썬 공부하는 사이트~ | hooni | 2013.11.12 | 10898 |
802 | System/OS | [mac] Charlesproxy 간단한 설정 내용~ | hooni | 2013.11.12 | 12452 |
~/toy/instagram 로 접근시에 "Unable to show Instagram photos" 라고 나옵니다. 왜 그런거죠?