안녕하세요 카카오 공유하기 API를 통해 웹 애플리케이션을 개발중입니다.
제가 Next.js로 한 페이지를 공유하기 버튼을 구현중인데요(상세페이지라 페이지는 동적으로 URL이 다릅니다.)
window.Kakao.Share.sendScrap({
templateId: 84445,
templateArgs: {
title: title,
description: content,
url: window.location.href,
},
});
이렇게 해서 title과 content를 동적으로 변경시키고 싶은데 사용자 정의 템플릿으로 설정되었던 것만 나오고 안되네요ㅠㅠ
독스를 읽어봐도 잘 모르겠어서 여기에 문의 드립니다.
- 공유할 URL은 위 처럼 url 프로퍼티에 설정하는 것이 맞나요? (이것도 제가 플랫폼 url 설정한대로만 가서 어떻게 하는지 잘 모르겠네요)
- title과 description을 동적으로 어떻게 설정하나요??
tim.l
2
안녕하세요.
아래와 같이 메시지 템플릿에 변수 처리하고
동일하게 파라메터 설정하셔서 사용하시면 파라메터 전달 받아 메시지 발송가능합니다.
(sendScrap 사용하셨는데 requestUrl 파라메터 없이 사용하시면 에러 발생 안하던가요?)
Kakao.Share.sendScrap({
templateId: 84600,
templateArgs: {
title: "카카오 공유 API에서 title,description 동적으로 설정하는 방법",
desc: "templateArgs에서 설정한 값을 템플릿에 ${title} 형태로 입력합니다.",
url: window.location.href
},
callback: function() {
alert("share complete")
},
requestUrl: "https://developers.kakao.com/",
});
}
@tim.l
감사합니다!
해당부분 지우고 올렸는데 관련해서 저 페이지의 URL은 동적으로 바뀌어서 URL을 동적으로 입력하는 방법은 무엇인가요…?
저기 requestUrl에다가 입력하는게 맞나요??
tim.l
4
' 저 페이지의 URL은 동적으로 바뀌어서'
(1) 여기서 말씀하신 URL은 메시지 수신자가 메시지 내용 선택 시, 이동할 주소를 말씀하시는건가요?
(2) 동적으로 바뀐다하심은 도메인도 변경되나요? 우선, 아래와 같이 사용하는 방법이 있을 것 같습니다.
sendScrap함수를 사용했기때문에 필수 파라메터인 requestUrl가 필요한 것이고
스크랩방식 카카오톡 공유는 기본적으로 파라메터를 템플릿에 전송하는 방식이 아니라 해당 주소(requestUrl) 의 og태그를 미리보기로 메시지 전송하게됩니다.
공유할 해당 페이지의 OG태그를 활용하지 않는다면 굳이 sendScrap함수를 사용하실 필요없고 sendCustom 함수를 사용해서 가이드와 같이 사용하시면됩니다.
카카오톡 공유: JavaScript | Kakao Developers 카카오톡 공유: JavaScript
네 1번이 질문의 의도가 맞습니다!
혼선을 드려 죄송합니다.
- 도메인은 변경이 안되고 뒤에 PATH만 변경이 있습니다!
그렇다고 할때 아래 사진과 같이 처리하면 될까요??
tim.l
6
넵. 그렇다면.
sendCustom 함수를 사용하셔서 아래와 같이 사용하시고 버튼설정 후, 공통 링크 설정에 해당 path를 받도록 설정하시면
Kakao.Share.sendCustom({
templateId: 84600,
templateArgs: {
title: "카카오 공유 API에서 title,description 동적으로 설정하는 방법",
desc: "templateArgs에서 설정한 값을 템플릿에 ${title} 형태로 입력합니다.",
url: "path"
},
});
}
카카오톡 공유: JavaScript | Kakao Developers 카카오톡 공유: JavaScript
아래와 같은 메시지를 발송할 수 있습니다.
(1) 버튼 선택 시, 해당 URL로 이동
이미지를 동적으로 추가하고 싶다면 아래와 같이 THU파라메터를 추가 전달하시면됩니다.
1개의 좋아요
