Addthis는 블로그에 소셜 공유버튼을 한번에 편리하게 제공해주고 있습니다.

    http://www.addthis.com/


    그런데 온갖 소셜서비스가 다 제공되지만 우리나라의 카카오 서비스는 제공이 되지 않고 있습니다.

    (아마도 스마트폰 전용 서비스기 때문에 일반 웹에서도 표시되는 플러그인에 추가되긴 어렵겠죠.)


    그래서 저는 직접 카카오톡, 카카오스토리로 공유하는 버튼을 추가해보기로 했습니다.


    이 글은 이전글인 [티스토리&애드센스] - 블로그에 카카오톡, 카카오스토리로 공유버튼 만들기 에서 이어집니다.




    Add this share buttons 플러그인에 통합하기

    이미 앞선 글에서 카카오링크 api를 설치했다고 가정하고 시작하겠습니다.


    먼저 addthis 플러그인중

    가로로 32x32아이콘이 나열된 플러그인을 사용할 것입니다.

    해당 플러그인 코드가 다음과 같을텐데요.

    <!-- AddThis Button BEGIN -->

    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">

    <a class="addthis_button_preferred_1"></a>

    <a class="addthis_button_preferred_2"></a>

    <a class="addthis_button_preferred_3"></a>

    <a class="addthis_button_preferred_4"></a>

    <a class="addthis_button_compact"></a>

    <a class="addthis_counter addthis_bubble_style"></a>

    </div>

    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-0000000000"></script>

    <!-- AddThis Button END -->

     

    이전 글에서 3번 단계인

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

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

    이 코드를 <div>태그로 묶어 add this 플러그인의 3번 버튼과 4번 버튼 사이에 넣어주시면 됩니다.


    완성된 코드는 다음과 같겠네요.

    <!-- AddThis Button BEGIN -->

    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">

    <a class="addthis_button_preferred_1"></a>

    <a class="addthis_button_preferred_2"></a>

    <a class="addthis_button_preferred_3"></a>

    <a class="addthis_button_preferred_4"></a>

    <div style="float:left">

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

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

    </div>

    <a class="addthis_button_compact"></a>

    <a class="addthis_counter addthis_bubble_style"></a>

    </div>

    <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-0000000000"></script>

    <!-- AddThis Button END -->



    거기에 본 블로그에서 사용중인 fastboot같은 bootstrap기반의 반응형 스킨을 사용하시는 분들은

    <div>에 class="visible-xs"를 추가해서

    <div class="visible-xs" style="float:left">

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

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

    </div>


    이렇게 추가하시면 카카오 아이콘이 모바일 해상도에서만 나타나게 됩니다.(어짜피 모바일 아니면 작동 안하니까요)

    본 블로그에서 브라우저 가로크기를 줄여보시면 어떻게 보이는지 확인 가능합니다.



    [iTIPs/Web] - 카카오링크 (카카오톡, 카카오스토리 공유) 스크립트 업데이트


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 마쑤
      2014.05.21 03:46 신고

      애드디스에 카톡 공유버튼을 추가하는 방법이 궁금했는데 덕분에 제 블로그에 잘 적용하였습니다
      그런데 카카오스토리 공유할때 공유될때 나타낼 문구와 이미지URL은 구체적으로 어찌해야할지 잘 모르겠더라구요
      아무튼 감사합니다~

      • BlogIcon 뭐하라
        2014.05.21 07:35 신고

        직접 카카오스토리 공유를 테스트해보시면 알기쉬우실거에요~
        지금은 고정된 문구랑 이미지만 나오는데요.
        잘만 설정하면 본문내용이 공유할때 나올 수도 있을텐데 그건 제가 잘 몰라서요..^^

    • BlogIcon artautocare
      2014.12.02 22:52 신고

      현재 애드디스가 좀틀려진거같은데요.. 아닌가?
      적용하려하니 코드가 간단하게만 나오고 설정이되는거같은데 한번 보시면 좋을것같아서요

      • BlogIcon 뭐하라
        2014.12.02 23:48 신고

        애드디스 코드가 좀 바뀌긴 했는데, 비슷하게 적용하시면됩니다.
        본문아래쪽에 업데이트된 스크립트 링크도 확인하시고, 아래는 현재 제 블로그에 적용된 코드입니다. 참고해보세요
        <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>
        <span id="line"><img src="./images/line_button.png" width="32" onclick='window.open("http://line.me/R/msg/text/?["+document.getElementsByTagName("TITLE")[0].text+"] "+$(".article p:first-child,.article p:nth-child(2)").text()+"\n...더보기 : "+location.href.split("#")[0]+"?","_blank")'></span>
        </span>
        <div class="addthis_sharing_toolbox"></div>

        아래는 업데이트된 애드디스 적용법입니다
        http://nubiz.tistory.com/484