사진 속의 또 다른 나

인스타그램


티스토리에 인스타그램 위젯 사이드바 만들기


티스토리 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 : https://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 에 생성된 값으로 변경 - 주소 표시줄에 붙여넣기 후 엔터를 입력합니다.

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=https://localhost&response_type=token





2-2. Application Name에서 입력된 정보 수집을 허락하는 요청 창이 보이면 Authorize 버튼을 클릭 후 허가합니다.




2-3 계정 정보에 접근되면 전송된 값이 변환되어 userID, accessToken 값을 복사하여 메모합니다.





3. 티스토리 HTML 소스 추가



3-1 instafeed.min.js 파일을 다운로드 받은 후 티스토리 관리자 - HTML/CSS 편집 - 파일 업로드합니다.


 다운로드 링크 
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 스킨에 적용된 모습입니다. 인스타그램 사용 중이면 티스토리에 적용해서 보면 더 좋지 않을까 생각되네요.




counter stats