[javaScript] 카카오톡으로 링크 공유하기

*카카오톡 공유하기 Demo

https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed

Kakao Developers

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.4.0/kakao.min.js"
  integrity="sha384-mXVrIX2T/Kszp6Z0aEWaA8Nm7J6/ZeWXbL8UpGRjKwWe56Srd/iyNmWMBhcItAjH" crossorigin="anonymous"></script>
<script>
  Kakao.init('c089c8172def97eb00c07217cae17495'); // 사용하려는 앱의 JavaScript 키 입력
</script>

<a id="kakaotalk-sharing-btn" href="javascript:;">
  <img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
    alt="카카오톡 공유 보내기 버튼" />
</a>

<script>
  Kakao.Share.createDefaultButton({
    container: '#kakaotalk-sharing-btn',
    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',
        },
      },
    ],
  });
</script>

 

 

 

 

https://developers.kakao.com/docs/latest/ko/message/js-link

Kakao Developers

 

 

 

1. 피드 형식으로 카카오톡 링크 공유하기

카카오톡 링크 피드형식으로 공유하기 할 경우 보이는 화면

Kakao.Share.sendDefault({
  objectType: 'feed',
  content: {
    title: '오늘의 디저트',
    description: '아메리카노, 빵, 케익',
    imageUrl:
      'https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  itemContent: {
    profileText: 'Kakao',
    profileImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
    titleImageText: 'Cheese cake',
    titleImageCategory: 'Cake',
    items: [
      {
        item: 'Cake1',
        itemOp: '1000원',
      },
      {
        item: 'Cake2',
        itemOp: '2000원',
      },
      {
        item: 'Cake3',
        itemOp: '3000원',
      },
      {
        item: 'Cake4',
        itemOp: '4000원',
      },
      {
        item: 'Cake5',
        itemOp: '5000원',
      },
    ],
    sum: '총 결제금액',
    sumOp: '15000원',
  },
  social: {
    likeCount: 10,
    commentCount: 20,
    sharedCount: 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',
      },
    },
  ],
});

 

 

 

 

2. 리스트 형식으로 카카오톡 링크 공유하기

카카오톡 링크 리스트 형식으로 공유할 경우 보이는 화면

Kakao.Share.sendDefault({
  objectType: 'list',
  headerTitle: 'WEEKLY MAGAZINE',
  headerLink: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
  contents: [
    {
      title: '취미의 특징, 탁구',
      description: '스포츠',
      imageUrl:
        'http://k.kakaocdn.net/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '크림으로 이해하는 커피이야기',
      description: '음식',
      imageUrl:
        'http://k.kakaocdn.net/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
      link: {
        mobileWebUrl: 'https://developers.kakao.com',
        webUrl: 'https://developers.kakao.com',
      },
    },
    {
      title: '감성이 가득한 분위기',
      description: '사진',
      imageUrl:
        'http://k.kakaocdn.net/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',
      },
    },
  ],
});

 

 

 

3. 커머스 형식으로 카카오톡 링크 공유하기

Kakao.Share.sendDefault({
  objectType: 'commerce',
  content: {
    title: '언제 어디든, 더 쉽고 편하게 당신의 일상을 더 즐겁게, 헤이 라이언의 이야기를 들려드릴게요.',
    imageUrl:
      'http://k.kakaocdn.net/dn/dScJiJ/btqB3cwK1Hi/pv5qHVwetz5RZfPZR3C5K1/kakaolink40_original.png',
    link: {
      mobileWebUrl: 'https://developers.kakao.com',
      webUrl: 'https://developers.kakao.com',
    },
  },
  commerce: {
    productName: '카카오미니',
    regularPrice: 100000,
    discountRate: 10,
    discountPrice: 90000,
  },
  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',
      },
    },
  ],
});

 

 

 

4. 텍스트 형식으로 공유하기

Kakao.Share.sendDefault({
  objectType: 'text',
  text:
    '기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오톡 공유는 다른 템플릿을 이용해 보낼 수 있습니다.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com',
  },
});

 

 

 

5. 캘린더 형식으로 공유하기

Kakao.Share.sendDefault({
  objectType: 'calendar',
  idType: 'event',
  id: '${YOUR_EVENT_ID}',
  content: {
    title: '1월 신작 평론 모임',
    description: '따끈한 신작 감상평을 나누는 월간 모임에 초대합니다.',
    imageUrl:
      'http://k.kakaocdn.net/dn/dFUqwp/bl3SUTqb2VV/VFSqyPpKUzZVVMcmotN9A0/kakaolink40_original.png',
    link: {
      webUrl: 'https://developers.kakao.com',
      mobileWebUrl: 'https://developers.kakao.com',
    },
  },
  buttons: [
    {
      title: '모임 주제 보기',
      link: {
        webUrl: 'https://developers.kakao.com',
        mobileWebUrl: 'https://developers.kakao.com',
      },
    },
  ],
});