모바일 웹에서 카카오톡으로 공유하기

카카오톡 링크 API 버전 2.0

• html 문서에서 "kakao.link.js" 파일을 불러옵니다.

  <script src="kakao.link.js"></script>
  

• 공유 버튼을 클릭하면 send 함수를 실행합니다.

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

  $("#kakao-link-btn").click(function () {
      kakao.link("talk").send({
          msg : "동행", // 유저에게 전달된 메세지 내용 (UTF-8)
          url : "http://m.soribada.com/album/KA0055880", // 유저에게 전달될 메세지에 포함되는 링크 url(모바일웹)
          appid : "m.soribada.com", // Mobile Site Domain 정확히 입력하지 않을 경우 이용이 제한될 수 있습니다.
          appver : "2.0", // Mobile Site Version
          appname : "소리바다 모바일웹", // Mobile Site 의 정확한 이름
          type : "link"
      });
  });
  

• "kakao.link.js" 파일 다운로드 및 더 자세한 설명 보기 (https://github.com/kakao/kakaolink-web)

• 카카오톡 링크 API 버전 2.0은 6월 30일 이후로 지원되지 않습니다. (http://www.kakao.com/services/api/kakao_link)

카카오톡 링크 API 버전 3.5

앱 등록

• 카카오톡 개발자 페이지(https://developers.kakao.com/) 로그인 이후 앱 관리 화면(https://developers.kakao.com/apps)으로 이동합니다.

• 앱의 이름을 정하고 만들기를 클릭합니다.

  

  
  

• 앱을 생성하면 키 값을 받습니다. 자바스크립트로 공유 기능을 만들 때 자바스크립트 키가 필요합니다.

  

  
  

• 플랫폼을 추가합니다. 공유하기 시 플랫폼에 등록되지 않은 웹 페이지를 공유하려고 하면 상대방에게 제대로 전송되지 않습니다.

  

  
  

• 플랫폼은 웹을 선택하고, 사이트 도메인을 입력한 후 추가 버튼을 클릭합니다.

  

코드 작성

• html 문서에서 "kakao.min.js" 파일을 불러옵니다. (파일 다운로드 : https://developers.kakao.com/docs/sdk)

  <script src="kakao.min.js"></script>
  

• 키 값을 파라미터로 전달하여 Kakao.init 함수를 실행합니다.

  Kakao.init('YOUR APP KEY');
  

• createTalkLinkButton 함수를 실행하여 버튼 및 공유 정보를 설정합니다.

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

  Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label: '동행',
      image: {
          src: 'http://image.soribada.com/image/main/icon_logo.png',
          width: '500',
          height: '500'
      },
      webButton: {
          text: '소리바다 모바일웹',
          url: 'http://m.soribada.com/album/KA0055880' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
      }
  });
  

• 더 자세한 레퍼런스 보기 (https://developers.kakao.com/docs/js-reference)