[Django] Kakao 공유하기 기능 구현 (+ 템플릿 커스텀)

[기본적인 사전 작업]

Kakao Developers에 가입되어 있고, '내 어플리케이션'이 생성되어 있는 상태에서 본 포스트를 읽어주세요!

​

카카오 공유하기 기능을 구현하는 법을 설명한 포스트는 많은데, 커스텀 템플릿으로 공유하는 방법에 대해선 포스팅이 많지 않은 것 같아 공유합니다.

​

우선, '내 어플리케이션 > 제품 설정 > 카카오 링크' 로 들어가 '메시지 템플릿'의 '메시지 템플릿 빌더 바로가기'를 누릅니다.

'+ 템플릿 만들기'를 누르면 템플릿이 하나 생성됩니다.

​

우선, 템플릿에서 커스텀이 필요한 모든 부분은 내용을 ${변수명} 으로 설정해주어야 합니다. 그리고 이 변수명을 잘 기록해놓으세요! 이것들이 여러분들의 코드에 들어가야 합니다.

 

여기 캡처 사진에 보이시다시피 공유할 포스트의 제목, 좋아요 갯수, 댓글 갯수, 조회수 모두 공유할 포스트 마다 다르므로 변수로 선언해주었습니다.

이 외에 템플릿을 구성하는 법은 쉬우니까 건너뛰겠습니다. 옆에 미리보기가 다 제공이 되어서 쉬워요. 이것저것 해보시면서 원하는 탬플릿 구성을 만드시면 됩니다.

그럼 코드를 한 번 살펴봅시다.

<a href="#" onclick="sendLinkCustom('{{ post.image.url }}', {{post.like_set.all.count}}, {{post.reply_set.count}}, {{views}}, '{{ post.title }}', {{ post.pk }});" id="kakao-link-btn" title="카카오톡으로 공유" style="padding-right: 1vh;">
    Share with Kakao
</a>

위 코드는 HTML 상에 카카오 공유하기 버튼을 생성한 것입니다. 이미지로 넣고 싶으시면 a 태그 안에 img 태그로 이미지를 넣으시면 돼요!

function sendLinkCustom(thumbnail, likeNum, commentNum, view, title, postid) {
	if (!Kakao.isInitialized()) {
		Kakao.init('{내 어플리케이션의 javascript 키}')
	}
	Kakao.Link.sendCustom({
		templateId: {본인의 템플릿 ID},
        templateArgs: {
            title: title,
            imageUrl: '{본인의 서비스 도메인 주소}' + thumbnail, 
            likes: likeNum, 
            comments: commentNum, 
            watch: view,
            mobileWebUrl: 'community/post/' + postid,
            webUrl: 'community/post/' + postid
        }
	});
}

템플릿 생성 시에 입력한 변수들 ('User Argument')의 값을 위 코드의 templateArgs에서 설정해주면 됩니다. 변수에 들어갈 값들은 첫 번째 코드에서 보실 수 있듯이 HTML 상에서 받아왔습니다.

그럼 이렇게 카카오톡 공유하기가 잘 작동하는 것을 확인할 수 있습니다!

 

반응형