카카오톡 공유하기 기능 삽입하기

📢 카카오톡 공유하기

이벤트 페이지에서 흔히 볼 수 있는 카카오톡 공유하기

developers.kakao 공식문서가 잘 되어 있어 보고 따라하면 기능 구현을 쉽게 할 수 있었다.

메시지 스타일도 여러 개 있어 상황에 맞춰 사용 가능

 

 

📌 사전 세팅

- kakao dev에 가입한 뒤 내 애플리케이션 플랫폼에 사용할 도메인을 사전에 등록해놓아야 함

  (메인 url을 등록해두면 공유하기 버튼 클릭 시 공유되는 페이지는 메인 url의 하위 url로 설정 가능)

- 내 애플리케이션 플랫폼에 등록 가능한 url은 제한이 없어 보임 (회사 홈페이지도 내 개인 플랫폼에 등록 가능)

- 공유하는 메시지의 썸네일은 보통 1200 * 630 많이 사용 (정사각형도 되고 제한은 없으며 script로 커스텀)

 

 

📌 유의점

- 크롬 개발자도구에서 모바일 모드를 켜둔 상태로는 기능이 구현되지 않음!!

(JS SDK는 PC 또는 모바일에 따라 동작이 변경되는 부분들이 있어서
user agent가 임의로 변경된 환경 (크롬 브라우저 > 개발자모드 > 모바일 설정)을 지원하지 않음)

 

 

📌 사용 방법

- 카카오톡 공유하기 공식 문서에서 cdn 및 script 복사해 커스텀 진행

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

Kakao Developers

 

Demo 메시지 생성할 수 있는 페이지는 여기

 

 

 

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

- 개별 아이템들을 리스트업 할 수 있는 피드 형식은 커머스에서 활용도 높아 보임

- 아래는 피드 형식으로 공유하기 할 경우 보이는 화면

 

카카오톡 공유하기 피드 형식 script

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',
      },
    },
  ],
});

 

 

 

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

- 기업 계정을 카카오톡 친구 해두면 주로 받는 스타일이 리스트 형식

- 아래는 리스트 형식으로 공유하기 할 경우 보이는 화면

 

카카오톡 링크 리스트 형식으로 구성하기 script

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',
      },
    },
  ],
});

 

 

 

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

- 커머스 계정에서 흔히 볼 수 있는, 가격이 메인이 되는 형식

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',
      },
    },
  ],
});

 

 

 

📌 텍스트 형식으로 카카오톡 링크 공유하기

- 가장 베이직한 텍스트 형식으로 공유하기

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

 

 

 

📌 캘린더 형식으로 카카오톡 링크 공유하기

- 캘린더 형식은 이번에 찾아보다가 처음 발견한 형식

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',
      },
    },
  ],
});