카카오에서 제공하는 카카오CI 사용 설명서

    국내 모바일 sns중에서 가장 거대하다고 할 수 있는 카카오톡과 카카오스토리.

    티스토리에서는 공유버튼을 기본제공하지 않고있습니다.

    블로그 이용자들의 편의를위해, 그리고 활발한 공유로 유입될 수 있는 트래픽을 위해

    카카오톡, 카카오스토리로 공유하는 버튼 플러그인을 만드는 방법을 알아보겠습니다.


    카카오 api 활용

    http://www.kakao.com/services/6

    카카오는 몇달전 부터 카카오링크라는 api를 제공해오고 있습니다.


    api는 github에서도 확인할 수 있습니다.

    https://github.com/kakao/kakaolink-web



    적용하기 앞서..

    카카오톡과 카카오스토리 모두 스마트폰에서만 공유를 할 수 있습니다.

    그런데 티스토리는 모바일 웹 스킨을 수정할 수 없습니다.

    따라서 이 공유하기 버튼을 추가하시려면 반응형 웹 스킨을 먼저 적용한 뒤 사용하셔야 합니다.

    아직 반응형 스킨을 적용하지 않으신 분들은 티스토리용 반응형 웹 스킨이 이미 적용하기 쉽게 만들어진 것들이 많으니 시도해보시는 것도 좋습니다.

    (이 블로그의 반응형 스킨 제작자 블로그 바로가기)


    적용 방법

    1.HTML/CSS편집에서 파일업로드로 들어갑니다.

    아래 두 아이콘 파일카카오링크api(kakao.link.js)를 받아 업로드 합니다.(파일 이름은 바꾸지 마세요)


     kakaotalk.png  kakaostory.png


    kakao.link.js

    (https://github.com/kakao/kakaolink-web 에서 직접 받으셔도 됩니다.)



    2. skin.html의 </body>위쪽에 다음을 붙여넣습니다.

    <!-- 카카오 공유하기 플러그인 -->

    <script type="text/javascript" src="./images/kakao.link.js"></script>

    <script> 

      var curURL=location.href;

      var curTitle = document.getElementsByTagName("TITLE")[0].text;

      function executeURLLink()

        {kakao.link("talk").send({

          msg : curTitle,

          url : curURL,

          appid : "본인블로그주소.tistory.com",

          appver : "1.0",

          appname : "블로그 제목",

          type : "link"

        });

      };

      function executeKakaoStoryLink()

        {kakao.link("story").send({   

          post : curURL,

          appid : "본인블로그주소.tistory.com",

          appver : "1.0",

          appname : "블로그 제목",

          urlinfo : JSON.stringify({title:curTitle, desc:"카카오스토리에 공유될 때 나타날 문구", imageurl:["공유될 때 표시될 그림 url"], type:"article"})

        });

      }

    $(document).ready(function(){

      $("#ktalk").click(function(){

       executeURLLink();

      });

      $("#kstory").click(function(){

       executeKakaoStoryLink();

      });

    });

    </script> 



    3.공유하기 버튼이 들어갈 skin.html의 알맞은 위치에 다음 코드를 삽입합니다. (추천위치: 본문 상단 or 본문 하단)

    <span id="ktalk"><img src="./images/kakaotalk.png" width="32"></span>

    <span id="kstory"><img src="./images/kakaostory.png" width="32"></span>

    (div로 묶어서 위치를 적절히 지정해주시면 좋습니다.)

    .


    4.아이콘을 클릭했을 때 공유가 제대로 되는지 확인합니다.

    (확인은 반드시 카카오톡, 카카오스토리가 설치된 스마트폰에서 해야만 작동합니다.)




    - Add this share buttons 공유버튼 플러그인에 카카오 공유 추가하기


    이 글은 구버전입니다. 업데이트된 버전도 확인해주세요!

     - 카카오링크 (카카오톡, 카카오스토리 공유) 스크립트 업데이트 바로가기


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon A TearDrop
      2014.06.13 05:59 신고

      제가쓰는 스파이더웹은 달려있어서 신경안써도 되는데 소스네요 -0-
      나중에 다른거사용할때 참고할께요 ^^

    • BlogIcon 비가옵니다.
      2014.06.20 16:15 신고

      감사 합니다 잘적용하고 갑니다

      • BlogIcon 뭐하라
        2014.06.20 16:20 신고

        이 글은 구버전인데 업데이트 된부분 확인하셨나모르겠네요~

    • BlogIcon Danbioo
      2015.01.07 12:24 신고

      카카오톡과 카카오 스토리 버튼을 다려고 하는데요~
      제가 시작한지 얼마 안되서 잘 모르겠습니다만^^:
      처음 달려고 할 경우에는 이 글말고 다음 업데이트 내용만 적용하면 될까요?
      요 아래 링크용^^;
      http://nubiz.tistory.com/465

      • BlogIcon 뭐하라
        2015.01.07 14:08 신고

        카카오톡 공유를 원하시면 http://nubiz.tistory.com/568만 하시면 되구요,
        카카오스토리, 카카오톡 둘다 하시려면 http://nubiz.tistory.com/465 먼저 하시고 http://nubiz.tistory.com/568 하시면 됩니다. ^^

    • BlogIcon COCO Media
      2016.02.06 23:49 신고

      이제는 본인이 직접 개발키를 받지않으면 불가능합니다!! 사이트도 직접 등록시켜야해요