블로그에 카카오톡, 카카오스토리로 공유버튼 만들기
국내 모바일 sns중에서 가장 거대하다고 할 수 있는 카카오톡과 카카오스토리.
티스토리에서는 공유버튼을 기본제공하지 않고있습니다.
블로그 이용자들의 편의를위해, 그리고 활발한 공유로 유입될 수 있는 트래픽을 위해
카카오톡, 카카오스토리로 공유하는 버튼 플러그인을 만드는 방법을 알아보겠습니다.
카카오 api 활용
http://www.kakao.com/services/6
카카오는 몇달전 부터 카카오링크라는 api를 제공해오고 있습니다.
api는 github에서도 확인할 수 있습니다.
https://github.com/kakao/kakaolink-web
적용하기 앞서..
카카오톡과 카카오스토리 모두 스마트폰에서만 공유를 할 수 있습니다.
그런데 티스토리는 모바일 웹 스킨을 수정할 수 없습니다.
따라서 이 공유하기 버튼을 추가하시려면 반응형 웹 스킨을 먼저 적용한 뒤 사용하셔야 합니다.
아직 반응형 스킨을 적용하지 않으신 분들은 티스토리용 반응형 웹 스킨이 이미 적용하기 쉽게 만들어진 것들이 많으니 시도해보시는 것도 좋습니다.
적용 방법
1.HTML/CSS편집에서 파일업로드로 들어갑니다.
아래 두 아이콘 파일과 카카오링크api(kakao.link.js)를 받아 업로드 합니다.(파일 이름은 바꾸지 마세요)
kakao.link.js2. skin.html의 </body>위쪽에 다음을 붙여넣습니다.
<!-- 카카오 공유하기 플러그인 -->
<script type="text/javascript" src="./images/kakao.link.js"></script>
<script>
var curURL=location.href;
var curTitle = document.getElementsByTagName("TITLE")[0].text;
function executeURLLink()
{kakao.link("talk").send({
msg : curTitle,
url : curURL,
appid : "본인블로그주소.tistory.com",
appver : "1.0",
appname : "블로그 제목",
type : "link"
});
};
function executeKakaoStoryLink()
{kakao.link("story").send({
post : curURL,
appid : "본인블로그주소.tistory.com",
appver : "1.0",
appname : "블로그 제목",
urlinfo : JSON.stringify({title:curTitle, desc:"카카오스토리에 공유될 때 나타날 문구", imageurl:["공유될 때 표시될 그림 url"], type:"article"})
});
}
$(document).ready(function(){
$("#ktalk").click(function(){
executeURLLink();
});
$("#kstory").click(function(){
executeKakaoStoryLink();
});
});
</script>
3.공유하기 버튼이 들어갈 skin.html의 알맞은 위치에 다음 코드를 삽입합니다. (추천위치: 본문 상단 or 본문 하단)
<span id="ktalk"><img src="./images/kakaotalk.png" width="32"></span>
<span id="kstory"><img src="./images/kakaostory.png" width="32"></span>
(div로 묶어서 위치를 적절히 지정해주시면 좋습니다.)
4.아이콘을 클릭했을 때 공유가 제대로 되는지 확인합니다.
(확인은 반드시 카카오톡, 카카오스토리가 설치된 스마트폰에서 해야만 작동합니다.)
- Add this share buttons 공유버튼 플러그인에 카카오 공유 추가하기
이 글은 구버전입니다. 업데이트된 버전도 확인해주세요!
- 카카오링크 (카카오톡, 카카오스토리 공유) 스크립트 업데이트 바로가기
