카카오톡 공유하기 기능

카카오톡 공유하기 기능을 구현해보고 싶었다.
말씀을 뽑고, 뽑은 말씀 카드를 공유하는 기능을 구현하고 싶었으나, 랜덤 로직으로 Url이 설정되어 있어 그냥 해당 사이트를 공유하는 것으로 노선을 틀었다.

먼저 1. 현재 Url구현하는 코드 => 열심히 찾아보고 공부했으나, 필요 없어짐 ..

buttons: [
        {
          title: '나도 말씀 뽑아보기',
          link: {
            mobileWebUrl: window.location.href, //현재 페이지는 해당 코드 입력해야함
            webUrl: window.location.href
          },
        },
      ],
      // 카카오톡 미설치 시 카카오톡 설치 경로이동
      installTalk: true,
    })
  } 

2. 현재 url 을 공유할 수 있는 코드라고 생각하여, 시도해봤으나 pagepathname이 제대로 입력 되지 않음(//두번 표시)

<script>
  function scrapKakao() {
    var imgUrl1 = 'http://k.kakaocdn.net/dn/ckrKco/btrVqfPjQSG/z2wmewdXkyWCzLZ406q0c0/kakaolink40_original.png';
    Kakao.Link.sendScrap({
      requestUrl: location.origin + location.pathname,
      templateId: 88189,
      templateArgs: {
        img1: imgUrl1,
        pagePathname: location.pathname
      },
      installTalk: true
    });
  }
</script>

3. 최종 코드(웹사이트 루트 페이지 공유)

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script type="text/javascript">
  // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
  Kakao.init('50579c2a457cf683c245bc3bdd44f53e');
</script>
<script>
  console.log(Kakao.isInitialized());
  function kakaoShare() {
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '2023 내게 주신 하나님의 말씀',
        imageUrl: 'http://k.kakaocdn.net/dn/ckrKco/btrVqfPjQSG/z2wmewdXkyWCzLZ406q0c0/kakaolink40_original.png',
        link: {
          mobileWebUrl: 'http://biblejongeun-env.eba-8s3rddx2.ap-northeast-2.elasticbeanstalk.com',
          webUrl: 'http://biblejongeun-env.eba-8s3rddx2.ap-northeast-2.elasticbeanstalk.com',
        },
      },
      buttons: [
        {
          title: '나도 말씀 뽑아보기',
          link: {
            mobileWebUrl: 'http://biblejongeun-env.eba-8s3rddx2.ap-northeast-2.elasticbeanstalk.com',
            webUrl: 'http://biblejongeun-env.eba-8s3rddx2.ap-northeast-2.elasticbeanstalk.com',
          },
        },
      ],
      // 카카오톡 미설치 시 카카오톡 설치 경로이동
      installTalk: true,
    })
  } 

삽질을 많이해서 결국 얻어낼 수 있다는 것이 어렵지만 개발의 매력인 것 같다.
https://developers.kakao.com/tool/template-builder/app/847366/template/88189/component/ti
카카오 개발자 페이지에서 메시지 템플릿을 만들었고, 이 템플릿 id를 이용해서
코드를 짤 수 있는 방법도 있을것이다.
고민해봐야겠다.