카카오톡 공유하기 만드는 방법

SNS 혹은 다른 중요한 문서나 사진을 발견하면 요즘은 카카오톡 공유하기로 많이 공유하더라고요.

저도 웹페이지를 만들 일이 있어서 카카오톡 공유하기를 종종 썼었는데요.

카카오톡 공유하기를 만들기 위해서는 몇 가지 과정이 필요합니다.

이번 포스팅에서는 위의 과정을 자세히 설명드릴게요.

 

카카오 디벨롭퍼스 가입 및 앱등록

먼저 카카오의 API를 쓰기 위해서는 카카오 디벨롭퍼스 가입이 필요합니다.

Kakao Developers

위의 링크에서 카카오 디벨롭퍼스 가입을 완료해주세요.

가입이 완료되면 상단의 "내 애플리케이션"을 클릭하셔서 애플리케이션을 추가해주세요.

만들 앱 관련 정보들을 넣어주세요.

생성 완료하시면 앱이 등록될텐데요. 등록된 앱을 클릭해주세요.

앱의 좌측을 보시면 앱키가 있을텐데요. 앱키를 클릭해주세요.

해당 앱에서 사용하실 수 있는 앱키가 나옵니다. 여기서 필요하신 앱키 복사해서 쓰시면 됩니다.

저는 Javascript키를 이용했어요.

이번에는 플랫폼에 들어오셔서 등록을 해주셔야하는데요.

저는 웹페이지를 만들 예정이라서, Web에 등록해주었어요.

이렇게 제 사이트를 추가해주었습니다.

 

사용 방법 예시

Kakao Developers

 

공식 문서는 위의 페이지를 클릭하시면 됩니다.

// 카카오톡 공유하기
function kakaoShare() {
    Kakao.init('APP KEY');
    // SDK 초기화 여부를 판단합니다.
    Kakao.isInitialized();
    
    // 메세지 꾸미는 부분
    Kakao.Share.sendDefault({
        objectType: 'feed', // 이미지 + 텍스트의 경우 feed
        content: {
        title: '재윤🤍영석 결혼합니다.', // 원하는 타이틀
        description: '2024.03.01\n11시 30분 빌라드지디 청담', // 텍스트
        imageUrl: 'https://github.com/jaeyun95/jaeyun95.github.io/blob/main/assets/img/main.jpg?raw=true', //이미지 링크
        link: {
            mobileWebUrl: 'https://comgongnuna.github.io/#!', // 연결될 모바일 웹 링크
            webUrl: 'https://comgongnuna.github.io/#!', // 연결될 pc 웹 링크
        },
        },
        buttons: [
        {
            title: '모바일 청첩장 보기', // 메세지 내에 버튼에 쓰여질 텍스트
            link: {
            mobileWebUrl: 'https://comgongnuna.github.io/#!', // 연결될 모바일 웹 링크
            webUrl: 'https://comgongnuna.github.io/#!', // 연결될 모바일 웹 링크
            },
        },
        ],
        // 카카오톡 미설치 시 카카오톡 설치 경로이동
        installTalk: true,
    })
}

완료하시고 버튼 사용을 하시면 위와 같이 공유하는 창이 뜹니다.

공유할 경우 메세지는 다음과 같이 보여집니다.

단순 링크 공유보다 훨씬 깔끔하고 예쁘게 가죠?