[Next.js] 카카오 공유 기능을 만들자

현재 내 사이트의 도메인을 효율적으로 다른사람에게 전달하는

기능이 없을 까하다가, 대한민국 사람이라면 카카오톡을 흔하게 쓰니

카카오버튼으로 공유 기능을 만들어보았다.

​

그러려면 일단 카카오 Developers 에 제품 등록을 해야한다.

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

​

카카오 Developers 사이트의 내 어플리케이션 버튼을 클릭한다.

애플리케이션 추가하기 버튼을 클릭한다.

​

애플리케이션 추가시 내용 넣는 곳

차후 카카오 공유를 할때 앱 이름으로 링크가 공유되니, 앱 이름은 신중하게 써넣자

차후 수정이 안되는 거 같다.

​

카카오 Developers, API Key

저장버튼을 클릭하면 이런식으로 나오는데 ,

자바스크립트 키를 실제로 활용하므로 해당 키를 복사해 놓는다.

​

또한 우리가 활용한 플랫폼의 정보를 설정해야 하는데,

플랫폼 설정하기 링크를 클릭한다.

​

카카오 Developers, 플랫폼 등록 화면

Web 플랫폼 등록 버튼을 클릭한다.

​

​

도메인 입력 화면

빈칸에 도메인을 입력한다.

저장버튼을 누르면 카카오에서 작업할 것은 끝난 것이다.

​

이제 소스 작업을 해보자.

 

// index.html
 <script src="https://developers.kakao.com/sdk/js/kakao.js">
 </script>

​

해당 SDK를 index.html 혹은 App.js 에 추가하고 ,

Next.js 의 경우에는 _app.tsx 에 추가한다.

​

1.js 부분

 

const url_text = 'https://naver.com';

useEffect(() => {
          createKakaoButton()
        }, [])

   const createKakaoButton = () => {
          // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
          window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_SHARE_KEY);
          window.Kakao.Link.createDefaultButton({
            container: '#kakao-link-btn',
            objectType: 'feed',
            content: {
              title: '네이버 소개',
              description: '#네이버 #블로그 #맛집',
              imageUrl: '',
              link: {
                mobileWebUrl: url_text,
                webUrl: url_text
              }
            },
            social: {
              likeCount: 286,
              commentCount: 45,
              sharedCount: 845
            },
            buttons: [
              {
                title: '웹으로 보기',
                link: {
                  mobileWebUrl: url_text,
                  webUrl: url_text
                }
              },
              {
                title: '앱으로 보기',
                link: {
                  mobileWebUrl: url_text,
                  webUrl: url_text
                }
              }
            ]
          });
        }

 

2. html 부분

 

<a id="kakao-link-btn" href="javascript:;">
     <img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
 </a>

​

일단 .env 파일에 자바스크립트 key 를 설정하고,

해당 소스를 부여하는 데 필자는 react-hooks 환경이었기에

useEffect 에 해당 이벤트를 실행한다.

정상적으로 됐으면 카카오톡 버튼이 생성되며, html 태그에 따로 이벤트를 추가하지 않아도 된다.

그 외 자세한 옵션은 공식문서에서 변경해서 확인해보길 바란다.

​

--- 추가

타입스크립트에서만 해당되는 부분이다.

위의 소스 코드중

window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_SHARE_KEY);

window.Kakao.Link.

이런식으로 선언하는 부분이 있는데 이 window 부분의

Kakao 를 따로 선언하지 않으면 빌드할 때 에러가 발생한다.

​

그러므로 소스코드를 추가한다.

​

window 객체 속성 추가

이제 build 를 실행하면 정상적으로 될 것이다.

​

​

https://developers.kakao.com/tool/demo/message/kakaolink?message_type=default

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com