카카오링크

카카오링크는 카카오 플랫폼 서비스의 대표 기능으로써 사용자의 모바일 기기에 설치된 카카오 플랫폼과 연동하여 다양한 기능을 실행할 수 있습니다. 카카오링크 SDK는 Third Party 서비스와 카카오 플랫폼을 쉽고 빠르게 연동할 수 있도록 도와줍니다.

현재 이용할 수 있는 카카오링크는 다음과 같습니다.

카카오톡링크

카카오톡링크는 모바일 기기에 설치된 카카오톡을 실행하여 사용자가 선택한 친구나 채팅방으로 메시지를 전송할 수 있는 기능입니다. 최신 버전의 카카오링크 SDK에서는 카카오톡링크 V2를 지원하고 있습니다.

카카오톡링크 V2에서는 새로운 형태의 메시지 템플릿 V2를 이용하여 기존의 V1보다 훨씬 다양한 형태의 메시지를 전송할 수 있습니다.

  • 카카오링크 SDK에서는 널리 사용될 수 있는 기본적인 형태의 메시지 템플릿을 피드, 리스트, 위치, 스크랩으로 정의하고 소스코드 상에서 간결하게 생성할 수 있는 인터페이스를 제공합니다.
  • Third Party 서비스에 최적화된 메시지 템플릿을 구성할 수 있는 메시지 템플릿 빌더를 제공합니다. 개발자 웹사이트의 [내 애플리케이션] - 앱 선택 - [설정] - [메시지 템플릿 v2] 메뉴로 들어가면 자신의 서비스에 특화된 메시지 템플릿을 손쉽게 작성할 수 있습니다.


카카오톡링크는 사용자의 모바일 기기에 해당 버전의 카카오톡링크를 지원하는 카카오톡이 설치되어 있어야 합니다. 최신 버전의 카카오톡링크를 지원하는 플랫폼 별 카카오톡 최소 버전은 다음과 같습니다.

  • Android: 6.0.0
  • iOS: 5.9.8

메시지 타입 소개

카카오톡링크는 미리 정의된 메시지 템플릿을 이용하여 메시지를 전송합니다. 카카오톡링크로 보낼 수 있는 메시지 템플릿 유형은 다음과 같습니다.

자세히 보고 싶은 메시지를 클릭하세요.

default_feed.png feed.png

default_list.png list.png

default_commerce.png commerce.png

default_location.png default_scrap.png

시작하기 전에

  • 카카오톡링크를 전송하는 예제입니다.
  • 앱 등록 과정을 통해 도메인을 등록해야 합니다.
  • 'YOUR APP KEY'를 등록한 앱의 JavaScript 키로 변경해 주세요.

기본 템플릿 보내기

카카오링크 SDK에서는 가장 많이 쓰이는 메시지 템플릿 형태를 기본으로 제공하고 있습니다.

콘텐츠 오브젝트(content)

콘텐츠의 내용을 담고 있는 오브젝트입니다.

기본 템플릿에서 사용되는 콘텐츠 오브젝트는 한 개의 이미지와 제목, 설명, 링크 정보를 가질 수 있습니다.

이름 타입 필수 설명
title String O 콘텐츠의 타이틀
imageUrl String O 콘텐츠의 이미지 URL
link Object O 콘텐츠 클릭 시 이동할 링크 정보
imageWidth Number X 콘텐츠의 이미지 너비 (단위: 픽셀)
imageHeight Number X 콘텐츠의 이미지 높이 (단위: 픽셀)
description String X 콘텐츠의 상세 설명

메시지 템플릿 이미지 요구사항

  • RFC2396, RFC1034, RFC1123를 준수하지 않는 이미지 URL은 이미지가 보이지 않습니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

메시지에서 콘텐츠 영역이나 버튼 클릭 시에 이동되는 링크 정보 오브젝트입니다.

링크 실행 우선순위는 ExecParams > mobileWebUrl > webUrl 입니다.

이름 타입 필수 설명
webUrl String X PC버전 카카오톡에서 사용하는 웹 링크 URL
mobileWebUrl String X 모바일 카카오톡에서 사용하는 웹 링크 URL
androidExecParams String X 안드로이드 카카오톡에서 사용하는 앱 링크 URL에 사용될 파라미터.
iosExecParams String X iOS 카카오톡에서 사용하는 앱 링크 URL에 사용될 파라미터.

소셜 오브젝트(social)

좋아요 수, 댓글 수 등의 소셜 정보를 표현하기 위해 사용되는 오브젝트입니다.

5개의 속성 중 최대 3개만 표시해 줍니다. 우선순위는 like > comment > shared > view > subscriber 입니다.

이름 타입 필수 설명
likeCount Number X 콘텐츠의 좋아요 수
commentCount Number X 콘텐츠의 댓글 수
sharedCount Number X 콘텐츠의 공유 수
viewCount Number X 콘텐츠의 조회 수
subscriberCount Number X 콘텐츠의 구독 수

버튼 오브젝트(button)

메시지 하단에 추가되는 버튼 오브젝트입니다.

이름 타입 필수 설명
title String O 버튼의 타이틀
link Object O 버튼 클릭 시 이동할 링크 정보

커머스 오브젝트(commerce)

가격 정보를 표현하기 위해 사용되는 오브젝트입니다.

이름 타입 필수 설명
regularPrice Number O 정상가격
discountPrice Number X 할인된 가격
discountRate Number X 할인율

피드 템플릿 보내기

  1. 이미지 영역: 최대 1장 표시 / 800px * 800px이상 (권장사항)
  2. 제목/설명 영역: 최대 4줄 표시 (제목, 설명 각각 2줄 표시)
  3. 소셜 영역: 최대 3개 표시 (순서: 좋아요 > 댓글 > 공유 > 조회 > 구독)
  4. 버튼 영역: 최대 2개 표시, 버튼명 8자 이하 권장

default_feed_spec.png

기본 템플릿으로 제공되는 피드 템플릿은 하나의 콘텐츠와 하나의 기본 버튼을 가집니다. 소셜 정보를 추가할 수 있으며 임의의 버튼을 설정할 수도 있습니다.

여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 피드 템플릿은 커스텀 템플릿을 이용하여 보내실 수 있습니다.

이름 타입 필수 설명
objectType String O 템플릿 종류. "feed" 고정값
content Object O 메시지의 메인 콘텐츠 정보
social Object X 메인 콘텐츠에 대한 소셜 정보
buttonTitle String X 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons Array<Object> X 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
카카오톡링크 버튼 생성하기
<!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 v2 Demo(Default / Feed) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',
      objectType: 'feed',
      content: {
        title: '딸기 치즈 케익',
        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
        imageUrl: 'http://mud-kage.kakao.co.kr/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'
          }
        }
      ]
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

동적으로 카카오톡링크 전송하기
<!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 v2 Demo(Default / Feed) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    function sendLink() {
      Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
          title: '딸기 치즈 케익',
          description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
          imageUrl: 'http://mud-kage.kakao.co.kr/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'
            }
          }
        ]
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

리스트 템플릿 보내기

  1. 헤더 영역
  2. 아이템 리스트 영역: 최대 3개 표시
  3. 제목/설명 영역: 최대 3줄 표시 (제목 2줄, 설명 1줄 표시)
  4. 이미지 영역: 400px * 400px (권장사항)
  5. 버튼 영역: 최대 2개 표시, 버튼명 8자 이하 권장

default_list_spec.png

리스트 템플릿은 메시지 상단에 노출되는 헤더 타이틀과, 콘텐츠 목록, 버튼 등으로 구성됩니다. 헤더와 콘텐츠 각각의 링크를 가질 수 있습니다. 피드 템플릿과 마찬가지로 하나의 기본 버튼을 가지며 임의의 버튼을 설정할 수 있습니다.

보다 확장된 형태의 리스트 템플릿은 커스텀 템플릿을 이용하여 보내실 수 있습니다.

이름 타입 필수 설명
objectType String O 템플릿 종류. "list" 고정값
headerTitle String O 리스트 상단에 노출되는 메인 타이틀. 최대 200자
headerLink Object O 상단 타이틀의 링크 정보
contents Array<Object> O 리스트에 노출되는 콘텐츠 목록. 최소 2개, 최대 3개
buttonTitle String X 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons Array<Object> X 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
카카오톡링크 버튼 생성하기
<!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 v2 Demo(Default / List) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',
      objectType: 'list',
      headerTitle: 'WEEKLY MAGAZINE',
      headerLink: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com'
      },
      contents: [{
        title: '취미의 특징, 탁구',
        description: '스포츠',
        imageUrl: 'http://mud-kage.kakao.co.kr/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com'
        }
      }, {
        title: '크림으로 이해하는 커피이야기',
        description: '음식',
        imageUrl: 'http://mud-kage.kakao.co.kr/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com'
        }
      }, {
        title: '감성이 가득한 분위기',
        description: '사진',
        imageUrl: 'http://mud-kage.kakao.co.kr/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com'
        }
      }],
      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'
          }
        }
      ]
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

동적으로 카카오톡링크 전송하기
<!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 v2 Demo(Default / List) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    function sendLink() {
      Kakao.Link.sendDefault({
        objectType: 'list',
        headerTitle: 'WEEKLY MAGAZINE',
        headerLink: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com'
        },
        contents: [{
          title: '취미의 특징, 탁구',
          description: '스포츠',
          imageUrl: 'http://mud-kage.kakao.co.kr/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com'
          }
        }, {
          title: '크림으로 이해하는 커피이야기',
          description: '음식',
          imageUrl: 'http://mud-kage.kakao.co.kr/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com'
          }
        }, {
          title: '감성이 가득한 분위기',
          description: '사진',
          imageUrl: 'http://mud-kage.kakao.co.kr/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com'
          }
        }],
        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'
            }
          }
        ]
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

위치 템플릿 보내기

  1. 이미지 영역: 최대 1장 표시 / 800px * 800px이상 (권장사항)
  2. 제목/설명 영역: 최대 4줄 표시 (제목, 설명 각각 2줄 표시)
  3. 소셜 영역: 최대 3개 표시 (순서: 좋아요 > 댓글 > 공유 > 조회 > 구독)
  4. 버튼 영역: 최대 2개 표시, 버튼명 8자 이하 권장

kakao_link_default_location.png

위치 템플릿은 지도 표시에 사용되는 주소 정보와 해당 위치를 설명할 수 있는 콘텐츠 오브젝트로 구성됩니다. 왼쪽 하단에 기본 버튼, 오른쪽 하단에 지도를 보여주기 위한 "위치 보기" 버튼이 추가됩니다. "위치 보기" 버튼을 클릭하면 카카오톡 채팅방 내에서 바로 지도 화면으로 전환하여 해당 주소의 위치를 확인할 수 있습니다.

이름 타입 필수 설명
objectType String O 템플릿 종류. "location" 고정값
content Object O 메시지의 메인 콘텐츠 정보
address String O 공유할 위치의 주소
예) 경기 성남시 분당구 판교역로 235
addressTitle String X 카카오톡 내의 지도 뷰에서 사용되는 타이틀
예) 카카오판교오피스
social Object X 메인 콘텐츠에 대한 소셜 정보
buttonTitle String X 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons Array<Object> X 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
카카오톡링크 버튼 생성하기
<!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 v2 Demo(Default / Location) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',
      objectType: 'location',
      address: '경기 성남시 분당구 판교역로 235 에이치스퀘어 N동 8층',
      addressTitle: '카카오 판교오피스 카페톡',
      content: {
        title: '신메뉴 출시♥︎ 체리블라썸라떼',
        description: '이번 주는 체리블라썸라떼 1+1',
        imageUrl: 'http://mud-kage.kakao.co.kr/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/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'
          }
        }
      ]
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

동적으로 카카오톡링크 전송하기
<!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 v2 Demo(Default / Location) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    function sendLink() {
      Kakao.Link.sendDefault({
        objectType: 'location',
        address: '경기 성남시 분당구 판교역로 235 에이치스퀘어 N동 8층',
        addressTitle: '카카오 판교오피스 카페톡',
        content: {
          title: '신메뉴 출시♥︎ 체리블라썸라떼',
          description: '이번 주는 체리블라썸라떼 1+1',
          imageUrl: 'http://mud-kage.kakao.co.kr/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/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'
            }
          }
        ]
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

기본으로 제공되는 템플릿 외 직접 제작한 템플릿을 사용하고 싶다면 커스텀 템플릿을 이용하시기 바랍니다.

스크랩 템플릿 보내기

  1. 이미지 영역: 최대 1장 표시 / 800px * 800px이상 (권장사항)
  2. 제목/설명 영역: 최대 4줄 표시 (제목, 설명 각각 2줄 표시)
  3. 버튼 영역: 최대 1개 표시, 버튼명 8자 이하 권장

A. og:image / B. video:duration, music:duration / C. og:title, og:description / D. og:site_name

default_scrap_spec.png

웹 사이트 콘텐츠를 해당 웹 페이지의 Open Graph 정보를 바탕으로 이미지, 제목, 설명, 링크를 구성하여 별도의 템플릿 생성 작업 없이 URL만으로 간편하게 전달합니다.

내 애플리케이션 설정에 등록된 도메인만 전송 가능합니다.
도메인은 개발자 웹사이트의 [내 애플리케이션] - 앱 선택 - [설정] - [일반] 메뉴에서 등록할 수 있습니다.

다음은 개발자 웹사이트의 메인 페이지를 스크랩하여 전송하는 코드입니다.

카카오톡링크 버튼 생성하기
<!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 v2 Demo(Scrap) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createScrapButton({
      container: '#kakao-link-btn',
      requestUrl: 'https://developers.kakao.com'
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

동적으로 카카오톡링크 전송하기
<!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 v2 Demo(Scrap) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    function sendLink() {
      Kakao.Link.sendScrap({
        requestUrl: 'https://developers.kakao.com'
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

자신의 서비스에 보다 특화된 형태의 스크랩 메시지를 전송하려면 스크랩용 커스텀 템플릿을 이용해야 합니다.

커스텀 템플릿은 개발자 웹사이트의 [내 애플리케이션] - 앱 선택 - [설정] - [메시지 템플릿 v2] 메뉴를 통해 생성할 수 있습니다. 스크랩에 사용되는 메시지 템플릿은 콘텐츠의 입력 값으로 아래 표에 나와 있는 스크랩 정보를 포함해야 합니다. 해당 키가 입력된 메시지 템플릿 구성 요소에 스크랩된 웹사이트 정보가 서버에서 자동으로 입력됩니다.

Argument 키 설명
${SCRAP_REQUEST_URL} 스크랩 요청 URL
${SCRAP_HOST} 요청 URL의 호스트
${SCRAP_TITLE} 요청 URL의 제목
${SCRAP_DESCRIPTION} 요청 URL의 설명
${SCRAP_IMAGE} og:image
${SCRAP_IMAGE_WIDTH} og:image의 width
${SCRAP_IMAGE_HEIGHT} og:image의 height
${SCRAP_DURATION} og:duration

커머스 템플릿 보내기

  1. 이미지 영역: 최대 1장 표시 / 800px * 800px이상 (권장사항)
  2. 할인된 가격 영역
  3. 정상가격 영역
  4. 할인율 영역
  5. 제품명 영역: 최대 2줄 표시
  6. 버튼 영역: 최대 2개 표시, 버튼명 8자 이하 권장

default_commerce_spec.png

기본 템플릿으로 제공되는 커머스 템플릿은 하나의 상품 콘텐츠와 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다.

여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 커머스 템플릿은 커스텀 템플릿을 이용하여 보내실 수 있습니다.

이름 타입 필수 설명
objectType String O 템플릿 종류. "commerce" 고정값
content Object O 메시지의 메인 상품 콘텐츠 정보
commerce Object O 상품에 대한 가격 정보
buttonTitle String X 기본 버튼 타이틀("자세히 보기")을 변경하고 싶을 때 설정
buttons Array<Object> X 메시지 하단에 추가되는 버튼 목록. 버튼 타이틀과 링크를 변경하고 싶을때, 버튼 두개를 사용하고 싶을때 사용. 최대 2개
카카오톡링크 버튼 생성하기
<!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 v2 Demo(Default / Commerce) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',
      objectType: 'commerce',
      content: {
        title: 'Ivory long dress (4 Color)',
        imageUrl: 'http://mud-kage.kakao.co.kr/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com'
        }
      },
      commerce: {
        regularPrice: 208800,
        discountPrice: 146160,
        discountRate: 30
      },
      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'
          }
        }
      ]
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

동적으로 카카오톡링크 전송하기
<!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 v2 Demo(Default / Commerce) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    function sendLink() {
      Kakao.Link.sendDefault({
        objectType: 'commerce',
        content: {
          title: 'Ivory long dress (4 Color)',
          imageUrl: 'http://mud-kage.kakao.co.kr/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com'
          }
        },
        commerce: {
          regularPrice: 208800,
          discountPrice: 146160,
          discountRate: 30
        },
        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'
            }
          }
        ]
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

커스텀 템플릿 보내기

커스텀 템플릿을 보내기 위해서는 [메시지 템플릿 v2]에서 템플릿을 생성해야 합니다. 메시지 템플릿 생성가이드
생성한 템플릿의 ID(templateId)와 Argument(templateArgs)를 설정하여 메시지를 전송할 수 있습니다.

FEED TYPE
  1. 이미지 영역: 최대 3장 표시 / 800px * 800px이상 (권장사항)
  2. 프로필: 프로필 이미지와 프로필 명을 표현하는 영역 / 400px * 400px이상 (권장사항)
  3. 제목/설명 영역: 최대 4줄 표시 (제목, 설명 각각 2줄 표시)
  4. 소셜 영역: 최대 3개 표시 (순서: 좋아요 > 댓글 > 공유 > 조회 > 구독)
  5. 버튼 영역: 최대 2개 표시, 버튼명 8자 이하 권장
  6. 서비스/출처 정보 영역: 서비스명, 출처를 표현하는 영역 / 200px * 200px (권장사항)

feed_spec.png

LIST TYPE
  1. 헤더 영역: 배경 이미지 설정 가능 / 800px * 190px (권장사항)
  2. 아이템 리스트 영역: 최대 5개 표시
  3. 제목/설명 영역: 최대 3줄 표시 (제목 2줄, 설명 1줄 표시)
  4. 이미지 영역: 재생 아이콘/시간 표시 가능 / 400px * 400px (권장사항)
  5. 버튼 영역: 최대 2개 표시, 버튼명 8자 이하 권장
  6. 서비스/출처 정보 영역: 서비스명, 출처를 표현하는 영역 / 200px * 200px (권장사항)

list_spec.png

COMMERCE TYPE
  1. 이미지 영역: 최대 3장 표시 / 800px * 800px이상 (권장사항)
  2. 프로필: 프로필 이미지와 프로필 명을 표현하는 영역 / 400px * 400px이상 (권장사항)
  3. 할인된 가격 영역
  4. 정상가격 영역
  5. 할인율 영역
  6. 제품명 영역: 최대 2줄 표시
  7. 버튼 영역: 최대 2개 표시, 버튼명 8자 이하 권장

commerce_spec.png

카카오톡링크 버튼 생성하기
<!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 v2 Demo(Scrap) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createCustomButton({
      container: '#kakao-link-btn',
      templateId: YOUR TEMPLATE ID,
      templateArgs: {
        'title': '제목 영역입니다.',
        'description': '설명 영역입니다.'
      }
    });
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

동적으로 카카오톡링크 전송하기
<!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 v2 Demo(Scrap) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    function sendLink() {
      Kakao.Link.sendCustom({
        templateId: YOUR TEMPLATE ID,
        templateArgs: {
          'title': '제목 영역입니다.',
          'description': '설명 영역입니다.'
        }
      });
    }
  //]]>
</script>

</body>
</html>

위 예제의 데모를 바로 확인해 보세요! 데모 보러가기

  • 카카오링크는 카카오톡 앱이 설치되어 있는 모바일 기기에서만 전송 가능합니다.
  • 이미지의 용량은 2MB 이하로 제한 됩니다.

링크와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

이미지 업로드

카카오링크 SDK는 메시지 전송 기능 이외에 이미지 업로드 기능을 제공합니다. 카카오링크 전용 이미지 저장소에 로컬에 있는 이미지를 업로드하거나 원격지에 있는 이미지를 스크랩하여 업로드할 수 있습니다.

업로드된 이미지는 최대 20일간 보관됩니다.

이미지 업로드 기능을 이용하면 카카오톡링크 V1에서 지원되지 않았던 로컬 이미지를 이용한 메시지 전송이 가능해집니다. 이미지 업로드 관련 기능은 다음과 같습니다.

이미지 업로드
<!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 v2 Demo(Upload Image) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    var btn = document.getElementById('btn');
    btn.onclick = function() {
      var files = document.getElementById('file').files;
      Kakao.Link.uploadImage({
        file: files
      }).then(function(res){
        document.getElementById('uploadUrl').value = res.infos.original.url
      });
    }
  //]]>
</script>

</body>
</html>

링크 이미지와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

이미지 스크랩
<!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 v2 Demo(Scrap Image) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    var btn = document.getElementById('btn');
    btn.onclick = function() {
      var url = document.getElementById('url').value;
      Kakao.Link.scrapImage({
        imageUrl: url
      }).then(function(res){
          document.getElementById('scrapUrl').value = res.infos.original.url
      });
    };
  //]]>
</script>

</body>
</html>

링크 이미지와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

이미지 삭제
<!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 v2 Demo(Delete Image) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    var btn = document.getElementById('btn');
    btn.onclick = function() {
      var url = document.getElementById('url').value;
      Kakao.Link.deleteImage({
        imageUrl: url
      });
    };
  //]]>
</script>

</body>
</html>

링크 이미지와 관련된 자세한 내용이 궁금하다면? Kakao.Link 레퍼런스

카카오스토리링크

카카오스토리 앱이 설치되어 있으면 카카오스토리링크를 이용하여 내용이 미리 입력된 글쓰기 화면을 실행할 수 있습니다.

카카오스토리링크 개발가이드


Last Modified : 2017-07-28