Web에서 카카오톡 공유 버튼 구현

https://developers.kakao.com/

Kakao Developers

 

 

로그인 후 내 애플리케이션 이동

애플리케이션 추가 버튼 클릭 후

앱이름/사업자명 작성 후 저장합니다.

 

생성된 애플리케이션을 클릭후

왼쪽 메뉴의 [플랫폼]을 클릭하여 Web 플랫폼을 등록해줍니다.

 

 

 

 

상단메뉴 문서 - 메세지 클릭 시

메시지 API에 대한 문서를 읽을 수 있습니다.

 

 

 

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js

Kakao Developers

해당링크 참고하여 초기화 진행

 

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
        Kakao.init('JAVASCRIPT_KEY');
        console.log(Kakao.isInitialized());
    </script>

 

'JAVASCRIPT_KEY'란에

아까 만든 내 애플리케이션의 javascript 키를 넣습니다.

 

 

function sendLink() {
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '딸기 치즈 케익',
        description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
        imageUrl:
          'http://k.kakaocdn.net/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',
          },
        },
      ],
    })
  }

JS SDK 데모를 확인하여 위와 같은 코드를 넣어주고,

title, description, url등 원하는 것으로 설정합니다.

<button onclick="js:sendLink()">공유하기</button>

직접만든 버튼으로 연결할 것이기 때문에

버튼은 이렇게 활성화 할 수 있게 설정해줍니다.