웹페이지 카카오톡으로 공유하기

웹페이지에서 공유하기 버튼을 누르면 이렇게 카카오톡으로 공유하는 기능이다.

총 개발시간 10~15분이면 완성할 만큼 간단하다.

 

https://developers.kakao.com/

Kakao Developers

1. 여기서 애플리케이션 새로 생성.
2. 자바스크립트 키를 복사해둔다.
3. 왼쪽 플랫폼 탭에서 도메인 설정
4. 메시지탭 - 메시지 템플릿 빌더 작성해줌. 아래 그림 참고.
5. jsp나 템플릿에서 자바스크립트 코드 작성

 

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

if (!Kakao.isInitialized()) {
    Kakao.init('Javascript Key');
}

function kakaoShare() {
    Kakao.Link.sendDefault({
        objectType: 'feed',
        content: {
            title: '${book.title}',
            description: '${book.contents}',
            imageUrl: '이미지주소',
            link: {
                mobileWebUrl: 'http://localhost:8080/view/${book.bookUuid}',
                webUrl: 'http://localhost:8080/view/${book.bookUuid}',
                //링크 눌렀을때 해당 페이지로 바로 이동시키로 싶다면
            },
        },
        buttons: [
            {
                title: '웹으로 보기',
                link: {
                    mobileWebUrl: 'http://localhost:8080/view/${book.bookUuid}',
                    webUrl: 'http://localhost:8080/view/${book.bookUuid}',
                },
            },
        ],
        // 카카오톡 미설치 시 카카오톡 설치 경로이동
        installTalk: true,
    })
}

페이지의 내용을 보내고 싶다면 파라미터를 사용하면되고, 그냥 텍스트를 고정해서 공유하고싶다면 텍스트만 쓰면 된다.

파라미터를 사용하고싶다면 카카오 개발자메뉴에서 제목/설명탭에서 아래와같이 수정해줘야함. 

 

이렇게 설정해주면 해당 페이지의 파라미터가 넘어가서 공유버튼 클릭시에는 제대로된 글씨로 나오게 된다.

공유버튼을 누르면 누구에게 보낼지 선택후 확인하면 아래와같이 성공창이 뜬다.

 

* 배포아닌 개발용도라면 카카오톡에 보여질 이미지는 여기서 간단히 업로드해서 쓰면 된다. or 이미지탭에서 그냥 업로드

https://ifh.cc/