티스토리 블로그에 카카오스토리 채널 구독버튼 만드는방법

안녕하세요. 오늘은 티스토리 블로그를 이용시 네이버 블로그 처럼 이웃과 같은 기능이 없어서.. 기존에는 네이버의 이웃커넥트를 가져와서 사용을 해야하는 불편함이 있었는데요~ 최근에는 카카오스토리와 카카오톡 채널과 연동이 되면서 채널 구독버튼이란 것을 생성할 수 있게 되었습니다. 그래서 카카오스토리와 카카오톡을 하시는분들은 내가 원하는 블로거의 유용한 정보를 실시간으로 소식을 받고 싶으시다면 구독버튼을 클릭하여 구독신청을 해주시면 되는데요~ 오늘은 그 카카오스토리 채널 구독버튼을 생성하는 방법에 대해서 포스팅을 할까합니다.



가장 먼저 해야할 일은? 티스토리 홈페이지에서 로그인을 해줍니다. 그다음 사진처럼 빨간색 네모박스[관리]를 클릭해줍니다.


그다음은 [왼쪽 꾸미기 카테고리란에 보시면]-[HTML/CSS편집]을 클릭해줍니다.

여기까지 해주시고 잠시 스톱해주세요!.


https://developers.kakao.com/docs/social-plugins/story-follow#

카카오스토리 소식받기 버튼을 받기 위해서는 카카오개발자 홈페이지에 방문을 하셔야 하는데요 위에 링크 걸어놨어요.



다음은 위에 링크에 접속시 화면인데요. 중요한 부분을 빨간색 네모박스로 표시해뒀습니다.

http://story.kakao.com/ch/ 이하 부분은 바로 본인의 카카오스토리채널 URL주소를 넣어주셔야 합니다. 아래에 예시를 해놨어요.




자신의 카카오스토리채널 URL주소를 확인하기 위해서는?

위에 도메인 창을 클릭하시면 위와같이 영문 주소가 나올겁니다. 여기서 카카오닷컴 뒤에 ch뒤에 'fancamer'라는 단어가 보입니다. 이게 제 카카오스토리채널 URL주소인데요. 이부분을 복사하기를 해서

전 사진의 ch/뒷부분에 붙여넣기를 해줍니다. 


그리고 스토리채널 URL주소 아래에는 스타일 이란 것이 있는데 

위치를 [오른쪽, 위쪽]에 표시를 해주는건데 뭘 표시하냐고요?

위에 사진에 빨간박스에 숫자가 보이죠?


숫자 3을 의미하는건.. 부끄럽지만 제 카카오스토리 채널의 구독자 숫자를 말해줍니다. 3명이라는 거죠;;

스타일에서 말하는 구독자수 노출(오른쪽), (위쪽)은 이 숫자의 위치를 받는중 노란색 네모상자를 기준으로 오른쪽에 정렬하냐 위쪽에 정렬할지를 희망하시는 위치에 선택후


아래에 파란색 네모상자인 [코드 생성하기]를 클릭해줍니다.



코드생성 클릭 후 화면에는 위와같이 두 단계를 거쳐야하는데요~

여기서 이상한 영어로 적혀있는 HTML용어를 잘 몰라도 전혀 두려워하지 마세요. 중요한 부분만 그냥 [복사하여] -[붙여넣기] 컴퓨터에서는 정말 어떤 응용프로그램을 사용해도 이 기능이 가장 많이 사용하고 중요하기 때문에 기본적인 기능만 확실하게 아신다면 따라하시는 것에 대한 문제가 없습니다.



자 위에서 스톱이라고 말씀드리고 다음단계로 넘어왔는데요 그 티스토리 블로그에서 [HTML/CSS편집] 창에서 

윈도우에서는 단축키 [Control+F], 맥에서는 [Command + F]를 클릭 후 'body', 또는 '/body'을 검색해줍니다.

이 기능이 만약에 안되시는 분들은 키보드의 현자 자판입력기가 한글인지 확인하시고요 영문으로 변경 후 해주시고요 만약에 그래도 안된다 하시면

HTML/CSS편집창에서 직접 body부분을 찾아주셔야 합니다.


저는 첫번째 단계의 코드를 '/body' 뒤에 빨간네모박스로 표시된 부분 복사하여 붙여넣기 한 부분입니다. 이렇게 간단하게 처음 단계를 해결해주시고요.





자 두번째 단계를 할 차례죠?

스토리 소식받기 버튼을 표시할 위치에 다음 코드를 삽입하라고 명시되어있는데요.

저는 티스토리 블로그 RSS 소식을 받고 구독을 할 수 있는 창 바로 위에다 하면 좋을 것 같다고 생각되어서

위와같이 RSS링크가 있는 부분 위에다 두번째 코드를 복사하여 붙여넣기를 했습니다.


위에 HTML/CSS 편집창이 사용자가 사용하는 스킨창에 따라 다를 수 있는데요. 제가 사용하는 환경창과 달라도 두려워 하시지 마시고

위에 [control+F]를 눌러 검색창을 띄우고 검색할 단어에 만약 저처럼 구독자피드에 카카오스토리채널 구독버튼을 만들고 싶다고 하시면 "CSS"를 검색후 나오는 화면에 css 어쩌구 설명이 있는 윗 부분에 "/  "로 html 명령어가 끝난 곳에 복사하여 붙여넣기를 해주시면 됩니다. 




그러면 위와같이 두번째 코드 작업까지 모두 마치셨다면 이제 내 블로그에 카카오스토리 채널 구독버튼이 잘 표시가 되는 지 확인을 해봐야겠죠?

위에 사진에 보시면 RSS Feed위에 [노란색 네모박스에 체크 받는중 옆에 3] 이부분이 카카오스토리 채널 구독버튼입니다.

지금까지 티스토리 블로그의 또다른 구독기능인 카카오스토리 채널 구독버튼 만드는 법에 관해 포스팅을 했는데요~

초보자분들도 쉽게 원하시는 구독버튼을 만드실 수 있으니 오늘 당장이라도 카카오스토리 채널 구독버튼을 만들어서 내 소식을 더 널리 알려주세요!



이 글을 공유하기

댓글(27)

  • 2015.12.02 22:14 신고

    저정도면 반응형 블로그에도 무리없이 적용이 가능해 보이네요. 저도 나중에 해봐야할듯요 ^^

    • 2015.12.02 22:18 신고

      예 ^^ 제가 현재 사용하고 있는 스킨이 반응형인데 무엇보다도 크기가 작아서 좋은것 같아요.

  • 2015.12.02 22:55 신고

    카카오 스토리 채널 하시는 분들에게 정말 희소식인거 같습니다.
    이런식으로 구독 버튼 만들기가 가능하군요.

    • 2015.12.02 22:59 신고

      예 정말 티스토리 블로그는 다 좋은데
      구독기능이 없는 것이 단점이였는데 이렇게 카카오 스토리 채널을 통해서라도 구독기능을 사용할 수 있으니 다행인것 같습니다.^^

  • 2015.12.02 23:54 신고

    사진으로만 보면 명령어 이런게 나와있어서 조금 어려워보이지만
    쉽게 설명해주신 것 같아요~ 저도 해봐야겠어요 ^^

    • 2015.12.02 23:56 신고

      예^^ 감사합니다. 저런 명령어 따위 그냥 무시 하셔도 무관해요~
      빨간네모 박스의 명령어만 정확한 위치에다 복사 붙여넣기만 해주시면 완료에요!

  • 2015.12.04 22:53 신고

    이런방법이 있었군요

  • 2015.12.08 10:26 신고

    잘보고 갑니다.유용한 정보네요~ㅎ

  • 2015.12.26 21:53 신고

    오늘 이거 하려고 봤는데요... 카카오에서 하라는대로 해도 안되네요 ㅠㅠ 혹시 개발자 등록을 따로 해야 이 기능 쓸 수 있는 건가요?

    • 2015.12.26 21:56 신고

      음 개발자 등록이라면 어떤걸 말씀하시는건지요?

    • 2015.12.26 22:51 신고

      본문에 링크해주신 카카오스토리 개발자 링크 위 오른쪽에 로그인 눌러보면 개발자 등록하는 거 나와요...

    • 2015.12.26 23:08 신고

      제 링크에 들어가시면 코드 생성하기가 있는데요
      별도의 회원가입 및 개발자등록 같은것을 하지 않으셔도
      티스토리 관리자에서 [스킨편집 html/css]에 가셔서
      control + F 하시고 BODY 검색 하신 후 바디 뒤에다 아래에 코드를 복사하여 붙여넣기를 해주시면 됩니다.
      <script>
      window.kakaoAsyncInit = function () {
      Kakao.Story.createFollowButton({
      container: '#kakaostory-follow-button'
      });
      };

      (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//developers.kakao.com/sdk/js/kakao.story.min.js";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'kakao-js-sdk'));
      </script>


      스토리 소식받기 버튼 표시할 위치에 이거
      <div id="kakaostory-follow-button" data-id="kakao" data-type="horizontal" data-show-follower-count="true"></div>

  • 김정미
    2015.12.29 14:25

    혹시 네이버 블로그에는 어떻게 적용해야하는지 아세요~?? 네이버블로그에는 HTML/CSS 이런게 없어서요ㅜㅜ

  • 김정미
    2015.12.29 14:25

    혹시 네이버 블로그에는 어떻게 적용해야하는지 아세요~?? 네이버블로그에는 HTML/CSS 이런게 없어서요ㅜㅜ

    • 2015.12.29 15:59 신고

      안녕하세요.
      네이버 블로그는 html/css 편집이 없어서 불가능합니다.

      티스토리 블로그에 이웃기능이 없듯이 네이버 블로그에는 html/css 스킨편집 기능이 없습니다.

  • 2016.04.05 11:12 신고

    정말 좋은 정보네요. 감사합니다. 카카오 스토리에 좀익숙해지면 꼭 설치해야겠네요. ㅎ

  • 2017.04.05 17:14 신고

    익스에서는 꼭 새로고침을 해야 잘 보이고..
    크롬에서는 달자마자 구독버튼이 아주 잘 보입니다.
    덕분에 잘 적용했어요 감사드려요

  • 2017.04.23 23:44

    비밀댓글입니다

  • 2018.01.20 23:22 신고

    방금 이거 달았어요. ㅎㅎ 있는지도 몰랐다가요. 카톡 이메일 탈퇴하고 새로 만들었습니다.
    ^^; 하다가 막혀서 검색해보니까 역시 프라이스님의 블로그가 있어서 들어왔네요. ㅎㅎ

Designed by JB FACTORY