블로그 포스트 카카오톡 링크 공유하기

블로그 포스트를 카카오톡으로 공유할 수 있도록 기능을 추가했다.

카카오톡으로 공유할 때, 일반적으로 URL만 공유했을 때와 다르게 미리보기 이미지, 제목, 설명 등 다양한 정보를 함께 공유할 수 있기 때문에 사용자가 포스트에 대한 정보를 더 쉽게 알 수 있다.

카카오톡 링크 공유 기능 구현하기

카카오톡 링크 공유 기능을 구현하기 위해서는 카카오 개발자 사이트에서 앱을 등록해야 한다.

1. 카카오 개발자 사이트에 접속 후 로그인한다.

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

3. 앱 이름과 사업자명을 입력하고, 약관 동의를 체크한 후 애플리케이션 추가 버튼을 클릭한다.

4. 내 애플리케이션 목록에서 앱을 선택한 후 앱 설정 -> 요약 정보 에서 JavaScript 키를 확인한다.

5. 앱 설정 -> 플랫폼 에서 Web 플랫폼 등록을 클릭해 사이트 도메인을 추가하고 저장한다.

6. 이제 JavaScript 키를 사용해 카카오톡 링크 공유 기능을 구현할 수 있다.

카카오톡 링크 공유 기능 구현하기

카카오톡 링크 공유 기능을 구현하기 위해서는 메시지 템플릿을 만들어야 한다.

메시지 템플릿은 feed, list, location, commerce, text 등 다양한 종류가 있지만 이번에는 feed를 사용해 블로그 포스트를 공유할 수 있도록 구현해보자.

// 카카오톡 링크 공유

// Kakao SDK JavaScript 추가
<script
  src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx"
  crossorigin="anonymous"
></script>;

// 발급받은 JavaScript 키로 초기화
Kakao.init('JavaScript 키');

// 카카오톡 링크 공유
Kakao.Share.sendDefault({
  objectType: 'feed',
  content: {
    title: '제목',
    description: '설명',
    link: {
      webUrl: '웹 링크',
      mobileWebUrl: '모바일 링크',
    },
    imageUrl: '이미지 URL',
  },
});

Kakao.Share.sendDefault 메서드를 사용해 feed 타입의 메시지 템플릿을 공유할 수 있다.

메시지 템플릿은 feed, list, location, commerce, text 등 다양한 종류가 있으며, 각각의 타입에 따라 content의 속성이 다르다.

카카오톡에서 제공하는 메시지 템플릿에 대한 자세한 설명은 공식 문서를 참고하자.

포스트 공유하기

블로그 포스트를 공유할 수 있도록 카카오톡 링크 공유 기능을 구현하고 공유가 잘 되는지 확인해보자.

이제 각 포스트마다 카카오톡 링크 공유 버튼이 보이고, 버튼을 클릭하면 해당 포스트를 공유할 수 있다.

구현한대로 공유가 잘 되는지 확인하기 위해 나에게 공유해보았다.

공유된 링크를 보니 제목, 설명, 이미지가 잘 나오는 것을 확인할 수 있다.

마치며

이번에 블로그를 고도화하며 카카오톡 링크 공유 기능을 구현해보았다.

단순히 포스트에 URL 공유 뿐만 아니라 제목, 설명, 이미지가 함께 공유되는 것을 확인할 수 있어서 공유받은 사용자들은 블로그에 대한 정보를 더욱 쉽게 확인할 수 있다.