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

인스타그램


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


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

https://instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=http://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 스킨에 적용된 모습입니다. 인스타그램 사용 중이면 티스토리에 적용해서 보면 더 좋지 않을까 생각되네요.



신고

홍정석

사진, 음악, 영화, 컴퓨터, IT

    이미지 맵

    WRITE/리뷰를 쓰다 다른 글

    댓글 74

    1. 이전 댓글 더보기
      • 안녕하세요, 유용한 정보 감사드립니다. 블로그에 적용시키려 하니 토큰을 발급 받은 뒤 instafeed.min.js 파일을 다운받고 업로드 완료하였습니다.
        그런데 아무리 새로고침해도 제 블로그 html 에는 토큰을 넣는 소스가 보이지 않습니다.
        소스를 붙여넣기 해야되나요? 아니면 파일을 업로드 하면 자동으로 생성되는 건가요?

      • 안녕하세요. 3-2번부터 차례대로 진행하시면 되겠네요. '꾸미기 - 스킨 - HTML/CSS 편집' 에서 'HTML' 화면 소스에 적용해주시면 됩니다.

      • 2-1에서 id를 받고 막혔습니다.
        주소 복사하고 id를 제가 받은 아이디로 바꾸었는데 페이지에 오류가 있다고 하네요. 해결할 수 있는 방법 없을까요?

      • 페이지 오류가 어떻게 나오나요?
        https://www.instagram.com/oauth/authorize/?client_id=CLIENT_ID&redirect_uri=http://localhost&response_type=token

        위에서 CLIENT_ID 값을 1-8번 사항에 표기된 CLIENT ID 값으로 대체하면 됩니다.


      • 웹 페이지를 찾을 수 없습니다.

        HTTP 400


        예측 가능한 원인:
        •주소에 오타가 있을 수 있습니다.
        •클릭한 링크가 만료된 것일 수도 있습니다.


        가능한 해결 방법:


        이렇게 나옵니다.

      • 웹페이지 찾을 수 없습니다. 나오면 주소 표시줄에 아래와 같이 표기되는지 확인해보세요. 2-3번 사항입니다.
        http://localhost/#access_token=30975*****************

      • 3-2 부분을 티스토리 html 편집화면에서 어디 부분에서 찾아야 하나요? 아니면 저 태그 전체를 복사해서 붙여넣기 해야하나요???

        <!-- instagram --> 이렇게 시작하는 부분이요.. 도저히 찾아도 안보이고 어디 부분에 삽입할지도 모르겠어요..

      • HTML 편집 화면에 보면 스킨 소스 하단에 </s3></body></html> 이 보이는 윗 부분에 넣어주시면 되는데 userID, accessToken 값은 chanyeon님 정보로 넣어주셔야 합니다.

        <!-- instagram --> 이렇게 시작하는 부분은 3-3 사항인데 태그 입력기에 추가후 넣어주는 사항입니다.

      • {"code": 400, "error_type": "OAuthException", "error_message": "Redirect URI does not match registered redirect URI"}

        1-8번 아이디를 복사후 해당 주소창에 복사 불어넣기했는데 오류가 뜨네요 ㅠㅠ
        오류가 뜨는 주소창입니다
        https://www.instagram.com/oauth/authorize/?client_id=027a47150437483fb09d383b65ff25a6&redirect_uri=http://localhost&response_type=token

        제가 뭘 잘못 기입한건가요?

      • 400 error 원인은 저도 잘 모르겠네요.
        Redirect URI does not match registered redirect URI 메시지가 나오는거 보니 1-6번 부터 차례대로 해보시면 어떨까요.
        크롬이나 익스플로러로 다시 한번 해보시구요. 정확한 답변을 못 드려 죄송합니다.

      • 안녕하세요 다른 스킨을 (Fastboot) 사용중인데 어렵게 어렵게 적용을 완료 했습니다. 6개 사진이 나오도록 설정을 했는데 좌우측은 4px으로 구분이 되게 설정을 했는데, 하단 사진들도 동일하게 4Px 크기로 구분하고 싶은데 조언을 구합니다.

      • 스킨에 잘 적용되어 있는 모습은 확인했습니다. 설정하느라 고생하셨습니다.
        template: '<a href="{{link}}" target="_blank" style="margin-right:6px"><img src="{{image}}" width="100" height="100" /></a>'

        right:6px 설정을 삭제하고 아래와 같이 css 화면에 소스를 추가해 주세요. margin 값으로 상화좌우 넓이를 조정할 수 있습니다.
        #instafeed a {
        margin: 4px;
        display:inline-block;
        position:relative;
        }

      • 덕분에 깔끔하게 마무리 했습니다. 감사합니다.

      • 블로그에 CSS 소스 잘 적용되었네요. 수고하셨습니다. :)

      • 저는 403 에러가 뜹니다..
        https://www.instagram.com/oauth/authorize/?client_id=d5aea9b9da3b4ccb83432a92612efbad&redirect_uri=http://localhost&response_type=token
        진자 몇번을 해도 호환성 설정까지해봐도 안되네요.. ㅠㅠ

      • 1-7번 사항 Security 탭에서 Disable implicit OAuth 체크 해제합니다. 아래 CAPTCHA 입력 값을 필드에 작성 후 Register 버튼을 클릭합니다.

        내용을 다시 한번 확인해주세요.

      • Developer Singup 이페이지로 어떻게 다시 가죠? 아무리 해도 400에러 계속 나와서 Developer Singup여기서부터 다시 할려고 하는데 돌아가는 방법이 없네요

      • 1-3 그림 상단 오른쪽에 manage clients 를 클릭해 보세요.
        https://www.instagram.com/developer/clients/manage/

      • 차례차례대로 하고 있는데 instafeed.min 파일 다운이 안되네요 ㅠㅠ 다운을 할 수 있는 방법이 없을까요?

      • 안녕하세요. 파일 다운로드는 정상적으로 되고 있습니다. 만약 새 탭으로 이동 후 코드가 보이는 화면이 나올 경우 코드를 전체 복사후 instafeed.min.js 저장해 보세요

      • 2-2까지 하고 2-3이 안되는데...
        주소표시줄에 주소가 변경이 안되는건 뭔가요?

        그리고 1-3이 없고 바로 1-4로 나오는데... 정상인가요?

      • 2-2에서 승인을 거치면 주소표시줄 주소가 변경되어서 나타납니다. 아래 동영상 링크를 참고해 보세요.
        https://youtu.be/3oHfqAmKN_I?t=201

      • 안녕하세요...
        잘 따라하다가 막히네요....
        꼼꼼한 설명 감사합니다.


        2-1. ACCESS TOKEN 생성을 위해 아래 링크 주소를 복사 - CLIENT_ ID 이 부분이 되질 않네요...
        링크 복사해서 CLIENT_ ID를 입력하고 ...
        아래처럼 했는데...

        https://www.instagram.com/oauth/authorize/?client_id=5b87b389ceb74e10???????????&redirect_uri=http://www.mamasstudio.co.kr&response_type=token

        {"error_type": "OAuthForbiddenException", "code": 403, "error_message": "Implicit authentication is disabled"}
        이런 메세지만 뜨네요...

        어디서 잘못되었을까요? 번거롭지만 답변 부탁드립니다.

      • 1-7번 사항 Security 탭에서 Disable implicit OAuth 체크 해제합니다. 아래 CAPTCHA 입력 값을 필드에 작성 후 Register 버튼을 클릭합니다.

        내용을 다시 한번 확인해주세요.

      • 안녕하세요
        내용대로 하다가 2-2에서 Authorize 버튼을 누른 다음부터 오류가 떠서 진행이 안됩니다
        혹시 중간에 뭘 빼먹었거나 그런걸까요? 일단 적힌대로 다 한 것 같은데 도저히 모르겠습니다..

      • Authorize 버튼을 누른 다음 해당 페이지 아무것도 표시 안된 상태에서 주소표시줄 보면 2-3. 예제와 같이 변경되어 있을거에요.

      • 와.........2-1에서 막혀서 토큰값을 못받아서 한참 애먹고있었는데 다른 참고글보고
        http://instagram.pixelunion.net/ 여기서 토큰값 따로 받고
        했더니 한시간반만에 해냈습니다!! 아.........진짜 너무 행복.ㅠㅠ
        피드가 왜 안뜨나했더니 유저아이디를 계속 잘못해서 크라이언트 아디를 입력하는 바보같은...ㅠㅠ
        나중에 보라는 유툽보고 했더니 제가 유저아이디를 착각하고 있었다는걸로 바로 적용했더니 피드가 홈피에 뜨네요.ㅎㅎㅎㅎ
        감사합니다!!

      • 디아나님 안녕하세요.
        오랜 노력 끝에 설치 성공하셔서 기쁘네요.
        토큰 값 받는 사이트 정보도 고맙습니다.
        축하드립니다. :)

      • 안녕하세요 위에서 문의 남겼던 소쩍새입니다
        역시나 같은 부분에서 아직 나아가질 못하고 있어요. 도움을 요청합니다...ㅜㅜ

        새로 창을 하나 띄우고 주소창에 밑에 처럼
        https://instagram.com/oauth/authorize/?client_id=4ba71************************&redirect_uri=http://localhost&response_type=token
        주소를 입력하고 엔터를 누르고
        2-2. 에서 보이는 화면이 나와서 Authorize 버튼을 클릭하면 '이 페이지를 표시할 수 없습니다' 가 뜹니다

        주소 표시줄에 뭔가 바뀌었을까 보면 제가 입력했던 그대로 입니다. 토큰값이라던가 이런게 나오지 않네요
        댓글에 있던 유튜브 영상도 봤지만 어느 부분이 문제인지 모르겠습니다

      • 소쩍새님 토큰 값때문에 고생하시네요. 위에 디아나님께서 링크 남겨주신 사이트에서 한번 해보시는게 더 빠를 듯 싶습니다.
        http://instagram.pixelunion.net/
        위 사이트에서 해보시겠어요. 성공하길 바랍니다. :)

      • 정말감사합니다. 덕분에 위젯을 만들었습니다. 그런데 제 인스타그램만 가능한건가요? 예를들어 연예인 인스타그램을 티스토리의 위젯으로 피드해올수있는 없을까요?

      • 안녕하세요. 인스타그램 계정 아이디와 비밀번호를 알아야 토큰값을 가져올 수 있는데 문의하신 연예인의 계정 비밀번호를 알 수 없어 힘들 듯 싶습니다.

    *

    *

    이전 글

    다음 글

    counter stats