[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 발급 방법
번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|---|
69 | Develop | [js] jQuery 치트 시트 | hooni | 2013.12.18 | 36306 |
68 | System/OS |
[mac] Mac에서 Mac으로 원격제어하기 (맥에서 맥으로)
![]() |
hooni | 2013.10.08 | 37264 |
67 | System/OS |
맥에서 파일공유 (윈도우,맥)
![]() |
hooni | 2013.04.25 | 37404 |
66 | Develop |
[ios] iOS 4.0 beta 에서 3.1.3으로 다운그레이드 하는 법
![]() |
hooni | 2013.04.23 | 37543 |
65 | Etc | [svn] 콘솔에서 svn 사용시 레티나용 이미지 add 안될 때.. | hooni | 2013.09.25 | 37655 |
64 | System/OS |
CentOS 6.5 USB 설치
6 ![]() |
hooni | 2013.12.18 | 37811 |
63 | PPT |
[android][ios] 알림(Notification) 기능에 대한 원리와 구현 방안 (APNS포함)
![]() |
hooni | 2013.04.23 | 37922 |
62 | System/OS | [linux] 처음 설치부터 APM 설치까지 (업데이트 할 것) | hooni | 2013.04.23 | 38352 |
61 | Develop | [js] jQuery 충돌 회피 | hooni | 2013.12.17 | 38378 |
60 | System/OS | [mac] 맥에서 APM(apache,php,mysql) 구성하기 | hooni | 2013.04.23 | 38837 |
59 | Develop |
[android] 개발 환경 세팅 따라하기 ㅋㅋ
![]() |
hooni | 2013.04.23 | 40464 |
58 | System/OS | [dos] 노트북 백업 스크립트 xcopy 명령 예제 | hooni | 2003.04.23 | 40878 |