티스토리에 카카오톡 링크3.5 적용하기
카카오링크 (카카오톡, 카카오스토리 공유) 스크립트 업데이트
그동안 카카오링크 2.0버전을 사용해왔지만, 12월 3일부로 카카오링크 3.5버전 이하의 링크는 아래와 같은 메시지가 나타나면서 사용이 불가해졌습니다.
"최신버전의 카카오톡 링크가 적용되지 않은 앱(또는 서비스)에서 공유하기를 하였습니다.
해당 앱을 업데이트 하거나 최신버전의 카카오톡 링크를 적용하도록 앱 개발사에 요청해 주세요."
카카오링크 3.5버전의 사용법에 대해서 알려드리겠습니다.
카카오톡의 경우에만 새로운버전의 카카오링크를 사용하고, 카카오스토리는 이전의 카카오링크1.0을 계속 쓰시면됩니다.
카카오 개발자 등록하기
카카오링크 3.5버전 사용을 위해서는 카카오 개발자로 등록을 해야합니다.
1. 카카오 개발자 사이트에 접속하여 카카오아이디로 로그인합니다.
2. 앱만들기에서 자신의 티스토리 이름을 입력하고 완료하면
위와 같이 키가 발급됩니다.
Javascript 키를 잘복사해둡니다.
3.개요 - 앱정보 - 설정으로 들어갑니다.
플랫폼 추가를 클릭하고 웹, 티스토리주소를 입력하고 추가를 누르면
카카오 개발자홈페이지에서 설정은 완료됩니다.
(앱 이름 왼쪽의 APP 아이콘을 클릭하면 아이콘을 업로드할 수 있습니다.)
HTML
skin.html에 카카오톡 공유버튼을 삽입할 곳에 다음을 삽입합니다.
<span id="kakao-link-btn"><img src="./images/kakaotalk.png" width="32"></span>
파일 업로드에서 아래 아이콘을 받아 업로드합니다.(이름은 바꾸지 마세요)
Javascript
<script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>')</script>
<!--jQuery 적용중이면 윗줄은 지우셔도 됩니다. 모르면 윗줄 까지 붙여넣으세요.-->
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script>
var firstImg=$(".imageblock:first-of-type img");
var contents="";
//var contents=$('article p').text().replace(/(<([^>]+)>)/ig,'').substring(0,200); //공유되는 메시지에 본문 내용을 포함하려면 맨 앞의 //를 지우세요.
if(firstImg.attr("src")){
var firstImgSrc=firstImg.attr("src");
var firstImgRatio = parseInt(firstImg.css("height"))/parseInt(firstImg.css("width"));
if (firstImgRatio <=0.27) var firstImgRatio=0.27;
}else{var firstImgSrc=location.origin+"/favicon.ico";var firstImgRatio=1}
Kakao.init('자바스크립트 키'); //위에서 복사한 자바스크립트 키를 왼쪽에 붙여넣으세요.
Kakao.Link.createTalkLinkButton({
container: '#kakao-link-btn',
label: '['+document.getElementsByTagName("TITLE")[0].text+']\n'+contents+'...',
image: {
src: firstImgSrc,
width: '300',
height: parseInt(300*firstImgRatio)
},
webButton: {
text: '블로그에서 이어보기',
url: location.origin+location.pathname
}
});
</script>
그대로 적용하면 다음같이 전송됩니다.
첫번째 이미지가 자동으로 포함되며(티스토리 업로더로 올린 이미지만.)
이미지가 없을경우 파비콘이 표시됩니다.
이전 글을 통해 적용중이셨던 분들은
<span id="ktalk"><img src="./images/kakaotalk.png" width="32" onclick="executeURLLink()"></span>
이 부분을 찾아
<span id="kakao-link-btn"><img src="./images/kakaotalk.png" width="32"></span> 으로 수정해주세요.
function executeURLLink() {
kakao.link("talk").send({
msg: $('.article p:first-child,.article p:nth-child(2),.article p:nth-child(3),.article p:nth-child(4)').text()+"\n...더보기",
url: curURL,
appid: "nubiz.tistory.com",
appver: "1.0",
appname: curTitle,
type: "link"
})
}
이부분을 찾아 지워주세요.
이렇게 하면 카카오스토리는 유지됩니다. 카카오스토리는 2015년 1분기중으로 지원종료되고 새 링크API가 나온다고하니 그떄 다시 포스팅 하겠습니다.
