카카오 API

by Progress posted May 12, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄



https://developers.kakao.com/docs/js#카카오톡-링크


카카오톡 링크Copy URLCopied!

카카오링크는 모바일에 설치된 카카오톡 앱을 이용하여 다양한 형태의 메시지를 보낼 수 있는 기능입니다.
Kakao Javascript SDK에서 사용하는 카카오톡 링크 버젼 3.5에서는 텍스트, 이미지, 링크, 버튼 형식의 메시지를 지원합니다.
카카오톡 링크 버튼 이미지는 여기에서 다운로드 할 수 있습니다.

카카오톡 링크

kakaolink.png

예제: 카카오톡 링크 버튼 생성하기 - 웹 버튼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 앱을 등록합니다.
    1. 새로운 앱을 만듭니다. 앱 만들기
    2. 앱의 설정 - 일반에서 플랫폼 추가를 선택합니다.
    3. Android: 앱의 패키지 명을 입력합니다.
    4. 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를 이용하는 것을 권장합니다.