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

카카오톡은 한국에서 가장 인기 있는 메신저 앱으로, 많은 사람들이 정보를 공유하는 데 사용되지요. 이번 글에서는 워드프레스 사이트에서 카카오톡 아이콘 버튼을 삽입하여 카카오톡 공유하기 기능을 구현하는 방법을 소개하겠습니다. 프로그래밍에 익숙하지 않아도 누구나 따라 할 수 있도록 최대한 쉽게 정리했으니, 함께 살펴보세요!

참고로 예전에는 카카오톡 공유 기능을 카카오스토리 API를 통해 만들었으나 현재 해당 API는 서비스를 중단하였기 때문에 아래 방법을 통한 코드를 이용하시길 바랍니다.

준비물

카카오 개발자 센터 앱키

사전에 카카오 개발자 센터에서 가입 후 내 애플리케이션 > 애플리케이션 추가하기를 통해 앱을 생성합니다.

아래의 두가지 사항을 처리해주세요.

내 어플리케이션 > 앱 설정 > 플랫폼 페이지에서 Web에 사이트 도메인을 등록
내 어플리케이션 > 앱 설정 > 앱 키 페이지에서 Javascript 키를 복사

카카오톡 아이콘 다운로드

위의 아이콘 이미지를 다운로드 합니다.

코드 삽입 플러그인 설치

script 코드 삽입을 위해 코드 삽입이 가능한 플러그인을 설치합니다. 제가 추천드리는 플러그인은 Admin and Site Enhancements(ASE) 또는 WPCode-Insert Headers and Footers 입니다. 해당 플러그인을 플러그인 > 새로추가 페이지에서 검색하여 설치, 활성화 작업을 합니다.

카카오톡 공유 기능 구현

버튼 삽입

편집기에서 이미지 위젯을 통해 다운로드한 카카오 아이콘을 업로드 한 후 고급 탭의 CSS ID에 kakao-share-btn를 입력한 후 업데이트 합니다.

자바스크립트 코드 삽입

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
    // Kakao SDK 초기화
    Kakao.init('Javascript 키'); 
    document.addEventListener('DOMContentLoaded', function () {
        var kakaoShareBtn = document.getElementById('kakao-share-btn');
        if (kakaoShareBtn) {
            kakaoShareBtn.addEventListener('click', function () {
                Kakao.Link.sendScrap({
                    requestUrl: window.location.href // 현재 페이지 URL
                });
            });
        }
    });
</script>

Admin and Site Enhancements(ASE) 또는 WPCode-Insert Headers and Footers 플러그인을 통해 </body> 태그 앞 부분에 위의 코드를 입력합니다. 카카오 개발자 사이트에서 복사한 Javascript 키만 적용하면 됩니다. 코드 삽입 후 포스트 페이지 내에서 버튼을 클릭하여 카카오톡 앱이 실행되는지 확인하고, URL이 제대로 공유되는지 확인합니다.

마무리

이번 글에서는 워드프레스 사이트에 카카오톡 공유하기 기능을 간단히 추가하는 방법을 살펴보았습니다. 제목, 설명, 이미지 없이도 URL만 공유할 수 있어 구현이 매우 간단하며, 초보자도 부담 없이 시도할 수 있습니다.

Elementor, SEO