Web에서 카카오톡 링크 API 달기
지인으로 부터 카카오톡 링크를 웹에 달아달라는 부탁을 받고
카카오톡 링크를 달아보았습니다
기록을 위해서 포스트를 정리해 봅니다
먼저 KaKaoDevelopers 사이트에 가입합니다
https://developers.kakao.com/
KaKaoDevelopers 사이트에 로그인 후
오른쪽 위의 노란색 화살표를 클릭하면
내 어플리케이션 메뉴가 있다.
그 페이지에서 앱 만들기를 선택한다.
임의의 이름을 입력하고 앱을 만들면 앱 키가 바로 발급된다
아래에 TestApp 이라는 이름으로 앱을 만들었다
그리고 위 페이지에 보면 플랫폼 추가라는 버튼을 누르면
Android , iOS, Web 세가지 중에서 플랫폼을 선택할 수 있는데,
자신의 개발에 필요한 플랫폼을 선택하면 됩니다
저는 웹에서 카카오톡 링크가 필요하기 때문에 웹을 선택하였습니다
그리고 카카오톡 링크를 사용할 도메인을 입력하여 줍니다
웹에 입력할 소스 샘플은
개발가이드 > JavaScript 개발 가이드에 있습니다
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/> <title>KakaoLink Demo(Web Button) - Kakao JavaScript SDK</title> <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script> <style type='text/css'> /* <![CDATA[ */ #file-input-wrapper { display : none ; margin-top : 50px ; } /* ]]> */ </style> </head> <body> <h3>카카오톡 앱이 설치되어 있는 모바일 기기라면 아래의 링크가 동작합니다.</h3> <a id="kakao-link-btn" href="javascript:;"> <img src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg"/> </a> <script type='text/javascript'> //<![CDATA[ // // 사용할 앱의 JavaScript 키를 설정해 주세요. Kakao.init('YOUR APP KEY'); // // 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다. Kakao.Link.createTalkLinkButton({ container: '#kakao-link-btn', label: '카카오링크 샘플에 오신 것을 환영합니다.', image: { src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg', width: '300', height: '200' }, webButton: { text: '카카오 디벨로퍼스', url: 'https://dev.kakao.com/docs/js' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다. } }); //]]> </script> </body> </html>위의 소스에서 필요한 부분만 선택하면 된다
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<style type='text/css'>
/* <![CDATA[ */
#file-input-wrapper {
display : none ;
margin-top : 50px ;
}
/* ]]> */
</style>
<a id="kakao-link-btn" href="javascript:;">
<img src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg"/ width=50 height=50>
</a>
<script type='text/javascript'>
//<![CDATA[
// // 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('88e2d367c5272b7961c97d30a3aab7ad');
// // 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
Kakao.Link.createTalkLinkButton({
container: '#kakao-link-btn',
label: '테스트 웹 개발',
image: {
src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg',
width: '300',
height: '200'
},
webButton: {
text: '테스트 링크 GoGo',
url: 'http://www.testapp.com' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
}
});
//]]>
</script>
위에 빨간 색으로 되어 있는 부분을 수정합니다
특히 KaKao.init 에 위에서 만들었던 앱 키(JavaScript 키) 를 입력해 주어야 합니다
label, image 속성, 웹 버튼의 text, url 을 수정한다
url 에 한글이 있다면 encodeURIComponent 로 인코딩해서 전송한다
webLink: {
text: '테스트', url: 'https://dev.kakao.com/docs?key=' + encodeURIComponent('한글') }그리고 카카오톡 링크가 잘 동작하는지 확인해 보면 됩니다
그런데 링크 버튼이 안드로이드, iOS, 윈도우즈 데스크탑 에서 잘 작동하는데,
Mac 에서는 잘 작동하지 않았습니다;
혹시 방법을 아시는 분은 댓글로 알려주시면 감사하겠습니다 