June 04, 2020

How to send a link message using javascript in KAKAO talk.


To send a link message using javascript in KAKAO talk, the API source provided by Kakao Developers is requred.

자바스크립트를 이용하여 카톡 링크 메시지를 전송하려면 카카오 개발자(Kakao Developers) 페이지에서 제공하는 API 관련 소스가 필요합니다.

Follow the steps below.
다음의 순서를 따라하면 됩니다.

1. Create an application on the Kakao Developers site.
1. Kakao Developers 사이트에서 애플리케이션 생성.

2. Obtain the Javascript API key from "App Key" and reflect it in the source code below.
2. "앱 키"에서 Javascript API 키를 획득 후 아래 소스코드에 반영.

3. In "Platform" → "Web", add the domain to add the source code below and the domain to connect to.
3. "플랫폼" → "Web"에서 아래의 소스코드를 추가할 도메인과 연결할 도메인 추가.
*e.g. http://localhost:8081

4. Create a message template in "Kakao Link".
4. "카카오링크"에서 메시지 템플릿 작성.

5. Execute the source code below.
5. 아래 소스코드를 실행.
* python3 -m http.server 8081 → http://localhost:8081

< index.html >

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>카톡 공유</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
<body>
    <input type="button" onClick="sendLinkCustom();" value="Custom"/>
    <input type="button" onClick="sendLinkDefault();" value="Default"/>

<script type="text/javascript">
    function sendLinkCustom() {
        Kakao.init("[Javascript API key]");
        Kakao.Link.sendCustom({
            templateId: [templete id]
        });
    }
</script>

<script>
try {
  function sendLinkDefault() {
    Kakao.init('[Javascript API key]')
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '딸기 치즈 케익',
        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
        imageUrl:
          'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845,
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    })
  }
; window.kakaoDemoCallback && window.kakaoDemoCallback() }
catch(e) { window.kakaoDemoException && window.kakaoDemoException(e) }
</script>
   
</body>
</html>