[kakao/javascript] 카카오톡 링크 전달하기 버튼 만들기

웹페이지에 카카오톡으로 현재 페이지를 공유하는 버튼을 생성하는 방법이다. 먼저 kakao developers 페이지로 접속한다.  Kakao Developers_더 나은 세상을 꿈꾸고 그것을 현실로 만드는 이를 위하여 카카오에서 앱 개발 플랫폼 서비스를 시작합니다.https://developers.kakao.com/ 기존의 카카오톡 계정으로 로그인이 가능하다. 로그인한 후에 앱을 생성한다. 앱이름을 정하고, 사진도 업로드 가능하다. link 라는 이름으로 앱을 생성했다. 링크 전송을 위해서는 Javascript 키만 있으면 된다. Javascript 키를 잘 확인한다. 그리고 개발가이드 페이지로 이동한다. Javascript 개발가이드에서 카카오링크를 선택한다. 우측에 내용을 확인하면, 페이지에 붙여 넣을 코드를 보여준다. 먼저 header 부분에 카카오 스크립트를 넣어준다.   <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>그리고 body 안에 (버튼을 넣어둘 위치에) 버튼을 생성한다. <a id="kakao-link-btn" href="javascript:sendLink()"><img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/></a>그리고 하단부에 링크를 클릭했을 때 동작하는 스크립트를 넣어준다. 이때 아까 확인한 javascript 키를 넣어준다.  <script type='text/javascript'>  //<![CDATA[    // // 사용할 앱의 JavaScript 키를 설정해 주세요.    Kakao.init('YOUR APP KEY');    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.    Kakao.Link.createDefaultButton({      container: '#kakao-link-btn',      objectType: 'feed',      content: {        title: '딸기 치즈 케익',        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',        imageUrl: 'http://mud-kage.kakao.co.kr/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',        link: {          mobileWebUrl: 'https://developers.kakao.com',          webUrl: 'https://developers.kakao.com'        }      },      social: {        likeCount: 286,        commentCount: 45,        sharedCount: 845      },      buttons: [        {          title: '웹으로 보기',          link: {            mobileWebUrl: 'https://developers.kakao.com',            webUrl: 'https://developers.kakao.com'          }        },        {          title: '앱으로 보기',          link: {            mobileWebUrl: 'https://developers.kakao.com',            webUrl: 'https://developers.kakao.com'          }        }      ]    });  //]]></script>여기에서 페이지의 제목, 설명, 이동할 링크, 대표이미지 등등을 설정할 수 있다. 데모페이지로 이동해서, 실제 어떻게 동작하는지 확인한다. PC용 카카오톡에서도 사용가능하다. https://developers.kakao.com/docs/js/demos/link-v2-send-default-feed카카오톡 버튼을 클릭하면, 공유하기 팝업이 생성된다. (모바일의 경우는 카카오톡 앱을 실행한다.)공유할 대상을 선택하고 공유하기를 클릭하면, 채팅창으로 링크가 전달된다. 메세지 템플릿도 설정가능하기 때문에 유용하게 사용가능하다.