카카오톡 플러스친구는 카카오톡 내에서 고객과 내 비즈니스를 연결할 수 있게 해주는 비즈니스 마케팅 플랫폼이죠.
카카오톡 플러스친구를 이용하면 2018년 기준 국내 모바일 메신저 시장 점유율 95%를 차지하는 부동의 1위 메신저앱인 카카오톡 내에 내 비즈니스 홈을 만들고 내 비즈니스 정보와 브랜드 소식, 공지, 프로모션 등의 콘텐츠를 모아 한눈에 보여 줄 수 있고 또 친구 관계를 맺거나 메시지를 보내고 1:1 채팅 등을 통해 고객과 소통할 수 있습니다.
웹사이트 운영자 입장에서는 이런 카카오톡을 외면할 수는 없겠죠?
그래서 준비 했습니다. 바로 내 워드프레스 웹사이트에 간단하게 카카오톡 플러스친구 버튼을 추가하는 방법입니다!
플러스친구 페이지 URL 직접 연결
가장 간단한, 그러면서도 유용한 방법은 내 웹사이트에 플러스친구의 페이지 링크 URL을 직접 연결하는 방법입니다.
플러스친구 계정을 개설하면 플러스친구 관리자를 통해 아래와 같이 내 플러스친구 계정의 홈 URL과 채팅 URL을 확인할 수 있습니다.
이 URL을 어떤 식으로든 내 웹사이트와 연결합니다. 예를 들면, 이미지 배너를 하나 만들어 이 URL로 링크를 걸면 되겠죠? 끝입니다! (너무 간단한 방법이라서 자세한 설명은 생략합니다)
JavaScript 코드 방식
조금 더 효과적(?)인 방법은 카카오톡에서 제공하는 자바스크립트 도구를 사용하는 방법입니다. 카카오톡에서는 자바스크립트를 사용하여 플러스친구 버튼을 추가하는 공식적인 방법을 제공합니다. 비유하자면, 웹사이트에 페이스북 “좋아요(Like)” 버튼을 추가하는 것과 같은 방식이죠.
문서에 나온 방법대로 내 웹사이트에 코드를 적용하면 입맛에 맞는 “플러스친구 추가” 버튼이나 “1:1 채팅” 버튼을 쉽게 만들어 붙일 수 있습니다.
간단하게 한번 따라해 볼까요?
앱과 사이트 도메인 등록
우선 앱 등록을 해야 합니다. (페이스북 “좋아요” 버튼을 추가하려면 앱 등록이 필요한 것과 같은 원리!)
앱 등록은 앱 만들기 페이지에서 요구하는 정보를 입력하면 간단하게 만들 수 있습니다.
앱 등록이 완료되면 아래와 같이 내 앱에 대한 각종 키(key) 들이 발급됩니다. 이 중 JavaScript 키는 나중에 필요하니 꼭 기억해 둡니다.
그런 다음 “설정” 메뉴를 클릭합니다.
“플랫폼 추가” 버튼을 클릭하면 팝업창이 뜨는데, 이 때 플랫폼 유형을 “웹”으로 선택하고 “사이트 도메인” 입력란에 플러스친구 버튼을 추가할 웹사이트의 도메인을 입력합니다. (물론 “사이트 도메인”은 나중에 변경하거나 추가할 수 있습니다)
이것으로 앱과 사이트 도메인 등록이 완료되었습니다.
웹사이트에 버튼 코드 추가하기
앱과 사이트 도메인 등록이 완료되었다면 기본적인 준비는 마쳤으니 이제 웹사이트에 버튼을 삽입할 차례입니다.
버튼을 추가하는 방법은 간단합니다. 플러스친구에서 제공하는 버튼 유형은 현재 “친구추가” “1:1 채팅” 버튼, 이렇게 2가지인데, 여기서는 그 중 “친구 추가” 버튼을 추가해 보기로 합니다. (“1:1 채팅” 버튼도 적용 방법은 똑같습니다)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>PlusFriend Add Friend Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
<body>
<div id="plusfriend-addfriend-button"></div>
<script type='text/javascript'>
//<![CDATA[
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('YOUR APP KEY');
// 플러스친구 친구추가 버튼을 생성합니다.
Kakao.PlusFriend.createAddFriendButton({
container: '#plusfriend-addfriend-button',
plusFriendId: '_xcLqmC' // 플러스친구 홈 URL에 명시된 id로 설정합니다.
});
//]]>
</script>
</body>
</html>
위 코드는 플러스친구 개발가이드에 나와 있는 예제 코드를 그대로 옮긴 것입니다. 이 코드를 내 웹사이트의 본문 내 적절한 곳에 삽입하고 YOUR APP KEY 부분을 앞서 발급받은 JavaScript 키 값으로 교체하고 내 플러스친구 계정의 ID를 plusFriendId 에 추가해 주면 끝입니다!
실제로 워드프레스 사이트에 커스텀 코드를 추가하는 방법에 관해서는 이미 다른 곳에서 여러 번 설명했기에 여기서는 생략합니다. 아래 문서를 참고하세요!
카카오톡 플러스친구 플러그인
이도 저도 귀찮은 분들이라면 플러그인을 사용하면 됩니다. 앞서 소개한 자바스크립트 코드 방식의 버튼을 워드프레스 사이트에 쉽게 추가할 수 있게 해주는 간단한 플러그인입니다.
이 플러그인을 설치하면 좀 더 쉽게 내 웹사이트에 카카오톡 플러스친구 버튼을 추가할 수 있을 것입니다. (네네! 맞습니다. 지금 이 페이지 하단에 보이는 플러스친구 버튼이 바로 이 플러그인을 사용한 것입니다!)
플러그인 설치 및 자세한(?) 사용법은 플러그인 문서를 참고하세요! 🙂
0 thoughts on “카카오톡 플러스친구 버튼 추가하기”