워드프레스에 카카오톡 링크 연동하기 - 반응형 워드프레스 홈페이지 셀럽워드프레스
2020년 09월 20일

셀럽워드프레스입니다.
오늘은 워드프레스 팁으로 카카오톡, 카카오스토리 연동하는 법에 대해 알려드릴까 합니다.

  • 워드프레스에 카카오톡 연동을 위해 필요한 준비물

1. 카카오톡 오픈 API에서 공개한 자바스크립트 파일
https://developers.kakao.com/docs/js/kakao-api
2. 개발자용 카카오톡 B.I (Brand Identity)
https://developers.kakao.com/buttons

  • 적용방법

1. 카카오톡 자바스크립트 파일을 (kakao.link.js) FTP에 업로드합니다.

2. B.I 파일도 image 경로에 업로드해줍니다.

3. header.php 에 js 파일을 불러오기 위한 스크립트 코드를 입력해줍니다.

ex)

<script type="text/javascript" src="./kakao.link.js"></script>
<script type="text/javascript">
function executeURLLink()
{
/*
msg, url, appid, appname, metainfo는 실제 서비스에서 사용하는 정보로 업데이트되어야 합니다.
*/
kakao.link("talk").send({
msg : "카카오링크를 사용하여 메세지를 전달해보세요.; n 줄바꿈",
url : "http://link.kakao.com",
appid : "m.kakao.com",
appver : "2.0",
appname : "카카오",
type : "app"
});
}
</script>

 4. 카카오톡(카카오스토리) 링크 기능을 구현할 single.php, page.php, index.php 등에 div 소스를 넣어줍니다. 

ex)

<div onclick="javascript:executeURLLink()" class="kakao">
<img src="<?php bloginfo('template_url'); ?>/images/파일명.png">카톡링크하기</div>

플러그인 php 파일에도 카카오톡 링크 기능을 구현할 수 있으니, 원하는 위치에 div 소스만 잘 넣어주면 됩니다.

Share.

Leave A Reply