카카오톡 공유하기 기능 만들기

유튜브 강의를 보던 중 카카오톡으로 공유하기 기능이 여기저기서 굉장히 많이 쓰이는 기능이기때문에 배워두고 포스팅해두고 길게길게 기억해두면 좋을것같아서 작성한다.

 

큰 순서는 카카오 디벨로퍼즈에 가입 -> 애플리케이션 등록 -> 앱key확인 -> 플랫폼 등록 -> 스크립트 작성 순이다 .

 

1.카카오 디벨로퍼 가입 및 애플리케이션 등록

https://developers.kakao.com/

Kakao Developers

 

 

사이트에 들어가서 카카오톡을 연결한 뒤 디벨로퍼즈에 가입한 후 상단 내 애플리케이션에 들어가 애플리케이션 추가버튼을 누른다.

 

 

상황에 맞게 앱이름과 카테고리 회사명( 나는 토이프로젝트라 그냥 빈칸으로 썼다) 등을 작성후 저장한다.

 

 

 

 

우리가 사용할것은 저기 javaScript 키 이다.

 

그다음에 플랫폼에 들어가서 우리 프로젝트의 웹페이지 도메인을 붙여넣어준다.

 

그리고 이제 코드에 헤드부분에 작성을 해준다.

 

우선 JavaScript SDK를 웹페이지에 포함시켜주어야한다.

https://developers.kakao.com/docs/latest/ko/javascript/download

Kakao Developers

이 페이지에 들어가면 SDK 에 필요한 태그의 복사본을 가져 올 수 있다.

 <!-- 카카오톡 공유하기 -->
    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js" 
    integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka" 
    crossorigin="anonymous"></script>
  <script>
    // 앱키
    Kakao.init(${아까 복사해둔 javascript appkey를 여기에 붙여넣으면 된다});
    Kakao.isInitialized();
    </script>

html파일 헤드부분에 작성해주었고

 

https://developers.kakao.com/docs/latest/ko/message/js-link

Kakao Developers

이페이지에 들어가 나에게 필요한 기능을 복사하여 내 기능에 맞게끔 작성하여 저장해준다. 

function setShare() {
  var resultImg = document.querySelector("#resultImg");
  var resultAlt = resultImg.firstElementChild.alt;
  const shareTitle = "-";
  const shareDes = infoList[resultAlt].name;
  const shareImage = url + "img/image-" + resultAlt + ".png";
  const shareURL = url + "page/result-" + resultAlt + ".html";

  Kakao.Share.sendDefault({
    objectType: "feed",
    content: {
      title: shareTitle,
      description: shareDes,
      imageUrl: shareImage,
      link: {
        mobileWebUrl: shareURL,
        webUrl: shareURL,
      },
    },
    buttons: [
      {
        title: "결과 확인하기",
        link: {
          mobileWebUrl: shareURL,
          webUrl: shareURL,
        },
      },
    ],
  });
}

 

 

정상적으로 공유되고 들어갔을때에도 오류가 나지않는다!