카카오톡 공유 버튼 달기 — 도메인 두 곳 등록 · 메시지 방식 고르기 · 확인 순서

카카오톡 공유 버튼은 코드를 붙이기 전에 도메인을 두 곳에 등록하는 일부터 해야 합니다. Kakao Developers 앱의 JavaScript SDK 도메인에는 버튼이 놓일 홈페이지 주소를, 제품 링크 관리의 웹 도메인에는 메시지를 눌렀을 때 열릴 주소를 넣습니다. 그다음 페이지를 그대로 보내는 스크랩, 코드로 짜는 기본 템플릿, 화면에서 만드는 사용자 정의 템플릿 중 하나를 고르면 됩니다. 미리보기 제목 · 사진이 안 바뀌는 문제는 공유 미리보기 글에 따로 정리했습니다.

1주소 복사와 공유 버튼은 무엇이 다른가요?

손님이 주소창의 주소를 복사해 카톡에 붙이면 카카오가 그 페이지를 읽어 미리보기를 만듭니다. 공유 버튼은 홈페이지가 메시지 모양을 정해서 카카오톡을 여는 방식입니다. 카카오 문서는 이 기능을 '사용자가 직접 서비스에서 콘텐츠를 선택해 사용자의 카카오톡 친구나 대화방으로 공유하는 기능'이라고 설명합니다. 손님이 카카오톡 앱에서 받을 친구나 대화방을 고르므로, 홈페이지에 친구 목록 화면을 따로 만들 필요는 없습니다.

2버튼을 달기 전에 어디에 무엇을 등록하나요?

가장 많이 헷갈리는 부분이 도메인 칸이 두 곳이라는 점입니다. 앱 설정 문서는 'JavaScript 키는 등록된 JavaScript SDK 도메인에서만 사용할 수 있으며, 이외에서의 요청은 거절됩니다'라고 적고, 제품 링크용 웹 도메인은 이와 별도로 등록하라고 안내합니다.

1. 카카오디벨로퍼스 앱 관리 페이지에서 앱을 만들고 [앱] > [플랫폼 키] > [JavaScript 키] 에서 키를 확인합니다.
2. 같은 화면의 [JavaScript SDK 도메인] 에 버튼이 놓일 홈페이지 주소를 넣습니다. http와 https는 한쪽만 등록해도 둘 다 쓸 수 있고, 최대 10개입니다.
3. [앱] > [제품 링크 관리] > [웹 도메인] 에 메시지를 눌렀을 때 열릴 주소의 도메인을 넣습니다. 경로는 빠지고 도메인만 저장되며, 역시 최대 10개입니다.
4. 처음 넣은 웹 도메인이 기본 도메인이 됩니다. 기본 도메인은 수정 · 삭제가 안 되므로, 바꾸려면 새 도메인을 추가해 기본으로 지정한 뒤 옛 도메인을 지웁니다.

3스크랩 · 기본 · 사용자 정의, 무엇을 고르나요?

메시지 템플릿 문서의 기준을 사장님 상황에 맞춰 옮기면 아래와 같습니다.

• 공지 페이지를 그대로 보내고 싶다 — 스크랩입니다. 페이지 머리말의 OG 태그에서 제목 · 사진 · 설명을 가져옵니다. 등록되지 않은 도메인은 스크랩도 전송도 되지 않습니다.
• 이벤트 문구를 자주 바꾼다 — 사용자 정의 템플릿입니다. 같은 템플릿을 고치면 템플릿 ID가 그대로라 홈페이지 코드를 다시 올리지 않아도 됩니다. 지원 형태는 피드 · 리스트 · 커머스입니다.
• 오시는 길 버튼을 넣고 싶다 — 위치 템플릿은 기본 템플릿에만 있습니다. 피드 · 리스트 · 커머스 · 위치 · 텍스트 템플릿의 버튼은 최대 2개입니다.
• 목록을 많이 보여 주고 싶다 — 리스트 항목은 기본 템플릿 최대 3개, 사용자 정의 템플릿 최대 5개입니다.

4홈페이지 코드에는 무엇이 들어가나요?

1. SDK 스크립트를 넣습니다. 주소는 t1.kakaocdn.net의 kakao_js_sdk 경로이고, 버전과 integrity 값은 공식 다운로드 페이지에서 그대로 복사합니다. 문서는 둘을 '정확히 기입해야 합니다'라고 강조합니다.
2. Kakao.init()에 JavaScript 키를 넣어 초기화하고, Kakao.isInitialized()로 초기화됐는지 확인합니다.
3. 버튼을 SDK가 그려 주게 하려면 createDefaultButton() · createCustomButton() · createScrapButton()을, 직접 디자인한 버튼에 걸려면 sendDefault() · sendCustom() · sendScrap()을 씁니다.
4. 스크랩은 requestUrl에 보낼 페이지 주소를, 사용자 정의 템플릿은 templateId에 템플릿 번호를 넣습니다.

5버튼은 화면 어디에 두면 좋을까요?

아래는 카카오 공식 기준이 아니라 일반적인 배치 요령입니다.

• 보낼 만한 페이지에만 — 이벤트 · 메뉴 · 예약 안내처럼 친구에게 보낼 이유가 있는 페이지에 둡니다.
• 본문을 다 읽은 자리에 — 공지 끝, 메뉴판 아래처럼 내용을 확인한 다음 누를 위치가 자연스럽습니다.
• 문의 버튼과 구분해서 — 공유는 친구에게 보내는 버튼이고, 상담은 가게와 대화하는 버튼입니다. 채팅 상담 연결은 카카오톡 채널 글을 참고하세요.
• 글자로 무엇인지 적기 — 아이콘만 두기보다 '카카오톡으로 보내기'처럼 적으면 휴대폰에서 덜 헷갈립니다.

6달고 나서 무엇을 확인하나요?

• 휴대폰에서 버튼을 눌러 카카오톡이 열리는지 봅니다. 문서의 카카오톡 최소 지원 버전은 Android · iOS 모두 10.0.0입니다.
• 받은 메시지를 눌러 의도한 페이지가 열리는지 봅니다. 열리지 않으면 제품 링크 웹 도메인 등록부터 확인합니다.
• 임시 주소에서 시험했다면 정식 도메인도 두 칸에 모두 넣었는지 봅니다.
• 공유에는 월간 · 일간 쿼터가 있습니다. 수치는 Kakao Developers 쿼터 문서에서 확인합니다.

OG 태그가 페이지마다 제대로 들어가 있는지는 무료 SEO 점검에서 함께 볼 수 있습니다. 큰길브리지는 홈페이지 · 랜딩페이지 제작과 공유 버튼 연결을 전국 비대면으로 진행합니다.

자주 묻는 질문