웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

웹사이트에 카카오 공유하기 버튼 연동 및 개발 방법 알아보기

Last Modified : 2021-01-12 / Created : 2021-01-12
6,864
View Count

웹사이트에 카카오 공유하기 기능을 추가하는 방법을 알아보려고 합니다. 만약 카카오 공유하기 버튼을 만드려면 어떻게 해야할까요?



# 카카오 공유하기 기능은?


여러가지 SNS 플랫폼이 존재합니다. Facebook, Twitter 이 외에도 카카오 역시 많이 사용되는 공유하기 채널입니다. 만약 카카오로 공유하기 버튼이 없다면? 새롭게 추가하는 방법도 고려할 필요가 있겠죠. 카카오는 많은 사람들이 사용하며 요즘은 링크 형태보다 카카오 공유하기가 많이 활용되어 사용되기 때문입니다.

그렇다면 어떻게 하면 카카오 공유하기 기능을 만들 수 있을까요? 방법을 알아보기에 앞서서 카카오 공유하기 방법은 다른 플랫폼과는 조금 다른 방법이 필요합니다. 가장 큰 차이점은 단순 링크 공유가 아닌 Kakao SDK를 필요로 하기 때문입니다.

카카오 공유는 현재 사용중인 플랫폼의 카카오 정보를 읽어온 후 앱에서 공유하기를 실행하는데 이를 연동하기 위한 방법으로 SDK가 반드시 필요하죠. 이를 위해서 자바스크립트로 제공되는 Kakao SDK를 추가 및 설치해야 합니다. 그렇다고 방법이 복잡한 것은 아닙니다. 다만 아래와 같은 프로세스가 필요합니다.


* 카카오 공유 기능의 간략한 프로세스
1. 카카오 개발자 사이트 로그인 후 새로운앱 등록하기
2. 등록된 앱의 요약 정보에 플랫폼 등록(웹사이트 주소 등록)
3. 웹에서 kakao SDK 실행
4. 카카오 공유하기 버튼 만드는 코드를 실행하기
5. 테스트를 거친 후 배포 및 완료

여기까지가 모든 과정입니다. 그럼 아래에서 하나씩 좀 더 상세하게 알아보겠습니다.


! 웹에서 카카오 공유하기 개발 구현하기

앞 서 말한 것 처럼 카카오 개발자 사이트에 로그인해야 합니다. 계정이 없는 경우 방문하여 카카오 계정을 만들도록 합니다. 카카오 사이트 주소는 아래와 같습니다.


카카오 개발자 링크 바로가기 >
https://developers.kakao.com

로그인이 되었다면 이제 새로운 앱을 등록해야 합니다. 새로운 앱 등록하기를 클릭하여 앱을 등록 후 필요한 APP ID 정보를 얻도록 합니다.

스크린샷) 요약정보에서 플랫폼 등록하기


다음으로 사용할 플랫폼 정보를 입력해야 합니다. 실제 필요한 플랫폼 정보(Android, iOS 또는 웹 플랫폼)를 입력하고 웹 사이트인 경우 웹 사이트 주소 정보가 필요합니다. 만약 웹인경우 https://webisfree.com 주소에서 카카오 공유하기가 필요한 경우라면? 아래 스크린샷처럼 Site Domain 영역에 해당 주소를 추가하도록 합니다.

스크린샷) 필요한 플랫폼과 웹사이트 도메인 정보 추가

이제 카카오 개발자 사이트에 필요한 과정은 완료되었습니다. 다음으로 실제 서버에 공유하기 기능을 구현하기 위해서 필요한 과정입니다.


@ 카카오 sdk 추가하기
카카오 기능을 사용하기 위해서 SDK가 필요합니다. 아래는 자바스크립트 방식의 SDK로 아래의 코드를 웹사이트에 추가하도록 합니다. 여기서는 스크립트 추가에 많이 사용되는 <head> 영역을 추가하였습니다.
<head>
  ...
  <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>

카카오 SDK가 정상적으로 추가되었다면 웹콘솔에서 Kakao를 입력하면 undefined가 아닌 Kakao 관련 정보가 출력되게 됩니다. 이제 공유하기 버튼을 만들 준비가 되었습니다. 먼저 웹에 아래의 버튼이 있다고 가정합니다.
<button id="kakaoShare">카카오 공유하기</button>

위 코드를 보면 버튼이 있고 ID 값으로 kakaoShare를 가지고 있습니다. 카카오 버튼을 만들기 위해서 이 ID 값을 버튼을 구현하는 자바스크립트 코드에 사용할 계획입니다.

공유하기 버튼을 구현하기 위해서 필요한 모든 스크립트 코드는 아래와 같습니다. 아래 코드를 해당하는 웹페이지에 추가하여 실행하도록 합니다.
var shareLink = '주소 입력';

Kakao.Link.createDefaultButton({
  container: '#kakaoShare',
  objectType: 'feed',
  content: {
    title: '제목 입력',
    description: '내용 입력',
    imageUrl: '대표 이미지 및 썸네일 입력',
    link: {
      webUrl: shareLink,
      mobileWebUrl: shareLink
    },
  },
  buttons: [
    {
      title: '웹으로 보기',
      link: {
        webUrl: shareLink,
        mobileWebUrl: shareLink
      }
    },
    {
      title: '앱으로 보기',
      link: {
        webUrl: shareLink,
        mobileWebUrl: shareLink
      }
    }
  ]
});

위 코드에서 주요한 몇 가지 코드만 살펴보도록 하겠습니다. 공유할 링크 주소의 경우 여러 번 반복 사용되기 때문에 아래와 같이 변수 shareLink를 만들어 적용하였습니다. WebUrl, mobileWebUrl과 같이 PC, Mobile 주소가 따로 되어 있습니다. 만약 주소가 동일하다면(반응형웹인 경우) 둘 다 같은 값을 사용하면 되겠죠.
var shareLink = '주소 입력';

다음으로 container 프로퍼티의 값이 중요합니다.
Kakao.Link.createDefaultButton({
  container: '#kakaoShare',
  ...

이 값은 html의 ID 값과 동일하게 설정해야 해당 버튼을 클릭했을때 공유하기 기능이 활성화됩니다. # 기호는 선택자의 ID를 의미하죠.

그 외에 title, content, imageUrl은 각각 제목, 내용, 이미지 정보를 의미하며 맞게 입력해주면 됩니다.


! 참고) 로컬에서 테스트가 필요한 경우


만약 로컬에서 테스트가 필요하다면? 이 경우 localhost:8000 등등의 주소를 가지고 테스트가 필요할 수 있습니다. 해당 기능을 구현하기 위해서 플랫폼 웹사이트의 호스트 등록시 localhost:8080의 값을 추가하도록 합니다. 이렇게 하면 로컬 환경에서도 테스트가 가능하니 참고하세요!


여기까지 카카오 공유하기 방법을 알아보았습니다. 조금 복잡해 보일 수도 있지만 잘 보면 구조는 간단합니다.

Previous

nginx 서버 재시작 하는 방법 restart / reload

Previous

브라우저 쿠키 사이즈 에러 400 이슈 해결하기