유용한 자료
< 자료공유 < 유용한 자료
기타자료실

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

페이지 정보

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

첨부파일

본문

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

 

 

사이트로 이동

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

Manage Clients 클릭

Register a New Client 클릭

 

 

Register new Client ID 화면에서 Details 탭의 항목들을 입력합니다. 

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

Privacy Policy URL 과 Contact email 은 입력을 안해도 무방합니다. 

입력을 다 하셨다면 우선 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}} 항목을 지움)

 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기