티스토리 Fastboot 인스타그램 연동하는 방법

Instagram 사진 자동게재하기

몇 일전에 아주 황당한 경험을 했습니다. 자주 사용하는 어플은 아니지만, 그래도 사용하기 편리한 SNS 어플이라 종종 사진도 올리고 소통도 하곤 했는데, 요 근래 관심을 통 못쓰고 있었지요. 그런데 어느 날! 아내로부터 저의 계정이 '해킹'을 당한 것 아니냐는 이야기를 듣게 되었습니다. 확인해 보니, 이미 이름도 변경되어있고, 프로필 사진도 바뀌었더군요. 게다가 요상한 사진들만 잔뜩 올려놓았더라고요. 가족들 그리고 친구들과 다 연결되어 있는데, 확인한 시간이 늦었더라면, 이상한 사람으로 취급될 뻔 했습니다. 전 여기 홈페이지와도 연결이 되어있는지라, 가감히 해당 계정을 삭제했습니다. 그리고 이전부터 정리해야지 했던, 연동 방식에 대해서 이번에 정리해보고자 합니다.

하루에 하나씩! 우리 삶을 윤택하게 만드는 블로그, 인텔레고의 하루하나!

'Intellego' 란 라틴어로 알아듣다, 깨닫다, 이해하다 라는 뜻을 가지고 있습니다.

부족한 나를 깨닫고, 당신을 이해하며, 다양한 세상을 알아간다는 의미로 만든 이름입니다. 

글, 사진, 이미지 By 인텔레고 ◀ Copyright(C) 피아오 라운지

하루에 하나씩 만들어가는 제 글이 

여러분의 삶을 조금 더 윤택하고, 행복하게 만들어준다면 얼마든지 공유가 가능합니다.

# 단, 기계적인 복사-붙여넣기는 훌륭한 당신과는 어울리지 않습니다.

# 일부 이미지는 참고용으로 가져온 것이 있음을 알려드립니다.

인스타그램과 티스토리 홈페이지 연동하기 전혀 어렵지 않아요!

이전부터 정리해야지 생각만 하고 있었는데, 이번에 신규 개정을 생성하게 되면서 기존 연동이 해제되어 버렸습니다. 할 수 없이 처음부터 새롭게 연동 방식을 진행해야했던 터라, 이번 기획에 자료도 정리하여 안내드리고 합니다. 시간이 지나면 잊어버리기에 생생한 기억이 있을 때, 보다 쉽게 이해할 수 있도록 안내드리겠습니다.

T멤버십 등급별 포인트, 할인한도 정확하게 공부해보자.

Instagram을 티스토리와 연동하기 위해서는 클라이언트 ID 를 생성해야 되고, 접근이 가능하도록 도와주는 Access Token 번호도 생성을 해야합니다. 그리고 불러온 정보를 원하는 홈페이지에 게시 할 수 있도록 HTML Source도 추가를 해야됩니다. 여러가지 용어들이 생소하여 낯설어 보이지만 기존에 HTML를 조금이라도 다뤄보신 분들이라면 누구나 쉽게 할 수 있는 설정이기에 걱정하지 않으셔도 됩니다.

1. Client ID 를 만들어보자.

먼저 Client ID를 생성하기 위해서는 아래 링크를 접속하여 로그인을 하여야 합니다.

Client ID 생성 이동하기

그러면 위 이미지와 같이, 기존에 보유하신 계정 정보를 기입하여 로그인을 우선 하셔야 합니다. 여기까지는 모 누구나 다 할 수 있겠지요?

로그인을 하게되면 위 이미지와 같이, Developer Signup 페이지가 나오는데요. 

붉은색 박스로 표시한 곳에 기본 정보를 기입해주시고 Sign Up을 눌러서 다음 페이지로 이동하시면 됩니다.

Client 계정 등록을 위해서는 위 붉은색 박스를 누르셔서 등록페이지로 이동하시기 바랍니다.

현재 등록된 정보가 없기에 위와 같이 안내문구가 나옵니다. 앞서 설명드린 바와 같이, 기존 계정을 삭제하고 신규 계정을 생성하여 등록하는 과정이기에 저도 위와 같이 문구가 나오는 것을 확인할 수 있습니다. Register를 눌러서 등록 페이지로 이동하시기 바랍니다.

위 이미지가 등록정보를 기입하는 페이지 입니다. 어플리케이션 네임과 디스크립션에는 사용하시고자 하는 영문명을 기입하여 주시면 되고, 컨택 이메일에는 사용하시는 이메일 정보를 기입하시면 됩니다.

짠! 그러면 위 이미지와 같이, Developer로서 등록된 정보를 확인할 수 있습니다.

여기서 한가지 더, 계정 update를 눌러서 시큐리티 탭의 Disable implicit OAuth를 해제 표시하여 주시기 바랍니다. 그러면 최종적으로 계정정보가 생성이 되었음을 확인할 수 있습니다.

2. ACCESS TOKEN 번호를 만들어보자.

해당 액세스 토큰번호를 생성하기 위서는 아래 링크 주소로 이동하시어, CLIENT_ID 부분에 앞서 생성한 ID 정보로 대체하여 기입한 후 엔터를 입력하셔야 합니다.

ACCESS TOKEN 생성하기 이동

웹페이지를 찾을 수 없는 페이지로 이동이 될 텐데, 해당 주소창에서 앞서 설명한 부분과 같이 ID를 대체하여 주시기 바랍니다. 그러면 아래와 같이 

정보수집을 허락하는 Authorize 버튼이 활성화 된 페이지를 확인할 수 있습니다.

계정정보에 접근하게되면, 주소창에 #access_token=으로 시작하는 번호정보가 나오게되는데, 첫번째 '.'을 기점으로 UserID와 AccessToken 번호가 되기에 잘 확인하셔야 합니다.

23345XXXX.1235235234asdfwerg543523452 라면 앞선 숫자가 ID가 되고 전체 정보가 Token 번호가 되는 구성입니다.

3. HTML를 추가해서 정보를 불러오자.

원활하게 활성화된 정보를 불러오기 위해서는 CSS에 아래 파일을 업로드 해야합니다. 해당 파일은 아래에서 쉽게 다운로드 받으시면 됩니다.

instafeed.min.js

그런 다음 게시를 원하는 위치에 HTML를 기입하면 됩니다. 스킨에 따라 차이가 있겠지만, 저는 Fastboot를 사용하기에 사이드바에 게시될 수 있도록 아래와 같이 설정을 하였습니다.

그런다음 태그입력기나 CSS 코드를 원하시는 대로 수정하시어 사용하시면 문제없이 활용 할 수 있습니다. 간단하지만, 내용이 많다보면 길어졌네요. 이제는 편하게 그리고 쉽게 본인의 SNS와 연동해 보시기 바랍니다.

 ● 관련 글 안내 

관심있는 제품과 관심있는 정보에 대해서는 저 개인을 포함한 이웃들에게 도움이 되는 것인가?라는 의문을 가지며 하나씩 그 세부 사항을 파악해보고 있습니다. 결과적으로 도움이 되는 중요한 정보라고 생각되면 시간이 걸리더라도 하나씩 정리하여 포스트를 작성하고 있습니다. 때론 어렵고, 때론 혼자 힘겨울 때도 있지만, 하루하나 내 삶을 바꾸는 소중한 정보를 만든다라는 나름의 목표 달성을 위해서 열심히 노력하고 있으니, 제 노력의 정도는 아래 글을 통해서 확인하시기를 부탁드립니다.

부천국제판타스틱영화제 판타십멤버 혜택 안내

맥스퍼 듀얼 모니터 거치대 MMB-D7 리뷰, 사용후기

SK 공시지원금 조회하기, SKT T월드 공시지원금 실시간 확인 방법

▶"인텔레고의 하루하나" 를 검색!◀

	공감과 이웃추가는 'Intellego' 에게  큰 격려와 동기부여가 됩니다.