이 포스트는 아래 두 글에서 이어집니다.


    [iTIPs/Web] - 블로그에 카카오톡, 카카오스토리로 공유버튼 만들기


    [iTIPs/Web] - AddThis share buttons 공유버튼 플러그인에 카카오 공유 추가하기



    변경점

    • 카카오톡 공유에서 메시지에 본문 내용이 일부 포함되게 됩니다. (<p>태그 기준으로 4문장)
    • 카카오스토리 공유 스크립트가 간소화됐습니다. 그냥 카카오 스토리 자체 스크랩기능으로 공유됩니다.
    • 버튼 클릭 이벤트를 jQuery에서 img태그 자체에 onclick 이벤트로 변경했습니다.



    스크립트

    버튼부분
    <div class="visible-xs" style="float:left">
      <span id="ktalk"><img src="./images/kakaotalk.png" width="32" onclick="executeURLLink()"></span>
      <span id="kstory"><img src="./images/kakaostory.png" width="32" onclick="executeKakaoStoryLink()"></span>
    </div>

    스크립트 부분

    <!-- 카카오 공유 -->

    <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: $('.article p:first-child,.article p:nth-child(2),.article p:nth-child(3),.article p:nth-child(4)').text()+"\n...더보기",

            url: curURL,

            appid: "nubiz.tistory.com",

            appver: "1.0",

            appname: curTitle,

            type: "link"

        })

    }


    function executeKakaoStoryLink() {

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

            post: curURL,

            appid: "nubiz.tistory.com",

            appver: "1.0",

            appname: "nubiz.tistory.com"

        })

    };

    </script>

    파란색으로 표시된 부분을 본인의 블로그에 맞게 수정하시면 됩니다.

    (이전 포스트 참고)



    .


    카카오톡 링크 2.0 API 종료..

    카카오톡 링크 2.0버전 API는 6월 30일부로 종료된다고 합니다.

    기존에 설치된 플러그인도 작동을 하지 않는지는 모르겠습니다.

    앞으로는 업그레이드된 형태의 API를 사용해야하는데.. 이것은 블로그에는 적합하지 않은것 같아 고민이네요.


    현재 카카오톡 API2.0은 제공되지 않지만, 기존 스크립트로 정상작동가능합니다



    카카오톡 링크 2.0API가 종료되어 새로운 API를 이용해야합니다.

    적용방법이 약간 까다로워졌습니다.

    티스토리에 카카오톡 링크3.5 적용하기


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon HappyChurch
      2014.07.24 21:30 신고

      감사합니다 :-) 잘 적용했어요.

    • BlogIcon 티스토리당
      2014.09.26 02:10 신고

      잘 적용 했습니다 ^^ 감사합니다 ~
      한가지 궁금한점이요 ~ 모바일에서 클릭했을경우 이미지있으면 썸네일 나오자나여
      썸네일 크기조절이 안될까여 ? 너무 크게 나와서염 ~ ㅎ. ㅎ
      방법좀 문의드립니다 ^^

      • BlogIcon 뭐하라
        2014.09.26 16:13 신고

        그러려면 카카오스토리 api를 활용해야하는데 문제가 많아서 기본스크랩기능을 이용하고있습니다. 저도 자세히는 잘 모르니 양해부탁드려요^^

    • BlogIcon 오렌지수박
      2014.10.13 23:04 신고

      관련 글 3개를 모두 보았습니다. 그런데 현재는 addthis 스크립트가 sns버튼 별로 나오지 않고 통으로

      <!-- Go to www.addthis.com/dashboard to customize your tools -->
      <div class="addthis_sharing_toolbox"></div>

      이런 식으로 나오는데 이런 것에도 카카오톡과 카카오스토리를 추가 적용할 수 있나요?

      • BlogIcon 뭐하라
        2014.10.13 23:18 신고

        네 가능합니다. 다만 이제 addthis버튼들 가운데 넣는 것은 좀 어렵고
        앞이나 뒤에 자리잡게 됩니다.
        제가 사용중인 스크립트 밑에 붙여드릴테니 참조해보세요.
        (네이버 라인도 포함되어있습니다)
        <!-- AddThis Sharing Button -->
        <span class="visible-xs" style="float:left"> <span id="ktalk"><img src="./images/kakaotalk.png" width="32" onclick="executeURLLink()"></span> <span id="kstory"><img src="./images/kakaostory.png" width="32" onclick="executeKakaoStoryLink()"></span>
        <script src="//media.line.me/js/line-button.js?v=20140411" ></script>
        <script>new media_line_me.LineButton({"pc":false,"lang":"en","type":"c"});</script></span>
        <div class="addthis_sharing_toolbox"></div>

      • BlogIcon 오렌지수박
        2014.10.13 23:31 신고

        감사합니다. 열심히 적용해보겠습니다.^^

    • BlogIcon 모이개
      2014.10.28 17:31 신고

      올려주신 팁으로 카카오톡 버튼을 달아보고 있습니다.
      좋은 정보 감사합니다.
      근데 카카오스토리는 잘 작동이 되는데
      카카오톡은 작동이 되지 않네요..
      업데이트로 이제는 사용불가한 것인가요?
      뭐하라님의 포스팅에서 카카오톡 버튼은 잘 적용이 되는 것 같은데요..ㅠㅠ

      • BlogIcon 뭐하라
        2014.10.28 17:43 신고

        살펴보니 스킨구조도 다르고 jquery도 달라서 카톡에 포함시킬 내용을 찾지못해서 그렇습니다.
        msg: $('.article p:first-child,.article p:nth-child(2),.article p:nth-child(3),.article p:nth-child(4)').text()+"\n...더보기",

        이부분을
        msg: jQuery('.jbArticle p:first-of-type,.jbArticle p:nth-of-type(2),.jbArticle p:nth-of-type(3),.jbArticle p:nth-of-type(4)').text()+"\n...더보기",

        이렇게 바꿔주시면됩니다

      • BlogIcon 모이개
        2014.10.28 18:05 신고

        앗, 정말 고맙습니다.
        뭐하라님 덕분에 큰 산 하나 넘겼습니다!
        정말 고맙습니다~~~!!!


    • 2015.01.07 14:28

      비밀댓글입니다


      • 2015.01.07 14:56

        비밀댓글입니다

      • BlogIcon 뭐하라
        2015.01.07 15:06 신고

        [ ##_article_rep_desc_##]
        아랫줄에 넣으시면 돼요~

        플러그인으로 하는게 제일 쉽죠 ^^