카카오톡 공유 기능 구현하기 ✅

내가 만든 웹 페이지에서 카카오톡으로 공유할 수 있는 기능을 구현해보자.
직접 만든 공유 버튼을 사용하고 다양한 배포 방법을 통해 웹 페이지의 링크 주소까지 갖추자.

1. https://developers.kakao.com/ 에 접속 후 로그인

2. 내 애플리케이션 - 애플리케이션 추가하기 - 앱 아이콘, 이름, 사업자명 설정 후 저장

3. 해당 애플리케이션 - 플랫폼 - web 플랫폼 등록 - 내가 만든 웹 페이지 주소 링크 넣기

4. https://developers.kakao.com/docs/latest/ko/message/js-link#default-template-msg 접속

5. '직접 만든 버튼 사용하기'에 있는 샘플 코드 복사 후 kakaoShare 함수 안에 넣기

샘플 코드는 내 웹 페이지에 맞게 내용을 수정하자.

function kakaoShare(){
    Kakao.Share.sendDefault({
      objectType: 'feed',
      content: {
        title: '오늘의 디저트',
        description: '아메리카노, 빵, 케익',
        imageUrl:
          'https://mud-kage.kakao.com/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
        link: {
          mobileWebUrl: 'https://developers.kakao.com',
          webUrl: 'https://developers.kakao.com',
        },
      },
      itemContent: {
        profileText: 'Kakao',
        profileImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
        titleImageUrl: 'https://mud-kage.kakao.com/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
        titleImageText: 'Cheese cake',
        titleImageCategory: 'Cake',
        items: [
          {
            item: 'Cake1',
            itemOp: '1000원',
          },
          {
            item: 'Cake2',
            itemOp: '2000원',
          },
          {
            item: 'Cake3',
            itemOp: '3000원',
          },
          {
            item: 'Cake4',
            itemOp: '4000원',
          },
          {
            item: 'Cake5',
            itemOp: '5000원',
          },
        ],
        sum: '총 결제금액',
        sumOp: '15000원',
      },
      social: {
        likeCount: 10,
        commentCount: 20,
        sharedCount: 30,
      },
      buttons: [
        {
          title: '웹으로 이동',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
        {
          title: '앱으로 이동',
          link: {
            mobileWebUrl: 'https://developers.kakao.com',
            webUrl: 'https://developers.kakao.com',
          },
        },
      ],
    });
  }

6. 프로젝트 폴더에 share.js 파일을 만들고 붙여넣기 후 html에 share.js 파일 연결

7. html에서 공유하기 버튼 태그 속성에 onclick="js:kakaoShare()" 넣기

8. js sdk script 태그 복사 후 html에 추가

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js 에 들어가 js sdk script 태그를 복사.
version과 intergrity는 https://developers.kakao.com/docs/latest/ko/sdk-download/js 참고.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js" integrity="sha384-    dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous">
  </script>

9. 초기화 코드 복사 후 html에 script 태그 안에 넣어 추가

<script>
     Kakao.init('JAVASCRIPT_KEY'); // 해당 애플리케이션의 앱 키 중 js 키 복붙
     Kakao.isInitialized();
  </script>

10. 모두 저장 후 웹 페이지를 업데이트하여 공유하기 기능이 활성화된 것을 확인