카카오 공유 API에서 title,description 동적으로 설정하는 방법 문의

Scrap(미리보기, 스크랩)
#1

안녕하세요 카카오 공유하기 API를 통해 웹 애플리케이션을 개발중입니다.
제가 Next.js로 한 페이지를 공유하기 버튼을 구현중인데요(상세페이지라 페이지는 동적으로 URL이 다릅니다.)

window.Kakao.Share.sendScrap({
      templateId: 84445,
      templateArgs: {
        title: title,
        description: content,
        url: window.location.href,
      },
    });

이렇게 해서 title과 content를 동적으로 변경시키고 싶은데 사용자 정의 템플릿으로 설정되었던 것만 나오고 안되네요ㅠㅠ
독스를 읽어봐도 잘 모르겠어서 여기에 문의 드립니다.

  1. 공유할 URL은 위 처럼 url 프로퍼티에 설정하는 것이 맞나요? (이것도 제가 플랫폼 url 설정한대로만 가서 어떻게 하는지 잘 모르겠네요)
  2. title과 description을 동적으로 어떻게 설정하나요??
#2

안녕하세요.

아래와 같이 메시지 템플릿에 변수 처리하고
image

동일하게 파라메터 설정하셔서 사용하시면 파라메터 전달 받아 메시지 발송가능합니다.
(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/",
            });
        }
#3

@tim.l
감사합니다!

해당부분 지우고 올렸는데 관련해서 저 페이지의 URL은 동적으로 바뀌어서 URL을 동적으로 입력하는 방법은 무엇인가요…?
저기 requestUrl에다가 입력하는게 맞나요??

#4 
' 저 페이지의 URL은 동적으로 바뀌어서'

(1) 여기서 말씀하신 URL은 메시지 수신자가 메시지 내용 선택 시, 이동할 주소를 말씀하시는건가요?

(2) 동적으로 바뀐다하심은 도메인도 변경되나요? 우선, 아래와 같이 사용하는 방법이 있을 것 같습니다.

image

sendScrap함수를 사용했기때문에 필수 파라메터인 requestUrl가 필요한 것이고

스크랩방식 카카오톡 공유는 기본적으로 파라메터를 템플릿에 전송하는 방식이 아니라 해당 주소(requestUrl) 의 og태그를 미리보기로 메시지 전송하게됩니다.

공유할 해당 페이지의 OG태그를 활용하지 않는다면 굳이 sendScrap함수를 사용하실 필요없고 sendCustom 함수를 사용해서 가이드와 같이 사용하시면됩니다.

https://developers.kakao.com/docs/latest/ko/message/js-link#custom-template-msg-custom

#5

네 1번이 질문의 의도가 맞습니다!
혼선을 드려 죄송합니다.

  1. 도메인은 변경이 안되고 뒤에 PATH만 변경이 있습니다!

그렇다고 할때 아래 사진과 같이 처리하면 될까요??

#6

넵. 그렇다면.

sendCustom 함수를 사용하셔서 아래와 같이 사용하시고 버튼설정 후, 공통 링크 설정에 해당 path를 받도록 설정하시면

            Kakao.Share.sendCustom({
                templateId: 84600,
                templateArgs: {
                    title: "카카오 공유 API에서 title,description 동적으로 설정하는 방법",
                    desc: "templateArgs에서 설정한 값을 템플릿에 ${title} 형태로 입력합니다.",
                    url: "path"
                },   
            });
        }

https://developers.kakao.com/docs/latest/ko/message/js-link#custom-template-msg-custom

image

image
아래와 같은 메시지를 발송할 수 있습니다.

(1) 버튼 선택 시, 해당 URL로 이동

image

이미지를 동적으로 추가하고 싶다면 아래와 같이 THU파라메터를 추가 전달하시면됩니다.

image

좋아요 1