WebPublisher/JavaScript & jQuery
[javaScript] 카카오톡으로 링크 공유하기
amanda
2023. 11. 7. 11:44
*카카오톡 공유하기 Demo
https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
<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
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
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',
},
},
],
});