워드프레스에 카카오톡 링크 API 적용하기

카카오톡 API 변경으로 아래 방법은 이제 사용되지 않습니다. 이 포스트 역시 곧 업데이트 하겠습니다.

• 참고 : https://developers.kakao.com/

 

카카오톡은  많이들 쓰시죠?

종종 특정 url을 카카오톡으로 보내려고 하는 경우가 있습니다.  가장 많이 쓰는 방법은 주소창에서 “복사하기”, 카카오톡 메시지창에서 “붙여넣기” 일 겁니다.

트위터,페이스북 공유버튼처럼 카카오톡 공유버튼을 워드프레스에 넣는 방법을 공유해 봅니다.  실제로 이곳에서 사용하는 소스입니다.

 

[box]

2013년 2월 4일 수정. 링크 전달시 위의 스샷에도 나온것 처럼 &raquo; 라는 빈 글자를 없애려면  <?php wp_title(); ?> 을 <?php wp_title(“”,true); ?> 로 바꾸면 된다고 합니다.

페이스북의 Seung Gon 님의 조언에 감사합니다.

관련링크 : http://codex.wordpress.org/Function_Reference/wp_title 중에서 Turning Off

[/box]

[box]

당연히, pc의 브라우저에서는 작동하지 않으며, 카카오톡이 깔려있는 모바일 기기에서만 작동합니다.

[/box]

[box] 준비물 2가지

• http://jquery.com/ 에서 최신 버전의 jquery를 다운 받습니다. 1.8.3이네요.
• 카카오톡 해당 페이지에서 개발자용 카카오톡 B.I를 다운로드 받습니다.

[/box]

 

워드프레스의 themes 폴더에 있는 header.php 파일에

<!-- kakao -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/kakao.link.js"></script>
<script type="text/javascript">
function executeURLLink()
{
kakao.link("talk").send({
msg : "<?php wp_title(); ?>", //메시지 제목
url : "<?php the_permalink() ?>", //링크 url
appid : "eastsocial", //적당한 이름으로 바꾸세요
appver : "2.0",
appname : "eastsocial", //적당한 이름으로 바꾸세요
type : "link"
});
}
</script>
<!-- kakao -->

 

• jquery-1.8.3이 최신 버전입니다만, 예전거 써도 상관없습니다. 대부분 워드프레스 theme이 jquery를 많이 사용하고 있기 때문에 jquery-1.8.3 파일은 부르지 않고 생략해도 작동할 것입니다. 단, kakao.link.js 파일은 필수입니다.
• msg : “<?php wp_title(); ?>”, 는 제목을 워드프레스의 포스트 마다의 제목으로 넣었습니다. 고정된 글로 바꿔도 상관없습니다.
• url : “<?php the_permalink() ?>”, 는 현재 포스트의 url입니다. 필요시 특정 url로 강제 고정해도 되겠죠.

 

워드프레스의 themes 폴더에 있는 single.php(테마에 따라 index.php, home.php, post.php) 파일에

<!-- 카톡 url -->
<div onclick="javascript:executeURLLink()" class="kakao"><img src="<?php bloginfo('template_url'); ?>/images/btn_small_01_ios.png" width="25" height="25" align="left" title="스마트폰에서만 가능합니다" style="margin-left: 2px;">카톡으로 링크보내기</div>
<!-- 카톡 url -->

 

• class=”kakao” 는 아래의 style을 적용하기 위한 것이니, 아래 syle.css를 편의에 맞게 수정해서 적용하세요.

워드프레스의 themes 폴더에 있는 style.css 파일에

.kakao {
float:left;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFB1F), to(#EBE70C));
border-radius: 5px;
width:140px;
height:25px;
box-shadow: rgba(0, 0, 0, 0.496094) 0px 1px 1px 0px, rgba(0, 0, 0, 0.0976563) 0px -1px 0px 0px;
border:0px;
font-size:11px;
text-align: center;
line-height: 30px;
margin:0px auto;
}

제가 현재 사용하고 있는 theme은 반응형웹이 지원되지 않기 때문에,  handheld라는 plugin으로 모바일웹을 적용하였습니다. 따라서, 플러그인으로 모바일웹을 적용하시는 분은 plugins 폴더 아래에 있는 해당 theme의 파일을 수정하여야 합니다.

handheld의 경우, wp-content/plugins/handheld/main_themes/handheld/ 폴더의  header.php, loop-single.php, style.css 3개 파일이며,

많이 사용하는 wptouch의 경우, wp-content/plugins/wptouch/themes/default 아래의 header.php, single.php, style.css 3개의 파일입니다.

아이폰의 경우, 기본 브라우저인 safari로 접속하면 모바일 화면을 plugin이 처리하지만, 아이폰에서도 crome을 사용하는 경우에는 동기화 설정에 의하여 모바일웹이 아닌 일반 pc화면으로 접속되기도 합니다. 참고하십시오.

 

[box]

theme 또는 plugin theme의 특성에 따라 <?php bloginfo(‘template_url’); ?> 대신 <?php bloginfo(‘template_directory’); ?>를 사용할 수도 있습니다.

[/box]