https://developers.kakao.com/docs/js#카카오톡-링크
카카오톡 링크Copy URLCopied!
카카오링크는 모바일에 설치된 카카오톡 앱을 이용하여 다양한 형태의 메시지를 보낼 수 있는 기능입니다.
Kakao Javascript SDK에서 사용하는 카카오톡 링크 버젼 3.5에서는 텍스트, 이미지, 링크, 버튼 형식의 메시지를 지원합니다.
카카오톡 링크 버튼 이미지는 여기에서 다운로드 할 수 있습니다.
카카오톡 링크
예제: 카카오톡 링크 버튼 생성하기 - 웹 버튼Copy URLCopied!
- 텍스트, 이미지, 웹버튼이 포함된 카카오톡 링크를 보내는 예제입니다.
- 앱 등록 과정을 통해 사용자들이 웹버튼을 클릭했을 때 이동할 도메인을 등록해야 합니다.
- 'YOUR APP KEY'를 등록한 앱의 Javascript 키로 변경해 주세요.
- 버튼에 표시되는 아이콘은 앱의 설정 - 일반의 상단의 아이콘을 클릭하여 변경 가능합니다.
'웹 버튼 형식의 카카오톡 링크 버튼을 생성합니다.
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>KakaoLink Demo(Web Button) - Kakao Javascript SDK</title>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</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>
// 사용할 앱의 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>
위 예제의 데모를 바로 확인해 보세요! 데모 보러가기
* 카카오톡 링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
* 이미지의 최소 크기는 가로80px, 세로 80px입니다. 이미지의 용량은 500KB 이하로 제한 됩니다.
링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스
예제: 카카오톡 링크 버튼 생성하기 - 앱 버튼Copy URLCopied!
- 텍스트, 이미지, 앱 버튼이 포함된 카카오톡 링크를 보내는 예제입니다.
- 앱 버튼을 사용자들이 클릭할 때 이동할 Android/iOS 앱을 등록합니다.
- 새로운 앱을 만듭니다. 앱 만들기
- 앱의 설정 - 일반에서 플랫폼 추가를 선택합니다.
- Android: 앱의 패키지 명을 입력합니다.
- iOS: 앱의 Bundle ID를 입력하고, iPhone/iPad 앱 스토어 ID를 입력합니다.
- 아래 코드에서 'YOUR APP KEY'를 등록한 앱의 Javascript 키로 변경해 주세요.
- 버튼에 표시되는 아이콘은 앱의 설정 - 일반의 상단의 아이콘을 클릭하여 변경 가능합니다.
'앱 버튼 형식의 카카오톡 링크 버튼을 생성합니다.
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>KakaoLink Demo(App Button) - Kakao Javascript SDK</title>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</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>
// 사용할 앱의 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'
},
appButton: {
text: '앱으로'
}
});
</script>
</body>
</html>
위 예제의 데모를 바로 확인해 보세요! 데모 보러가기
* 데모의 iOS/Android 플랫폼에 등록된 앱은 마켓에 없는 앱으로, 링크 메시지의 버튼을 클릭할 때 마켓까지만 이동합니다.
* 카카오톡 링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스
예제: 동적으로 바뀌는 내용의 카카오톡 링크 보내기Copy URLCopied!
- 동적으로 바뀌는 내용의 카카오톡 링크를 보내는 예제입니다.
- 아래 코드에서 'YOUR APP KEY'를 등록한 앱의 Javascript 키로 변경해 주세요.
- 버튼에 표시되는 아이콘은 앱의 설정 - 일반의 상단의 아이콘을 클릭하여 변경 가능합니다.
동적으로 바뀌는 내용의 카카오톡 링크를 보냅니다.
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>KakaoLink Demo(Dynamic) - Kakao Javascript SDK</title>
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
<body>
<h3>카카오톡 링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.</h3>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" />
</a>
<script>
// 사용할 앱의 Javascript 키를 설정해 주세요.
Kakao.init('YOUR APP KEY');
function sendLink() {
Kakao.Link.sendTalkLink({
label: '안녕하세요, 꽃다운 ' + Math.floor(Math.random()*(70)+ 15) + '살 개발자입니다.'
});
}
</script>
</body>
</html>
위 예제의 데모를 바로 확인해 보세요! 데모 보러가기
* 카카오톡 링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스
FAQCopy URLCopied!
로그인을 했을 때, 우울한 이모티콘과 함께 'Unauthorized'라는 페이지가 나옵니다.
- Kakao.init함수를 이용하여 앱의 Javascript 키를 설정해야 합니다.
- 앱 등록 과정을 통해 도메인을 등록해야 합니다. 이 때, 스킴(http://) 및 포트 번호까지 동일해야 합니다.
샘플 실행 시 'KakaoError: kakao.js should be loaded from a web server'라는 Exception이 발생합니다.
- 웹페이지가 파일시스템(file:///)이 아닌, 웹 서버에 올려져 있어야 합니다.
Python이 설치된 컴퓨터에서는 해당 폴더로 이동 후 다음과 같이 테스트용 웹 서버를 실행할 수 있습니다.
$ cd /path/to/your/folder/
$ python -m SimpleHTTPServer 8080
카카오톡 링크 전송 시 한글 텍스트가 깨져서 나옵니다.
- 카카오톡 링크로 한글 텍스트를 전송하기 위해서는 다음과 같이 웹페이지의 Character Encoding을 지정해 주어야 합니다.
<meta charset="utf-8">
카카오톡 링크 전송 시 URL에 한글이 포함된 경우 웹페이지가 열리지 않습니다.
- 아래와 같이 한글 부분을 인코딩해서 전송하면 됩니다.
webLink: { text: '테스트', url: 'https://dev.kakao.com/docs?key=' + encodeURIComponent('세종대왕') }
Kakao Javascript SDK는 어떤 브라우저를 지원하나요?
- IE 8+ (카카오스토리 사진 업로드: IE10+)
- Chrome 4+
- Safari 4+
- Firefox 3.5+
안드로이드/iOS 앱의 웹뷰에서 Javascript SDK를 사용할 수 있나요?
- 웹뷰는 공식 지원하지 않습니다. 네이티브 앱에서는 안드로이드/iOS SDK를 이용하는 것을 권장합니다.