티스토리 고래스킨 카카오톡 공유 버튼 추가하는 방법

티스토리 고래스킨은 무료지만 디자인이 깔끔한 편이고 속도도 나쁘지 않은 스킨이라서 많은 인기를 얻고 있습니다(현재 제가 쓰고 있는 스킨도 고래스킨입니다).

여기서는 고래스킨에 빠져있는 카카오톡 공유버튼을 간단히 추가하는 방법을 알아보겠습니다.

고래스킨 공유 버튼에 카카오톡이 빠져있는 이유

고래스킨에 카카오톡 공유 버튼을 추가하는 방법

1 카카오톡 이미지를 다운로드한다

2 카카오톡 이미지를 스킨에 업로드한다

3 HTML에 카카오톡 버튼 추가 코드를 입력한다

4 버튼 표시와 동작 확인하기

고래스킨 공유 버튼에 카카오톡이 빠져있는 이유

공유 버튼도 이미 네이버, 네이버 밴드, 페이스북, 카카오스토리까지 갖추어져 있습니다. 다만 한국 최대의 메신저인 카카오톡이 빠져 있습니다.

물론 고래스킨 개발자가 카카오톡을 실수로 빠뜨린 것 같지는 않습니다.

아마 이전까지 카카오톡 공유 버튼을 만들려면 개발자 센터에 등록을 하고 키를 받아야 했기 때문에 일반 사용자들에게 이 과정을 직접 하도록 하는 것이 어렵기 때문에 아예 빼고 제작을 했던 것 같습니다.

하지만 지금은 티스토리에 관련 코드가 이미 포함이 되어 있어서 코드를 추가하는 것만으로 간단하게 할 수 있습니다.

고래스킨에 카카오톡 공유 버튼을 추가하는 방법

1 카카오톡 이미지를 다운로드한다

카카오톡 이미지는 인터넷상에 굉장히 많이 존재하기 때문에 적절한 것을 검색해서 받아도 되고 아래의 아이콘을 눌러서 다운로드해서 사용해도 됩니다.

2 카카오톡 이미지를 스킨에 업로드한다

카카오톡 이미지를 업로드하려면 블로그 관리 화면에서 스킨 편집을 선택합니다.

다음으로 html 편집을 클릭합니다.

그런 다음 파일 업로드 탭으로 이동을 해서 「+추가」 버튼을 눌러서 다운로드한 아이콘을 업로드해 주고 적용 버튼을 누릅니다.

3 HTML에 카카오톡 버튼 추가 코드를 입력한다

다음은 HTML 탭으로 이동을 합니다.

그런 다음 SNS 공유 버튼 부분을 찾습니다. 이미 네이버 블로그 공유 하기 등의 버튼이 정의되어 있는 것을 확인할 수 있습니다.

이제 적절한 위치에 아래 코드를 삽입합니다.

<li>
<!-- 카카오톡 공유 JavaScript -->													
 <script>
  function shareKakaotalk() {
    Kakao.Link.sendScrap( {
      requestUrl: location.href
    } );
  };
 </script>
 <!-- 카카오톡 버튼 이미지 -->
 <a href="javascript:shareKakaotalk()"><img src="./images/kakaotalk.png"></a>  
</li>

코드를 직접 입력하기가 귀찮으신 경우는 아래 파일을 다운로드해서 복사 붙여 넣기를 하면 됩니다.

카카오톡-공유버튼-코드.txt

0.00MB

어디가 적절한지 잘 모르겠거나 별로 상관없으시다면 페이스북 공유 버튼과 카카오 스토리 공유 버튼 사이에 넣어두는 것을 추천합니다(아무래도 카카오톡과 카카오 스토리가 붙어 있는 게 좋지 않을까 하는 단순한 의견입니다)