php | 인스타그램 홈페이지 연동하기

페이지 정보

작성자 madalla 작성일18-05-19 20:32 조회4,004회 댓글0건

첨부파일

instafeed.min.js (6.8K) 92회 다운로드 DATE : 2018-05-19 20:32:51

본문

https://www.instagram.com/developer/

사이트로 이동

인스타그램 아이디비번으로 로그인

Manage Clients 클릭

Website URL 과 Vaild redirect URIs 은 http:// 를 포함하여 실제 내 웹사이트 주소를 정확히 입력해 주시고,

입력을 다 하셨다면 우선 Register 를 누르지 마시고, Security 탭으로 이동합니다.

Security 탭에 이동 후, 상단 Disable implicit OAuth 체크박스를 해제합니다.

(내 인스타그램의 사진들을 공개적으로 웹사이트에 게재하기 위함)

그리고 최종적으로 Register 를 클릭합니다.

새로운 Client ID가 올바로 생성된 화면입니다. 이 Client ID가 access token 을 발급 받는데 사용됩니다.

access token을 발급받기 위하여, 인터넷 브라우저 주소창에

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token 의 형태로 access token 발급을 요청합니다.

CLIENT-ID : 안내 6번 항목의 발급된 CLIENT ID

REDIRECT-URI : 안내 4번 항목에서 입력했던 Vaild redirect URIs

(입력 예시 : https://api.instagram.com/oauth/authorize/

client_id=2ff7ed0b0094408sdfsdfdf325b257f300bb&redirect_uri=http://madalla.kr&response_type=token)

access token 발급 과정에서 아래와 같은 화면이 뜰 수 있으니, 만약 이 화면이 뜬다면 Authorize 를 눌러주시면 됩니다.

access token 발급 요청이 성공적으로 되었다면, 아래와 같이 주소창에 access token 이 발급됩니다.

(access_token=69sdg91267.9633456.889ca5sd32e04185erdc34767ws44751ed 부분을 따로 복사해둡니다.)

첨부파일 js파일 다운로드

<script type="text/javascript" src="/js/instafeed.min.js"></script> <!-- js 파일 로드 -->
<script type="text/javascript">    
var userFeed = new Instafeed({
    get: 'user',
    userId: CLIENT_ID,
    sortBy: "most-recent",
    limit: 20,
    template: '<a href="{{link}}" target="_blank"><img src="{{image}}" />{{caption}}</a>', 
    // {{link}} : 게시물 링크, {{image}} : 사진 url, {{caption}} : 게시물 텍스트
    accessToken: 'Access_Token'        
});
 
userFeed.run();
</script>
 
<div id="instafeed"></div>
​
위에서 복사했던 access_token=6952091267.9632906.889ca5eb32e04185adc34767d44751ed 에서 
. 을 기준으로 앞의 숫자를 스크립트의 userId 부분에, access_token 전체를 스크립트의 accessToken 부분에 적어줍니다. ​
 
 
(스크립트 부분에서 게시물 텍스트 {{caption}} 항목을 지움)
 
userid 찾기
인스타그램에서 이미지 하나 골라 오른 마우스 클릭.. 링크주소 복사
http://www.otzberg.net/iguserid/여기로 가서 그 url 넣고 go 누르면 userid가 보임
 