Kakao 공유하기 버튼 만드는 방법

April 17, 2019 API

Kakao 공유하기 버튼 만들기

카카오(KakaoDevelopers)에서 제공하는 kakao API를 이용해 카카오톡 공유하기 버튼을 만들 수 있다.

카카오 API를 사용하기 위한 기본 세팅 순서는 다음과 같다.

KakaoDevelopers에 들어가, 본인의 카카오 계정으로 로그인한다.
내 애플리케이션 - 앱 만들기에서 앱의 이름, 회사 이름 및 로고를 추가한다.
각 API에 맞는 키를 받게된다.
설정 - 일반의 플랫폼에서 나의 웹사이트 주소를 추가한다.
KakaoDevelopers 사이트의 상단 탭 중 개발가이드를 클릭하면, 다양한 API를 활용하는 가이드가 나온다.
웹 개발을 한다면, JavaScript 개발가이드에서 카카오링크를 클릭한다.
카카오링크에서 제공하는 방식에 따라 자유롭게 카카오 sdk를 활용하면 된다.

React에서 개발 순서는 다음과 같다.

ìndex.html에 카카오 sdk를 등록한다.
사용할 앱의 JavaScript 키를 설정한다.
카카오링크 버튼을 생성한다.
화면에 보여주기 위해 HTML에 카카오링크 버튼을 추가한다.

React 폴더의 index.html에서 태그 제일 아래에 sdk 코드 태그를 등록한다.

<!DOCTYPE html>
<html lang="en">
  <head>

    ...

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    // 카카오 sdk 등록
    <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
  </body>
</html>

사용할 앱의 JavaScript 키를 설정한다.

카카오톡 API를 사용하기 위해서는 기본적으로 카카오로부터 받은 키를 사용해야 한다. 여기서는 JavaScript 키를 사용한다.

React에서 사용할 때는, componentDidMount에서 사용할 앱의 JavaScript 키를 설정한다.

1
2
3

componentDidMount() {
  window.Kakao.init('YOUR APP KEY');
}

KakaoDevelopers 개발가이드에서는 Kakao.init이라고 나와있지만, React에서 사용할 때는 앞에 window를 사용해야 한다. 왜냐하면, 카카오 sdk를 index.html에 등록했기 때문에, JavaScript 키를 설정하는 컴포넌트에서는 전역 객체로 접근해야 하기 때문에, window.Kakao.init() 이렇게 사용한다.

카카오링크 버튼을 생성한다.

componentDidMount() {
    window.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://cheonmro.github.io/',
          webUrl: 'https://cheonmro.github.io/'
        }
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://cheonmro.github.io/',
            webUrl: 'https://cheonmro.github.io/'
          }
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: 'https://cheonmro.github.io/',
            webUrl: 'https://cheonmro.github.io/'
          }
        }
      ]
    });
}
  render() {
    return (
      <div className="Kakao">
        <h2>kakao page</h2>
        <a id="kakao-link-btn" href="javascript:;">
          <img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
        </a>
      </div>
    );
  }

container의 #kakao-link-btn은 html의 버튼으로 사용할 id의 이름과 동일해야 한다.
imageUrl의 위 주소는 카카오에서 기본적으로 제공하는 이미지이다. 만약, 내가 원하는 이미지를 사용하고 싶다면, 다른 이미지 주소로 바꿔주면 된다.

*custom 이미지 적용하는 방법

카카오톡 공유하기 템플릿 중, feed 타입에서 권장하는 사이즈는 800px*800px 이다.
먼저 이미지를 이 사이즈로 만든다. 이미지의 사이즈를 원하는 대로 바꾸고 싶다면, png 크기 조절 사이트에서 사이즈를 변경하면 된다. 이때, 가로/세로 비율 유지를 클릭하지 말고, 800px*800px으로 변경한다.
변경한 이미지를 url 주소로 변경하고 싶다면, 이미지 호스팅 사이트에서 url 주소를 생성하면 된다. 여기서 생성한 Image URL을 위 코드의 imageUrl에 작성하면 된다.

위에 작성한 모든 url들은 KakaoDevelopers에서 플랫폼에 등록한 도메인이어야 한다.

*카카오톡 공유 버튼을 클릭시에 다음과 같은 에러가 나는 경우

1 2	요청 실패 잘못된 요청입니다.

해결책: 설정 - 일반의 플랫폼에 공유할 도메인 뿐만 아니라, http://localhost:3000 또한 등록한다.

위 코드를 기본으로 조금 응용해서, 내가 원하는 버튼 이미지로 카카오톡 공유하기를 사용할 수 있다.

import React, { Component } from 'react';
import kakao from '../../image/kakao.png';

class Kakao extends Component {
  componentDidMount() {
    window.Kakao.init('YOUR APP KEY');

    window.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://cheonmro.github.io/',
          webUrl: 'https://cheonmro.github.io/'
        }
      },
      social: {
        likeCount: 286,
        commentCount: 45,
        sharedCount: 845
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'https://cheonmro.github.io/',
            webUrl: 'https://cheonmro.github.io/'
          }
        },
        {
          title: '앱으로 보기',
          link: {
            mobileWebUrl: 'https://cheonmro.github.io/',
            webUrl: 'https://cheonmro.github.io/'
          }
        }
      ]
    });
  }
  onClickKakao = () => {
    window.open('https://sharer.kakao.com/talk/friends/picker/link')
  }
  render() {
    return (
      <div className="Kakao">
        <button id="kakao-link-btn" onClick={this.onClickKakao}><img src={kakao} alt="kakao" /></button>
      </div>
    );
  }
}

export default Kakao;