By aPOST in 티스토리스킨 — 2023년 12월 23일

티스토리 블로그에 인스타그램 피드/위젯 붙이기 완벽정리2 - 인스타그램 개발자 API를 이용해 내 인스타그램 연결하기

인스타그램 피드를 가져오는 자바스크립트 라이브러리를 이용해 인스타그램에서 직접 피드를 가져오는 방식입니다.

자바스크립트 파일을 업로드할 수 없는 블로그나 홈페이지에는 사용할 수 없으며, 티스토리 블로그나 워드프레스 호스팅 환경에서는 문제없이 적용할 수 있습니다.

간혹 드물게 CDN 형태로 인스타그램 위젯 자바스크립트 라이브러리를 링크로 제공하는 경우가 있는데, 자바스크립트 파일 업로드가 불가능한 서비스를 이용하는 경우 이런 라이브러리를 찾아서 사용하는 것도 괜찮은 방법입니다.

단, 이 경우에도 스킨 html 파일 정도는 수정이 가능해야 합니다.

앞서 적용한 무료 인스타그램 위젯 서비스인 라이트위젯이 하루에 한번만 피드 업데이트가 된다던가 하는 제약이 있지만, 자바스크립트 라이브러리를 이용해 직접 인스타그램에서 피드를 가져올 경우 이런 제약이 없기 때문에 실시간 업데이트가 되는 인스타그램 피드를 내 블로그에 적용할 수 있습니다.

티스토리 스킨을 조금은 수정할 줄 알아야 하기 때문에 스킨 수정을 전혀 할 줄 모르는 초보인 경우 다소 어려움이 있을 수 있습니다.

1. 자바스크립트 라이브러리 업로드하기

인스타그램 개발자 API를 이용해 피드를 생성해주는 자바스크립트 라이브러리를 다운로드 합니다.

종류가 굉장히 많기 때문에 본인한테 맞는 라이브러리를 쓰면 되고, 가장 대표적인 것중 하나인 스펙트라그램 제이쿼리 라이브러리(spectragram.js) 를 이용해 티스토리에 붙여보도록 하겠습니다.

spectragram.js 라이브러리 파일을

https://github.com/adrianengine/jquery-spectragram/#readme

http://spectragram.js.org/

에서 다운로드 합니다.

첨부파일에 포함되어 있으므로 아래 링크를 클릭해 다운로드 할 수도 있습니다.

spectragram.min

spectragram.min.zip

1 KB

파일명은 spectragram.min.js 입니다.

파일명이 다를 경우 spectragram.min.js 로 변경해서 사용하거나 아래 스크립트 링크에 사용한 파일명을 변경해주면 됩니다.

티스토리 스킨편집기에서 spectragram.min.js 파일을 업로드합니다.

티스토리의 경우

자바스크립트 파일이 업로드되는 위치는 images 폴더 밑입니다.

경로는 "내블로그 루트/images/spectragram.min.js" 가 됩니다.

스킨 html(skin.html) 파일 끝에 라이브러리를 링크시켜줍니다.

아래 코드를 복사해서 skin.html 맨끝에 붙여넣습니다.

보통 티스토리 레퍼런스 스킨을 기반으로 만들어진 스킨들은 skin.html 끝에

스킨 설정에 사용하는 자바스크립트 파일이 링크되어 있습니다.

요 코드가 보이는 경우 바로 위에 붙여넣어주면 됩니다.

2. 인스타그램 액세스 토근 발급받기

인스타그램 웹사이트(https://www.instagram.com)로 가서 로그인을 한 후

인스타그램 개발자 사이트

https://www.instagram.com/developer

로 이동합니다.

A. 클라이언틀를 생성해야 합니다. 상단 오른쪽 "Manage Client" 를 클릭해 생성한 클라이언트 관리 화면으로 이동합니다.

처음 한번은 개발자 정보를 입력해야 합니다. Developer Signup 화면에 홈페이지, 연락처, API사용용도를 입력한 후 API 사용약관 체크를 하고 "Sign up" 버튼을 누릅니다.

B. 개발자 정보를 등록한 후 다시 "Manage Client" 를 클릭해 클라이언트 관리 화면으로 들어갑니다.

만들어놓은 클라이언트가 없으므로 빈 화면만 나옵니다.

상단 오른쪽 초록색 "Register a New Client" 를 눌러 새 클라이언트 등록을 시작합니다.

등록폼이 나오고 폼에 알맞는 내용들을 입력한 후 "Register" 버튼을 누르면 클라이언트가 등록됩니다.

클라이언트 정보 입력시에는 몇가지 주의할 사항이 있습니다.

잘못된 정보를 입력한 경우 아래와 같은 무수히 많은 빨강색 오류 메시지들을 만나게 됩니다.

티스토리 블로그에 인스타그램 피드를 붙여넣는 것을 기준으로 설명합니다.

Application Name: 영문으로 적당한 이름을 입력합니다. 여러단어일 경우 "_"나 "-" 로 연결해 붙이는 것을 추천하고, 입력 필드 아래 설명이 있지만 "insta", "gram", "Instagram", "IG" 키워드는 이름에 사용할 수 없습니다. 주의해야 합니다.

Description: 등록하려는 클라이언트의 설명을 입력합니다. 대충 간단하게 아무거나 입력하면 됩니다.
Company Name: 역시 아무거나 입력하면 됩니다.
Website URL: 피드를 붙여넣을 블로그 URL을 정확하게 입력합니다.(http://, https:// 포함)
Valid redirect URIs: 아주 중요합니다. 사용자가 앱을 인증할지 여부를 선택한 후 사용자를 리다이렉션하는 URL을 입력합니다. 블로그 URL을 입력해주면 됩니다. 반드시 실제 블로그 주소를 입력해야 하고, D 항목에서 액세스 토큰을 발급받는 URL에서 REDIRECT-URI 파라메터 값으로 동일한 URL을 입력해야 합니다.(완전히 동일해야 합니다. 가능하면 복사&붙이기로 붙여넣기를 추천합니다.)
Privacy Policy URL: 개인정보보호정책 안내 페이지 URL을 입력합니다. 내 블로그에 그런거 따위는 있을리 없습니다. 블로그 URL을 그냥 입력하면 에러납니다. 티스토리 개인정보처리방침 페이지 URL을 입력하면 됩니다.

https://tistory.com/info/privacy
Contact email: 연락용 이메일 주소를 입력합니다. 앱에 관한 중요 정보가 있을 때 알려주는 용도인데, 아직까지 메일을 받아본적은 없습니다.

C. "Security" 탭을 눌러 보안 설정 페이지를 엽니다.

Valid redirect URIs: 앞서 Details 탭에서 입력한 Valid redirect URIs 가 표시됩니다. 액세스 토큰 발급시 사용되는 URL 이므로 반드시 정확한 블로그 URL 을 입력해야 합니다.

Disable implicit OAuth: 체크를 해제 합니다. 샌드박스 형태로 액세스 토큰을 발급하려면 반드시 해제해야 합니다.

모든 항목은 생성 후 다시 수정할 수 있으므로 등록(Register)에 문제가 없으면 저장해서 새 클라이언트를 등록한 후 나중에 수정합니다.

* 위젯 서비스를 이용해 이미 인스타그램 피드를 붙여서 사용중인 경우

액세스 토큰 방식으로 인스타그램 피드를 붙이는 것과 직접 관련은 없지만, 앞서 인스타그램 위젯을 제공해주는 서비스를 이용해 위젯을 만들어 쓰고 있는 중인 경우 해당 위젯 서비스에서 클라이언트 인증을 받아 위젯을 생성하기 때문에 먼저 만들어진 클라이언트 인증이 있게 됩니다.

인스타그램 피드를 API 방식으로 사용하기 위해 새로 클라이언트 ID 를 생성하면 위젯 서비스에서 생성한 인증키가 만료되면서 위젯서비스를 사용할 수 없게 됩니다.

D. 클라이언트 ID가 만들어졌으므로 이제 액세스 토큰을 발급받아야 합니다.

클라이언트 ID 생성후 목록을 보면 생성된 클라이언트 ID가 보입니다.

웹브라우저에 아래 URL을 입력합니다.

CLIENT-ID 키워드는 실제 클라이언트 ID 값으로

REDIRECT-URI 키워드는 클라이언트 등록시 입력한 Redirect URI 를 정확하게 입력해줍니다.

가능하면 복사&붙여넣기로 수정하기를 추천합니다.

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

인증 프로세스가 진행된 후 이 클라언트를 인증할건지 확인하는 창이 표시됩니다.

"승인" 버튼을 누르면 REDIRECT-URI 로 입력한 URL로 리턴되면서 아래 화면처럼 URL에 액세스 토큰이 함께 파라메터로 넘어옵니다.

이 액세스 토큰을 메모장 같은 곳에 복사해둡니다.

잃어버리면 다시 발급받아야 합니다.

3. 자바스크립트 라이브러리 초기화 설정 코드 삽입

이제 스킨에서 인클루드하는 자바스크립트 파일(script.js)을 열어서 스펙트라그램 초기화 설정 코드를 붙여넣습니다.

보통 티스토리 스킨들은 "script.js" 과 같은 파일명을 기본 파일명으로 해서 자바스크립트 실행 코드들을 넣어서 스킨과 함께 배포, 사용합니다.

script.js 파일을 열어 다음 스펙트라그램 자바스크립트 라이브러리 초기화 설정 코드를 붙여넣습니다.

어디다 붙여넣어야할지 모르겠으면 script.js 파일 맨끝에 붙여넣으면 됩니다.

붙여넣으면서 "생성한 인스타그램 액세스 토큰을 여기에 붙여넣음" 이라고 된 부분에 앞에서 발급받은 액세스 토큰값으로 변경을 합니다.

jQuery.fn.spectragram.accessData = {
accessToken: '생성한 인스타그램 액세스 토큰을 여기에 붙여넣음'
};
/* 
구버전 스펙타그램 사용시 이 코드로 초기화 
페이스북 API로 통합되면서 더이상 동작하지 않음.
*/
$('#instafeed').spectragram('getUserFeed',{
max: 8,
size: "small",
wrapEachWith: "<div></div>"
});
/* 
신버전 스펙타그램 사용시 이 코드로 초기화 
*/
$('#instafeed').spectragram({
max: 8,
size: "small",
wrapEachWith: "<div></div>"
});

설정 파라메터 값을 간단하게 요약하면 다음과 같습니다.

max: 8 - 최대 8개의 포스트 이미지를 가져옵니다. 가져올 포스트 갯수만큼 조절합니다.
size: "small" - 가져오는 이미지 크기를 설정합니다. "small" 은 150 x 150px, "medium" 은 320 x 320px, large 는 640 x 640px 입니다. "large"를 사용할 경우 이미지 파일 크기로 인해 전체 블로그 페이지 로딩이 느려지는 현상이 발생할 수 있습니다. 가능하면 "small" 을 사용할 것을 추천합니다.
wrapEachWith: "<div></div>" - 인스타그램 이미지를 감쌀 태그를 설정합니다. "<div></div>" 태그, 또는 "<li><li>" 태그를 사용하는 것이 레이아웃 설정하기에 편리합니다.
<div> 태그를 사용할 경우 전체 인스타그램 피드를 감싸는 "#instafeed" 요소의 태그로 <div>를 사용해야 하며, <li> 태그를 사용한 경우 "#instafeed" 요소의 태그로 <ul>을 사용해야 합니다.

잘 모르면 위 샘플대로 사용하면 가장 무난하다고 보면 됩니다.

자바스크립트 소스 코드를 보면 "#instafeed" 부분이 보이는데 "instafeed"라는 키워드는 html과 css에 붙여넣는 코드에서 가져오는 피드정보를 제어하는 식별자로 사용되므로 이 이름을 변경할 경우 함께 변경해야 합니다.

4. 인스타그램 피드 이미지들이 들어갈 태그 붙여넣기

skin.html 에 인스타그램 피드 이미지들이 들어갈 위치에 아래 태그를 붙여넣습니다.

자바스크립트 라이브러리가 불러온 이미지 데이터들은 이 태그 안에 모두 붙게 됩니다.

<div id="instafeed"></div>

위쪽 자바스크립트 초기화 설정 코드의 "#instafeed" 와 동일한 이름(#제외)으로 id를 붙여야 합니다.

5. css로 레이아웃 구성하기예를들어, 8개의 인스타그램 피드 이미지를 1픽셀 여백을 두고 한줄로 붙여서 블로그 푸터 영역 윗단에 붙인다고 할 경우, css를 아래와 같이 작성할 수 있습니다.어디까지나 예를 든 것이므로 자신의 블로그에 붙여넣는 위치에 따라 적절하게 수정해주면 됩니다.#instafeed{margin: 0 auto;width: 100%;clear: both;text-align: center;}#instafeed > div{display: inline-block;padding: 2px;}#instafeed > div img{width: 100px;height: auto;}

자바스크립트에서 인스타그램 피드로 가져오는 이미지 크기를 "small"로 지정했지만 이 크기가 150px 이기 때문에 가져오는 이미지 갯수가 많을 경우 줄바뀜이 되면서 인스타그램 위젯 모양이 의도와는 다르게 됩니다.

css에서 이미지 너비를 100px로 강제 지정해서 한줄로 들어갈 수 있게 적당히 조절했습니다.

위 css 코드를 style.css 적당한 위치에 붙여넣습니다.

잘 모르겠으면 css 파일 맨끝에 붙여넣어줍니다.

이제 블로그에 접속해보면 아래처럼 인스타그램 피드가 붙어 있는 것을 볼 수 있습니다.

과정을 정확하게 따라했으면 위젯은 정확하게 잘 붙습니다.

에러가 나거나, 위젯이 붙지 않는 경우 중간에 뭔가 잘못한 것이므로 위 과정을 다시 검토해 보기 바랍니다.

6. 클라이언트 액세스 취소하기

인스타그램 피드를 더 이상 사용하지 않을 경우, 또는 내 소유가 아닌 블로그에 연결을 했다 접근을 차단해야 할 경우 인스타그램 내 프로필로 들어가서 왼쪽 "허가된 앱" 메뉴를 클릭하면 앞서 만든 클라이언트 이름이 보입니다.

"액세스 취소" 버튼을 누르면 해당 액세스 토큰이 만료되면서 더이상 티스토리 블로그에 붙인 인스타그램 피드가 표시되지 않게 됩니다.

앱의 엑세스를 취소하면 액세스 토큰만 만료되며, 인스타그램 개발자 사이트에서 생성한 클라이언트 ID는 그대로 유지됩니다.

따라서 액세스 토큰을 다시 생성해 기존 자바스크립트 코드에 적용하면, 다시 해당 코드를 사용할 수 있게 됩니다.

액세스 토큰이 만료되어 인스타그램 피드를 가져올 수 없는 경우 자바스크립트 라이브러리가 에러를 발생시키므로, 다시 사용하지 않을 경우 액세스 허가를 취소한 후에는 해당 인스타그램 피드를 가져오는 관련 코드들을 삭제해야 합니다.