티스토리 블로그 카카오톡(PC/모바일) 공유 버튼 만들기

티스토리 블로그는 기본적으로 모바일에서만 카카오톡 공유 기능을 제공하고 있습니다. PC에서는 보이지 않아도 스마트폰에서는 보일 것입니다. 평소에 매일 유입 로그를 보면 KAKAOTALK 이 보이는데요. 키워드가 안 보이는 게 아장 아쉽지만 카카오톡에 노출되는 스토리 콘텐츠나 #검색 및 공유를 통해 유입이 되는 것이라고 합니다.


그래서 저의 블로그는 카카오톡으로부터 유입을 위해 공유 버튼을 따로 만들어 적용하고 있습니다. 이미 오래전에 쓴 관련 포스팅이 있지만 새로 다시 정리해서 올립니다.


관련 글 :


[Web] - 티스토리 블로그 SNS 공유 버튼 직접 만드는 방법



카카오톡 공유 버튼 만들기

티스토리 기준으로 설명을 드리지만 티스토리 말고도 다른 웹사이트에도 모두 똑같이 적용합니다. 하지만 티스토리에서는 기본적으로 KAKAO SDK를 제공하기 때문에 따로 언급할 필요는 없지만 웹사이트를 개설하시는 분들은 SDK까지 적용해야 할 것입니다.



1) 자 우선 자바스크립트 API KEY를 얻기 위해 KAKAO developers 사이트로 접속하여 카카오톡 계정으로 로그인합니다.


2) 로그인이 완료되었으면 내 애플리케이션 항목에 앱 만들기 버튼을 선택합니다. 저는 이미 만들어져 있는 게 있지만 새로 다시 만들 것입니다.


3) 앱의 아이콘은 공유시 표시되는 아이콘이며 그냥 두셔도 상관은 없습니다. 앱의 이름을 입력앱 만들기 버튼을 누릅니다.


4) 아이콘을 다시 적용할 거냐고 묻습니다. 저는 적용을 안 했기에 계속 진행하겠습니다.


5) 그럼 JavaScript 키가 보일 것입니다. 이것이 바로 API입니다. 메모해 둡니다.


6) 새로 만든 앱의 개요 메뉴를 선택하여 카카오 계정 로그인사용자 관리 메뉴를 선택합니다.


7) 사용자 관리가 OFF로 되어 있는데요. 선택하여 ON으로 만듭니다.


8) 개인정보 보호항목에는 개발 시 사용할 프로필이나 계정 및 생일 항목이 표시되는데요. 저는 계정(이메일) 부분에 대해서 필수라고 선택하고 수집 목적을 입력합니다.


9) 접근권한 관리항목스토리 글 목록은 사용할 일이 없어서 사용 안 함으로 했고 글 작성 부분에는 모바일에서 스토리 앱과 연동하려면 동의해도 됩니다. 하지만 따로 소스를 적용해야 할 수 있습니다. 메시지 전송에도 선택보단 이용중 동의로 하고 간단하게 수집 목적을 입력합니다.


10) 모두 완료했으면 저장 버튼을 누릅니다.


11) 여기서 JavaScript 키를 잃어버려도 설정 항목의 일반으로 들어가도 보입니다.



12) 그리고 그 하단에 플랫폼 추가 버튼을 누릅니다.


13) 플랫폼 추가 항목에 옵션을 선택 후 블로그 주소를 입력하여 추가 버튼을 누릅니다. 저의 블로그 주소를 입력했습니다.


14) 여기서부터 소스를 카카오톡 공유 버튼을 만들기 위해 티스토리 블로그 관리자 페이지로 들어가서 꾸미기 항목에 스킨 편집을 선택합니다.


이 부분은 별도로 설명 안 하려고 했으나 티스토리의 업데이트 후 메뉴가 조금 바뀌었기에 설명을 조금 더 추가합니다.


15) 스킨 편집 창이 뜨는데요. HTML 편집 메뉴를 선택합니다.

 


16) html 소스 중 article_rep_desc 치환자를 찾아내 본문 상단에 넣을 것인지 하단에 넣을 것인지 선택합니다. 사이드바도 상관없습니다.


17) 카카오톡 공유 링크 버튼 소스와 스크립트입니다. 소스코드와 아이콘을 압축하여 따로 첨부합니다. 아이콘은 스킨 편집 창에서 파일 업로드 기능을 통해 올리면 되겠습니다.


소스코드 및 아이콘.zip


jquery js 파일을 불러오는 스크립트가 있는지도 확인합니다. 없으면 Head 태그에 넣습니다. Kakao.init 괄호 안에는 JavaScript API KEY를 입력하면 되겠습니다.

/* Share on KakaoTalk */ <a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>

<!-- jQuery --> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- KakaoTalk Share Script --> <script>


Kakao.init('자바스크립트 API 키');

function shareKatalk() { Kakao.Link.sendScrap({ requestUrl: location.href }); }; </script>


19) 적용이 완료되면 PC에서도 카카오톡 공유가 되는 것을 볼 수 있습니다.


20) 스마트폰에서도 카카오톡 앱과 연동하여 공유가 되는 것을 볼 수 있습니다.


전 국민이 거의 카카오톡 메신저를 쓰기 때문에 블로그에서도 이렇게 공유 버튼을 만들어 놓는다면 콘텐츠 확산과 흥보에도 많은 도움이 될 거 같습니다.

공유하기

페이스북

트위터

구글
플러스

카카오
스토리

네이버
밴드

네이버

카카오톡
PC/모바일