back

  • person_pin
  • calendar_today
  • remove_red_eye

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

페이지 정보

작성자 webpaper 댓글 0건 조회 951회 작성일 19-02-14 09:29

본문

웹페이지에 카카오톡으로 현재 페이지를 공유하는 버튼을 생성하는 방법이다. 

먼저 kakao developers 페이지로 접속한다. 

 

 

기존의 카카오톡 계정으로 로그인이 가능하다. 

로그인한 후에 앱을 생성한다. 

f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_8537.png


앱이름을 정하고, 사진도 업로드 가능하다. 


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_9439.png


link 라는 이름으로 앱을 생성했다. 


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_9006.png

링크 전송을 위해서는 Javascript 키만 있으면 된다. 

Javascript 키를 잘 확인한다. 

그리고 개발가이드 페이지로 이동한다. 


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_6932.png



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


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_7358.png
카카오톡 버튼을 클릭하면, 공유하기 팝업이 생성된다. (모바일의 경우는 카카오톡 앱을 실행한다.)


f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_7667.png

공유할 대상을 선택하고 공유하기를 클릭하면, 채팅창으로 링크가 전달된다. 

f4d8dfc7b09e1b9a03448e6c76fe903f_1550103699_807.png
메세지 템플릿도 설정가능하기 때문에 유용하게 사용가능하다.