티스토리 고래스킨에 카카오톡 공유 버튼 추가하기

이 티스토리 블로그에는 현재 고래스킨이라는 무료 스킨이 적용되어 있습니다. 스킨을 몇 차례 바꾸다가 지금은 고래스킨에 정착했습니다. 고래스킨에는 SNS 공유 버튼이 기본적으로 표시되지만 카카오톡 공유 버튼은 표시되지 않습니다. 구글링해보면 티스토리 블로그에 카카오톡 공유 버튼을 추가하는 방법이 나와 있습니다만, 고래스킨에 그대로 적용하는 것이 초보자에게는 쉽지 않을 것입니다. 고래스킨에 카카오톡 공유 버튼을 추가하고 싶은 경우 참고해보세요.

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

고래스킨 데모를 살펴보면 그림과 같이 네이버, 네이버 밴드, 페이스북, 카카오스토리 등의 SNS 공유 버튼이 글 하단에 표시됩니다.

저는 트위터 공유 버튼과 카카오톡 공유 버튼을 추가했습니다.

여기서는 카카오톡 공유 버튼을 고래스킨에 추가하는 방법에 대해 간략히 살펴보겠습니다.

고래스킨에 카톡 공유 버튼 추가하기

카카오톡 배너 업로드

먼저 카카오톡 배너를 다운로드하도록 합니다. 카톡 배너는 인터넷에 공유되어 있으므로 적절한 것을 다운로드하셔도 되고, 아래의 배너를 다운로드하셔도 됩니다. 

kakaotalk.png

0.01MB

배너를 다운로드하셨다면 꾸미기 > 스킨 편집을 클릭합니다.

HTML 편집 버튼을 클릭합니다.

스킨 편집 페이지가 표시되면 파일 업로드 탭을 클릭합니다.

하단의 +추가 버튼을 클릭하고 앞서 다운로드한 카톡 배너를 업로드합니다.

HTML 코드 추가

카카오톡 공유 버튼을 추가하려면 카카오 개발자 페이지(developers.kakao.com/)에 접속하여 개발자 계정으로 가입한 후, <내 애플리케이션>에서 애플리케이션을 추가하고 Javascript 키를 생성하고 Web 플랫폼을 등록해야 합니다.

저는 티스토리에 소셜(SNS) 공유 버튼을 달아 보자! - 카카오톡, 카카오스토리 편에서 제시하는 코드를 참조하여 고래스킨에 카톡 공유 버튼을 달았습니다.

HTML 편집 페이지에서 HTML 탭을 클릭하고 sns-go를 검색하도록 합니다.

위와 같이 <!-- SNS 공유 버튼 --> 섹션으로 이동했다면 적절한 곳에 다음 코드를 추가하도록 합니다.

<li>
<!-- 카카오톡 버튼 이미지 -->
<a href="#" onclick="shareKatalk();"><img src="./images/kakaotalk.png"></a>  
<!-- 카카오톡 공유 JavaScript -->
<script>
	// 사용할 앱의 JavaScript 키를 설정해 주세요.
	Kakao.init('JavaScript 키');
	function shareKatalk() {
    	<!-- 카카오 Link 공유 API 사용-->
		Kakao.Link.sendScrap({
			requestUrl: location.href
		});	
};
</script>	
</li>

위에서 <script>...</script> 부분은 </head> 바로 위나 </body> 바로 앞으로 이동시킬 수 있습니다. 저는 <script>...</script> 부분을 </body> 바로 앞으로 이동시켰습니다.

저장한 다음 블로그 글을 브라우저에서 열어보면 카카오톡 버튼이 추가된 것을 확인할 수 있을 것입니다.

마치며

이상으로 티스토리 고래스킨에 카톡 공유 버튼을 추가하는 방법에 대해 살펴보았습니다. 비슷한 방법으로 워드프레스 등에도 카톡 공유 버튼을 추가할 수 있습니다. 하지만 카톡 공유 버튼을 추가해도 큰 효과는 없는 것 같습니다. 워드프레스에 위의 방법을 이용하여 공유 버튼을 추가해보니 효과가 없는 것 같아서 제거했습니다.

티스토리 블로그의 경우 <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script> 스크립트가 기본적으로 로드되기 때문에 이 스크립트를 추가할 필요가 없지만 워드프레스에 카카오톡 공유 버튼을 추가하는 경우에는 이 스크립트를 로드하도록 코드를 추가해주어야 합니다.

참고

https://avada.tistory.com/1890

티스토리 고래 스킨 소제목 스타일 변경하기

https://avada.tistory.com/1789

티스토리 블로그 고래 스킨에 목차 자동 생성하는 방법