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

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] - 카카오링크 (카카오톡, 카카오스토리 공유) 스크립트 업데이트