카카오톡 공유하기 버튼 추가하기

게시일: 24. 10. 13. 수정일: 24. 12. 24.

소요 시간: 10분 조회수: 87

오늘은 웹 페이지에 카카오톡 공유하기 버튼을 추가하는 방법을 알아보았다. 카카오톡의 공유 기능은 단순한 링크 전송을 넘어, 썸네일, 제목, 요약을 함께 보여줄 수 있어 클릭률을 높이는 데 큰 도움이 된다는 사실을 배웠다. 그래서 이번 작업은 카카오톡 API를 활용하여 더 효과적인 공유 기능을 구현하는 것이 목표다.

먼저, 카카오 개발자 계정이 필요했다. 카카오 개발자 사이트에 접속하여 계정을 만들고, 로그인 후 "내 애플리케이션"에서 새로운 애플리케이션을 등록했다. 이때, 나중에 사용할 JavaScript 키를 확보할 수 있었다. 카카오톡의 다양한 기능을 활용하기 위해서는 꼭 이 단계가 필요하다는 것을 느꼈다.

이제 애플리케이션 등록을 마쳤으니, 웹 페이지에 카카오 SDK를 추가해야 했다. 이를 위해 웹 페이지의 <head> 섹션에 아래 코드를 삽입했다.

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

이제 카카오 SDK를 사용할 준비가 완료되었다. 다음 단계로 나아가기 위해 설레는 마음을 감출 수 없었다.

카카오 SDK를 추가한 후, JavaScript로 SDK를 초기화하는 작업을 진행했다. 아래 코드를 사용하여 내 애플리케이션의 JavaScript 키를 입력했다.

<script>
  Kakao.init('YOUR_APP_KEY'); // 여기에 애플리케이션의 JavaScript 키를 입력하세요.
</script>

이제 SDK가 내 웹 페이지와 연결되었다. 카카오의 다양한 기능을 사용할 수 있게 되어 기대감이 커졌다.

다음 단계는 공유하기 버튼을 만드는 것이었다. 사용자에게 친숙한 버튼을 만들고, 클릭 시 카카오톡으로 링크를 공유할 수 있도록 설정했다. 아래와 같은 코드를 작성하여 버튼을 만들었다.

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

버튼을 클릭하면 카카오톡 공유 기능이 작동하도록 JavaScript 코드를 추가했다. 공유할 내용으로는 썸네일, 제목, 요약을 포함하여 설정했다. 코드는 다음과 같다.

document.getElementById('kakao-share-btn').onclick = function() {
    Kakao.Share.sendDefault({
        objectType: 'feed',
        content: {
            title: '공유할 제목',
            description: '공유할 내용 요약',
            imageUrl: 'https://example.com/image.jpg', // 썸네일 이미지 URL
            link: {
                mobileWebUrl: 'https://example.com', // 모바일 웹 링크
                webUrl: 'https://example.com', // 웹 링크
            },
        },
        social: {
            likeCount: 100, // 좋아요 수
            commentCount: 200, // 댓글 수
            sharedCount: 300, // 공유 수
        },
        buttons: [
            {
                title: '웹으로 보기',
                link: {
                    mobileWebUrl: 'https://example.com',
                    webUrl: 'https://example.com',
                },
            },
        ],
    });
};

이렇게 설정하니, 공유할 링크에 대한 정보가 함께 전달되어 사용자가 클릭할 가능성이 높아지는 것 같았다.

이제 모든 준비가 끝났으니, 최종 테스트를 진행하기로 했다. 위의 코드를 웹 서버에 업로드하고, 브라우저에서 페이지를 열어 보았다. 카카오톡 공유하기 버튼이 보이는 것을 확인했다. 버튼을 클릭하니 설정한 내용으로 카카오톡 공유가 되었다. 썸네일, 제목, 요약이 함께 보여지니 매우 만족스러웠다. 이 기능이 클릭률을 높이는 데 기여할 것이라는 확신이 생겼다.

이번 작업을 통해 카카오톡 공유하기 버튼을 성공적으로 추가할 수 있었다. 단순한 링크 전송이 아닌, 더 많은 정보를 제공하여 사용자들이 링크를 클릭하도록 유도할 수 있게 되어 매우 기뻤다. 앞으로도 이런 작은 작업들이 웹 페이지의 사용자 경험을 개선하는 데 도움이 될 것이라는 생각이 든다.

이 일기를 통해 앞으로의 프로젝트에도 이 경험을 활용할 수 있을 것 같아 기대된다!

카카오톡 공유하기 버튼 추가하기

인기글