Skip to content
2015.05.12 18:45

카카오 API

조회 수 902 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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



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를 이용하는 것을 권장합니다.


로그인 후 댓글쓰기가 가능합니다.

?

List of Articles
번호 분류 제목 날짜 조회 수
1345 디지털스트림 DHT235K file 2015.05.18 437
1344 주식 보유종목 점검 file 2015.05.18 668
1343 재미재미 [감동]이혼 후 찾아온 전남편 file 2015.05.15 1393
» 카카오 API 2015.05.12 902
1341 주식 키움 api 2015.05.12 3492
1340 WindowsTip 윈도우 ip helper ipv6 도데체 무엇인가? 2015.05.11 3427
1339 WindowsTip 캐논 MG 2990 스캔 드라이버 file 2015.05.03 2912
1338 WindowsTip 캐논 프린터 MG2990 드라이버 file 2015.05.03 3673
1337 주식 대통령 선거일 2015.04.23 1526
1336 WindowsTip Fasoo DRM 삭제하기(fph) file 2015.04.13 8090
Board Pagination Prev 1 ... 88 89 90 91 92 ... 224 Next
/ 224

http://urin79.com

우린친구블로그

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소