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

안녕하세요 카카오 공유하기 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을 동적으로 어떻게 설정하나요??

안녕하세요.

아래와 같이 메시지 템플릿에 변수 처리하고
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/",
            });
        }   

@tim.l
감사합니다!

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

' 저 페이지의 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

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

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

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

넵. 그렇다면.

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개의 좋아요