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

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

 

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

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

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

 

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

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

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

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

준비물 2가지

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 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 -->
<!-- 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) 파일에

1
2
3
<!-- 카톡 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 -->
<!-- 카톡 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 파일에

1
2
3
4
5
6
7
8
9
10
11
12
13
.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;
}
.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화면으로 접속되기도 합니다. 참고하십시오.

 

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

 

모바일웹으로 볼 경우

일반화면으로 전환

15 Comments

  1. 이거봐라 신기

    Reply
  2. 해당 소스를 활용해서 포스트의 이미지를 불러올수는 없을까요?

    Reply
    • 카톡 API가 링크 전달만 지원하고 이미지 첨부는 지원하지 않는 것을 알고 있습니다.

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

    Reply
  4. 오호~ 안그래도 이런 경우나 소스를 찾던중이었습니다…좋은 정보 감사~

    Reply
  5. 워드프레스 완전 초보입니다. 질문좀 할게요ㅠ_ㅠ
    카카오톡 개발자용 BI ZIP파일을 다운로드 받은 다음에
    어떻게 해야 하는지 혹시 알 수 있을까요?
    압축을 풀어 폴더채로 header.php안에 넣으면 되나요?

    Reply
    • 메일전달 설정해 놓은걸 이제서야 확인했네요. 잘 해결하셨는지요? 답변이 너무 늦었습니다.

      Reply
  6. kakao.link.js.php파일을 워드프레스 Ftp내 js폴더에 넣으면 되는건가요?

    위에 메뉴얼대로 진행하였는데 안나오네요 ㅠㅠ

    Reply
    • 네. 위의 예제는 테마 폴더의 js 폴더에 ftp로 업로드한다는 예제입니다. 필요한 js파일은 2개이니 확인해 보시고요. 경로도 확인해 보시기 바랍니다.

      Reply
  7. 우선 좋은 글 감사드립니다. 카톡이 설치된 안드로이드에서 크롬 및 기본 브라우저로 이 글 들어와서 카톡 버튼 눌렀는데 카톡 공유 기능이 실행이 안되고 구글 플레이 스토어의 카톡 다운로드 페이지로 가버리네요. 왜 그럴까요? 워드프레스 카톡 링크 플러그인을 설치해봐도 안되고 이 글대로 만약 잘 된다면 직접 코드를 건드려볼까 했는데 일단 보류 중입니다.

    Reply
  8. 음…카톡이 설치되지 않은 스맛폰에서만 카톡 다운로드로 가는 걸로 알고 있는데요. 방금도 사과폰으로는 위 소스가 잘 작동하는 걸 확인했습니다만 안드로이드는 없어서;;; 카톡 api도 특별히 변동된 것은 없어 보이고요. 말씀주신 현상은 저도 그닥 유추가 안될 뿐입니다. ^^

    Reply
    • 아, 그렇군요. 현재 카카오톡이 깔린 사과폰(^^;)이 없어서 저는 테스트를 못해봤습니다. 안드로이드폰에서는 말씀드린 것처럼 분명 카톡이 있는데도 카톡 앱스토어로 가다보니…. ㅠㅠ

      Reply
  9. 감사합니다 덕분에 잘 썼어요!!!! 누가 플러그인을 만들어주면 정말 좋겠네요… ㅎㅎ 감사합니다!!

    Reply
  10. 포스팅을 보고 따라 하다 의문이 생겨 글 남깁니다. 위에 올려 주신 대로 해 보았는데, 아이콘은 뜨지만 연결이 안 됩니다. 제가 초보라 몇 시간째 이것저것 닥치는대로 해 봤지만 전혀 안 되네요. 현재 워드프레스 3.8을 쓰고 있습니다. 뭔가가 바뀌어서 그런 걸까요?

    그리고 아이콘 위치가 이곳처럼 댓글 아래가 아닌 footer 아래, 즉 화면 가장 아래쪽으로 내려갔습니다. 이건 왜 그런 걸까요?

    Reply
  11. 안녕하세요. 글 보고 열심히 따라해봤는데..
    모바일에서 링크는 안걸리네요..ㅠㅠ
    궁금한게 js파일이 2개라고 하셨는데..
    카톡 api 페이지보니까 kakao.link.js 파일말고 다른 js 파일 무엇을 받아야할지 모르겠는데…
    알려주시면 감사하겠습니다..

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" extra="">

Share This