워드프레스에 카카오톡 링크 연동하기

워드프레스에 카카오톡 링크 연동하기

안녕하세요.

매의눈입니다.

오늘은 간만에 워드프레스 팁을 포스팅할까합니다.

오늘의 주제는

국내 SNS 서비스중에서 가장 영향력있는

카카오톡, 카카오스토리 링크 연동하기 입니다.

(모바일에서만 작동합니다.)

1. 준비물

1) 카카오톡 오픈 API 페이지에서 제공하는 JS파일

http://www.kakao.com/services/api/kakao_link

 

2) B.I 이미지

http://www.kakao.com/bi/kakaotalk_icon.zip

2. 적용방법

가) FTP를 통해 서버에 js 파일 및 B.I 이미지를  업로드합니다.

나) Header.php 에 js파일을 불러오기 위한 스크립트 코드를 넣어줍니다.

<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>

다) 실제 카카오톡, 카카오스토리 버튼을 삽입할 구간에 링크소스를 입력합니다.

ex) single.php, page.php 등 (테마에 따라 유동적으로..)

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

플러그인도 php파일을 수정하여 아래와같이 링크기능을 구현할 수 있습니다.

위에 소스에서 파일경로 및 텍스트만 수정하면 적절한 위치에 원하는 크기와 모양으로

카카오톡, 카카오스토리 링크 버튼을 적용할 수 있습니다.

이상, 워드프레스 열렙중인 매의눈이었습니다.

-> 워드프레스에 네이버 라인 연동하기