[javascript] 카카오톡 공유하기 예제

[javascript] 카카오톡 공유하기 예제

 

generated by Gemini

 

 

안녕하세요!

 

javascript sdk를 이용해서

 

카카오톡 공유하기를 구현하는 예제를 공유해보려고 합니다!

 

보통 카카오톡 로그인만하다가 공유하기를 연동하면서

 

간단하게 구현이 되는 소스라 공유합니다!

 

 <button id="kakao-share-btn">카카오톡으로 공유하기</button>

 

 

위와 같은 버튼이 있다고 가정하고,

 

아래와 같이 kakao js 를 로드하고 버튼에 이벤트를 걸어주면 끝입니다!

 

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        // SDK를 초기화합니다. 여기에 발급받은 JavaScript 키를 넣어주세요.
        Kakao.init('JAVASCRIPT_KEY');

        // 공유 버튼에 클릭 이벤트를 추가합니다.
        document.getElementById('kakao-share-btn').addEventListener('click', function() {
            Kakao.Share.sendDefault({
                // 카카오톡 메시지 템플릿 유형을 '기본 템플릿'으로 설정합니다.
                objectType: 'text',

                // 공유할 메시지 텍스트입니다.
                text: '코딩 파트너와 함께하는 카카오톡 공유 기능 구현 예제입니다!',

                // 공유 메시지를 클릭했을 때 이동할 링크를 설정합니다.
                link: {
                    // PC와 모바일 웹 환경 모두 동일한 URL로 이동합니다.
                    mobileWebUrl: 'https://developers.kakao.com',
                    webUrl: 'https://developers.kakao.com',
                },
            });
        });
    </script>

 

 

위 내용 보시면 아시겠지만,

 

JAVASCRIPT_KEY 에는 카카오 디벨로퍼스에서 발급받은 javascript key 를 넣으면 되구요!

 

objectType 타입은 텍스트, 피드, 리스트, 위치 등 여러가지 템플릿이 있으니

 

공식문서 확인해보시면서 작업하시면 될듯 합니다!

 

link 는 필수값이므로 동적으로 url을 변경하시려면, 버튼 이벤트 함수를 따로 만들어서

 

작업하시면 됩니다!

 

도움이 되셨다면, 구독/공감/댓글 부탁드립니다!

 

감사합니다!