모바일 웹 카카오톡 공유 기능 구현하기!

이젠 문자(sms) 시대 거의 종말에 다 와가나봅니다. 

문자보단 보다 카톡이죠.

"이따 카톡해~"

"결과는 카톡으로 알려드릴게요"

"뭔데? 카톡으로 공유해줘"

"카톡 왜 씹어?"

.

.

등등..

카카오톡이 거의 우리의 생활에 완전히 자리 잡으면서 마케팅에 관심 좀 갖는다는 거의 모든 서비스들은 카카오톡 공유 기능을 가지고 있습니다.

카카오톡이 앱이니까 카톡 공유 기능이 네이티브 앱만 지원하는거 아니냐구요?

다행히도 아닙니다. 모바일 웹도 지원합니다.

링크만 있으면 공유가 되고 공유된 공유 링크는 카카오톡 웹뷰로 열리게 됩니다.

그럼 모바일 웹 카카오톡 공유, 이제 시작해볼까요?

먼저 카카오 개발자 센터에 들어가서 가입 혹은 로그인 합니다. 가입 절차도 매우 간단하니까 없으시면 개발자로 가입 해보세요~

카카오 개발자 센터 주소 : https://developers.kakao.com/

귀욤 귀욤한 메인 화면에서 바로 큼지막하게 보이는 "앱 개발 시작하기"를 클릭하십니다.

그럼 "앱만들기" 페이지가 나오는데요~

여기서 앱 이름만 지정하고 만드시면 만들어 집니다.

만들어졌으면 이제 우측 상단의 내 계정아이디 > 내 애플리케이션 > 앱 이름 으로 들어가시면 좌측메뉴에 "설정>일반" 이라는 메뉴가 있습니다.

이 것을 클릭 하시면 앱의 기본정보로 다양한 키 값들이 나오죠! 저희는 모바일 웹이니까 자바스크립트로 공유 기능을 만들 것이기 때문에 자바스크립트 앱 키만 알고 계시면 됩니다.

그리고 키 정보 아래에 플랫폼 추가라는 버튼이 있을거예요.

이 버튼을 클릭하시면 Android, iOS, 웹 이렇게 3가지가 있습니다.

저희는 모바일 웹이니까 웹을 고르시고 추가하시면 됩니다.

웹이면 웹사이트고 사이트라면 당연히 도메인이 있겠죠? 플랫폼을 추가하고 나면 사이트 도메인을 입력하는란이 보일 겁니다. 여기에 여러분의 사이트 주소를 입력하시면 됩니다.

플랫폼과 앱키를 확인하여 oauth로 인증하나봅니다.

여기까지 오셨다면 준비는 다 끝낸겁니다!

이제 실제 자바스크립트 소스코드를 봐보죠. (최신정보는 https://developers.kakao.com/docs/js#카카오톡-링크 에서 확인해보셔요)

일단 head 안에 카카오톡 sdk 모듈을 포함시킵니다.

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

그리고 실제 링크 공유 버튼을 init 하는 코드 입니다.

<script type='text/javascript'>
    //<![CDATA[
    Kakao.init('149fc562e477547e0100001c1ce9298e');
    Kakao.Link.createTalkLinkButton({
        container: '#kakao-link-btn',
        label: '썸네일 이미지 위에 뜰 텍스트 입니다.',
        image: {
            src: '썸네일 이미지 경로',
            width: '300',
            height: '200'
        },
        webButton: {
            text: '트라이트라이',
            url: '위에서 플랫폼 추가하실 때 입력한 your site url'
        }
    });
    //]]>
</script>

이게 자바스크립트 소스의 전부 입니다.. 간단하죠? 

설마 하고 테스트 해봤는데 한번에 성공 ㅇㅅㅇ

네 이제 공유 버튼만 만들면 끝입니다. 

아래가 그 HTML 코드 입니다.

<a id="kakao-link-btn" href="javascript:;">
    <img src="//dev.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_small.png"/>
</a>

카카오톡은 공유 아이콘 이미지를 따로 제공해줘요.

위 코드에서 쓴 kakaolink_btn_small.png와 kakaolink_btn_medium.png 이렇게 두개 있습니다.

미디움 사이즈 쓰고 싶으신 분들은 저 링크에서 small만 medium으로 replace 해주세요~

아 참고로 당연히 핸드폰에서 실행해야 실행 됩니다. 

카카오톡 앱이 켜지는거니까요~

똑같이 했는데 안되시는 분들은 천천히 다시 읽으면서 값들 잘 넣었는지 확인해보시면서 다시 시도 해보세요!

그리고.. 제가 지금 애드센스 승인 따려고 이미지를 안쓰고 포스팅 하는 겁니다. ㅠㅠ 

당분간 이미지를 포함한 친절한 포스팅은 없을거예요 흑.. 

그래도 카톡 공유가 워낙 간단해서 다행이네요. ㅋㅋ 도움이 꼭 되셨기를 바랍니다.