티스토리에 인스타그램 위젯 사이드바 만들기
티스토리에 인스타그램 위젯 사이드바 만들기
티스토리 Tang Bisuda Image 스킨에 사이드바 기능이 있어서 인스타그램 위젯을 넣고 싶었습니다. 인스타그램 위젯을 만들어 주는 사이트들은 많지만 사진 클릭 시 자사 사이트로 유입 및 광고가 보여 불편하게 되어 있었습니다. 물론 유료로 사용하면 원하는 기능들을 마음대로 사용할 수 있겠지만 인스타그램 API와 자바스크립트 소스만 티스토리에 추가해 주면 심플하게 구성할 수 있습니다.
인스타그램 위젯을 사이드바에 달기 위해서는 인스타그램 클라이언트 ID 생성, 인스타그램 ACCESS TOKEN 생성, 티스토리 HTML 소스 추가의 총 3가지 설정을 합니다. 설정 방법은 다소 어려워 보이지만 티스토리 사용자분이라면 충분히 할 수 있다고 생각합니다.
1. 인스타그램 클라이언트 ID 생성
1-1. 먼저 인스트라 그램 클라이언트 ID 생성을 위해 https://instagram.com/developer/clients/register/ 링크 접속 후 상단 로그인 버튼을 클릭합니다.
1-2. 인스타그램 사용자 이름과 비밀번호를 입력합니다.
1-3. Developer Singup 페이지가 나오면 위와 같이 임의로 기입하여 Sign up 버튼을 클릭합니다.
1-4. 그림과 같이 Register Your Application 버튼을 클릭합니다.
1-5. Register a New Client 버튼을 클릭합니다.
1-6. 클라이언트 ID 등록을 위해 필요한 입력 화면입니다. 아래와 같이 필드에 입력 후 Security 탭을 클릭합니다.
Application Name, Description : 영문명
Website URL : http://localhost
Valid redirect URIs : http://localhost 입력 후 엔터
Contact email: 자신의 이메일
1-7. Security 탭에서 Disable implicit OAuth 체크 해제합니다. 아래 CAPTCHA 입력 값을 필드에 작성 후 Register 버튼을 클릭합니다.
1-8. 드디어 CLIENT ID가 생성되었습니다.
2. 인스타그램 ACCESS TOKEN 생성
2-1. ACCESS TOKEN 생성을 위해 아래 링크 주소를 복사 - CLIENT_ ID 에 생성된 값으로 변경 - 주소 표시줄에 붙여넣기 후 엔터를 입력합니다.
2-2. Application Name에서 입력된 정보 수집을 허락하는 요청 창이 보이면 Authorize 버튼을 클릭 후 허가합니다.
2-3 계정 정보에 접근되면 전송된 값이 변환되어 userID, accessToken 값을 복사하여 메모합니다.
3. 티스토리 HTML 소스 추가
instafeed.min.js
3-2 티스토리 HTML 화면 하단 </s3> 소스 위 부분에인스타그램 HTML 소스 중 userID, accessToken 값을 자신의 값으로 넣어줍니다. 화면에 보여줄 이미지는 limit 값에 입력합니다. 이미지 폭과 크기는 100px로 설정되어 있는데 width, height 값을 원하는 숫자로 변경 후 사용하면 됩니다.
<!-- instagram -->
<script type="text/javascript" src="./images/instafeed.min.js"></script>
<script type="text/javascript">
var userFeed = new Instafeed({
get: 'user',
userId: '309********',
limit: 9,
accessToken: '309*******.105*************************',
template: '<a href="{{link}}" target="_blank" style="margin-right:2px"><img src="{{image}}" width="100" height="100" /></a>'
});
userFeed.run();
</script>
</s3>
</body>
</html>
3-3 티스토리 관리자 - 사이드바 - 태그 입력기에 아래 그림과 같이 치환자를 넣어주면 모든 설정은 끝입니다. (태그 입력기가 없으면 티스토리 관리자 - 플러그인 설정에서 등록합니다.)
<div id="instafeed"></div>
Tang Bisuda Image 스킨 사용중이면 태그 입력기에 아래와 같이 추가합니다.
<!-- instagram -->
<div class="widget">
<h3 class="header"><span>instagram</span></h3>
<div id="instafeed"></div>
</div>
티스토리 관리자 - 꾸미기 - HTML/CSS 편집 - CSS 화면에서 아래 반응형 소스를 추가합니다.
/* 인스타그램 반응형 */
@media only screen and (max-width: 425px) {
#sidebar-second .widget div#instafeed a img { width: 32% !important; height: 32% !important;}
}
@media only screen and (min-width: 426px) and (max-width: 768px) {
#sidebar-second .widget div#instafeed a img { width: 32% !important; height: 32% !important;}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
#sidebar-second .widget div#instafeed a img { width: 32% !important; height: 32% !important;}
}
티스토리 Tang Bisuda Image 스킨에 적용된 모습입니다. 인스타그램 사용 중이면 티스토리에 적용해서 보면 더 좋지 않을까 생각되네요.
