제품 소개

View in english

wpkakao

“Kakao Talk Link”는 블로그 플렛폼인 워드프레스용 소셜 플러그인 입니다.

아래와 같이 워드프레스 기반 웹사이트 글에 “카카오톡으로 공유하기” 기능을 추가할 수 있습니다.

스크린샷 2013-05-08 오후 1.18.28

 

 

WordPress.org 에서 검색 및 다운로드하실 수 있습니다.

wpkakao

플러그인 설치하기

1. 다운로드

1) 방법 1

워드프레스 데쉬보드 -> 플러그인 메뉴 -> 플러그인 추가 -> “kakao talk link”로 검색 -> 설치

2) 방법 2

http://wordpress.org/plugins/kakao-talk-link/

위 주소를 클릭하여 워드프레스 사이트에서 직접 다운로드 하신 후

‘kakaolink’ 디렉토리 전체를 워드프레스 테마 폴더에 업로드합니다.

업로드할 서버 경로 : /wp-content/plugins/’ directory

2. 플러그인 메뉴에서 “Kakao Talk Link”를 활성화합니다.

3.  설정> Kakao Talk Link에서 버튼의 위치를 설정합니다.

kakoup3 kakoup4

4. 스타일 시트에  “kakaotalk_link” 클래스를 추가하여 위치, 여백 등을 수정할 수 있습니다.

플러그인 업데이트 하기

플러그인 최신 버전이 나오면 데쉬보드에서 업데이트하실 수 있습니다.

1. 우선 데쉬보드 좌측 업데이트 메뉴를 클릭합니다.

2. “Kakao Talk Blik” 항목을 체크 합니다.

3. “플러그인 업데이트”를 클릭 합니다.

kakoup

4. 성공적으로 업데이트되면 아래와 같은 화면이 나옵니다.

kakoup2

버전 정보

# v1.0

최초 플러그인 개발

# v1.1

좌우 위치 조정 옵션이 추가되었습니다.

# v1.2

single site 기반에서 옵션 메뉴가 보이지 않는 문제를 수정하였습니다.

# v1.3

Akismet 플러그인이 활성화 되었을 때 버튼이 작동되지 않는 문제를 수정하였습니다.

 

 

23 Comments

  1. Pingback: Syncst

  2. 플러그인 개발해주셔서 감사드립니다
    질문 있어 댓글을 남깁니다

    업무적인 홈페이지에 적용을 했고 기존에 addthis share를 하단에 사용하고 있습니다
    적용을 해보니 addthis 버튼이랑 카톡 버튼이 떨어져 있어서 위치를 addthis 버튼 오른쪽 옆으로 옮길 수 있는 방법이 있는지? 코딩을 해주면 될듯하지만 할줄 몰라서~~

    개발 감사드립니다

    • kimsreal on 05/27/2013 17:16

      안녕하세요^^ 옵션도 없이 대충 만든 플러그인이라 말씀하신 문제가 나온것 같네요.
      카톡버튼은 float:right 속성이 들어있어 오른쪽에 붙어있고, 구축하신 사이트를 보니 다른 버튼은 속성이 없어서 왼쪽에 있는 상황으로 보입니다. 플러그인 수정이 가능하시다면 두 플러그인의 float 속성을 left 또는 right로 통일하시면 됩니다.
      조만간 정렬 옵션을 추가하겠습니다. ^^ 그럼..

  3. 셋팅 목록에 카카오톡 링크가 나타나지 않습니다 이상하네요?

    • kimsreal on 06/01/2013 08:13

      플러그인 메뉴에서 플러그인 버전이 1.1인지 확인해 보세요. 1.0이면 업데이트 후 웹브라우저를 닫고 새로 로그인 해 보세요.

  4. jeodaeho on 06/03/2013 20:18

    안녕하세요 ..

    워드프레스 플러그인을 개발 공개해주셔서 감사합니다.

    몇가지 건의 사항을 드려도 될지 모르겠네요 .

    my_plugin_init 함수의 hook 위치를 wp_enqueue_scripts 쪽으로 옮기는게 좋을듯해요 .

    init 에 훅을 걸경우에 script 가 불필요하거나.

    예상되는 script load 영역이 아닌부분에서 script 가 로드 되어서 예상하지 못한 결과를 발생할수 있을것 같아요(output이 없어야 되는 경우등등).

    echo “[“.$option['position'].”]”; 부분의 경우는 디버깅하시다가 남겨진것 같아요 ^^

    다시한번 플러그인 개발, 공개해주셔서 감사합니다 ^^

  5. 먼저 유용한 플러긴 만들어 주셔서 감사드립니다.

    그런데, 저도 “셋팅 목록에 카카오톡 링크가 나타나지 않습니다.” 말씀하신대로, “플러그인 메뉴에서 플러그인 버전이 1.1인지 확인해 보았습니다.”

    그리고 매 페이지마다, “[]” 라는 글자가 상단에 뜹니다. 플러긴을 비활성화 시키면 사라집니다. 제 웹페이지에서 한번 확인해 보시기 바랍니다.

    꼭 필요한 플러긴인데, 수정 부탁드리겠습니다.

    감사합니다. 수고하세요

    • kimsreal on 06/09/2013 05:22

      안녕하세요^^ 관심가져주셔서 감사합니다.
      싱글사이트에는 셋팅 메뉴가 보이지 않더군요. 제 사이트(멀티사이트)에서만 테스트해서 문제가 생겼습니다. ^^;
      말씀하신 2가지 수정된 버전(1.2)을 업로드 했습니다.

  6. 또 문의가 있어 올립니다 순정 브라우저나 다음 네이버 앱에서 그리고 돌핀 등에서 잘 실행이 되는데 유독 크롬 브라우저에서는 구글플레이 카카오톡으로 들어가 실행이 안되는듯 합니다 확인 부탁드립니다 아직 1.0을 쓰고 있고 1.2는 제 테마와 맞지 않는지 카톡 아이콘이 깨져 보입니다

    • kimsreal on 06/11/2013 07:08

      스마트폰용 크롬브라우저에서 정상 작동확인되었습니다. 마케팅뉴스님의 사이트에서도 친구목록이 잘 뜨고 있습니다. “구글플레이 카카오톡으로들어가..”라고 하신 부분이 이해가되지않습니다. 특이한 현상을 접하신 것 같은데 조금만 더 설명해 주시면 감사하겠습니다.^^

      • 답변 감사드립니다~~ 구글 플레이 앱으로 들어가서 카카오톡 열기와 제거 부분이 뜹니다~~ 보통 업데이트가 필요할때 뜨는 창~~~^^ 정상 작동이 됐다고 하시니 안심입니다 ~~여하튼 감사드립니다 잘 사용하겠습니다

  7. 안녕하세요, 우선 좋은 플러그인 만들어주셔서 감사드립니다. 다른 블로그 보니 직접 jQuery 등 업로드해서 작동시키는 코드는 있던데 이렇게 플러그인이 있으니 좋네요. 그런데 설정도 하고 블로그 하단에 보이기도 하는데, 안드로이드나 iOS나 정작 브라우저에서 클릭했을 때 아무 반응이 없네요. 제 사이트에서 한 번 테스트 부탁드리겠습니다. 해당 글 주소는… http://fyi.so/15cz93f 입니다. 크롬이나 안드로이드 기본 브라우저, 사파리 등등에서 모두 확인했습니다.

    • kimsreal on 06/18/2013 09:43

      안녕하세요^^ 제대로 작동이 안되셨다니 아쉽습니다.
      알려주신 사이트를 확인해 보니 글 주소가 변형이되어 카톡 API를 호출하고 있었습니다. 정상일때 소스와 고영혁님 사이트의 소스를 비교(크롬 요소 검사툴 활용)해 보면…

      정상 : < a href=’javascript:kakao.link(“talk”).send({ msg : … (생략)
      님의 사이트 : < a href=”javascript:kakao.link(” talk”).send({=”” msg=”” :=”” .. (생략)

      카톡플러그인에서는 href= 뒤에 홑따옴표를 붙여놨는데 님의 사이트에서는 쌍따옴표로 변형되었습니다. 이로 인해 주소 전체를 인식하지 못하고 ~kakao.link( 에서 주소가 잘려버리는 문제가 생겼습니다.
      사이트 전체를 최적화 하는 플러그인이 작동되면서 문제가 되었을 것으로 예상됩니다. SEO 관련 플러그인이 걸려있다면 잠시 끊으신 후 테스트해 보세요.
      정확한 원인을 알려드리지 못해 죄송합니다. ^^;

  8. 답변 감사드립니다. 혹시나 싶어서 (프로그래밍을 잘 모르다보니…) talk 를 둘러싸고 있는 쌍따옴표를 홑따옴표로 바꾸었더니 바로 에러가 나네요 ^^;; YOAST의 WordPress SEO를 쓰고 있는데 말씀해주신대로 한 번 끊은 다음에 테스트해 보아도 여전히 안되네요 ㅠㅠ 어디가 문제인지 정말 모르겠습니다. 혹시 이런 부분을 고려하여 해결하는 버전을 만들어주신다면 정말 감사드리겠습니다. ^^. 행복한 하루 되세요~

    • kimsreal on 06/19/2013 14:12

      Akismet 플러그인이 활성화되면 님과 같은 현상이 발생하는 것을 확인했습니다. Akismet 플러그인은 사이트 보안용 플러그인으로 워드프레스와 함께 기본설치되는 플러그인인데 Javascript를 이용한 해킹을 차단하기위해 일부 코드를 변형시키고 있었습니다. 해당 문제를 해결하여 1.3 버전으로 업그레이드해 두었습니다. 플러그인의 문제점을 알려주셔서 감사합니다.^^

      • 우선 이렇게 빨리 업데이트 후 피드백 주셔서 정말 감사드립니다. 그런데, 카카오링크 플러그인이 업데이트되었다는 소식을 듣자 마자 바로 업데이트 하고 테스트했는데… 마찬가지로 아무 반응이 없습니다. ㅠㅠ

        제대로 테스트해보려고, 우선은 akismet 을 deactivate 시킨 다음에 해봐도 역시 반응이 없네요.

        비활성화가 아니라 아예 삭제한 다음에 다시 설치해보려고 했는데, 카카오링크 플러그인을 우선 deactivate 한 다음에 delete 하려고 하니 main 에서 쓰고 있어서 삭제가 안된다고…

        아, 참고로 저는 워드프레스 3.0 이상에서 지원하는 network blog 를 설정해서 운영하고 있습니다. 혹시 참고가 될까 해서…

        패치해 주셨는데 좋은 소식 못드려서 죄송하네요 ㅠㅠ

        일단, akismet 및 카카오링크 플러그인 1.3 버전을 다시 활성화시켜두었습니다. 혹시 짬나실 때 한 번 더 저 페이지 테스트해 주신다면 감사드리겠습니다 !!

        • kimsreal on 06/20/2013 11:25

          이번엔 될줄알았는데…^^; 님의 사이트를 보니 이번에는 글 URL뒤에 홑따옴표가 쌍따옴표로 바뀌었습니다. javascript로 URL을 전달하려면 홑따옴표를 안쓸수가 없는데… 방법이 별로 없어보입니다. 사용하고계신 테마, 플러그인(akismet, SEO), 멀티사이트 를 제 테스트 사이트(http://icansoft.com/kstory/)에 모두 적용하여 테스트해봤는데 문제없이 작동되었습니다. 사용중이신 다른플러그인이 있으면 알려주세요. 혹시 akismet 유료버전을 사용하는건 아니시죠?

          • 살펴봐 주셔서 감사합니다. 언급하신 테스트 사이트는 제 폰에서 작동하긴 하네요. 아, 그런데 제 갤럭시노트2 크롬에서는 터치 시에 카톡 앱으로 바로 안가고 구글 플레이 스토어의 카톡 설치 페이지로 보내버리네요. 분명히 카톡이 깔려 있는데… 카톡이 안깔려 있을 때에만 설치 화면으로 보내는 걸로 알고 있었거든요. 그리고 안드로이드 기본 웹브라우저(인터넷)에서는 터치해도 아무 반응이 없습니다.

            제 사이트에서 플러그인 다 제거하고 하나씩 추가하면서 살펴보기 전에 일단 위와 같이 테스트해보았는데 만약 제 사이트에서 플러그인 조합 바꿔가며 뭔가 해결을 냈다고 하더라도 이런 형태라면 애매할 것 같습니다.

            참고로, http://eastsocial.co.kr/2012/11/1300 에서 언급한 코드 및 해당 사이트의 버튼을 터치해도 마찬가지로 구글 플레이스토어 카톡 설치 페이지로 보내버립니다.

            또다른 카톡 워드프레스 예제인 http://www.webactually.co.kr/kakao/kakao.html (제작방법 – http://www.webactually.co.kr/archives/5835) 에서만 정상적으로 크롬이든 인터넷 기본 브라우저이든 카톡 앱이 호출되어서 대화 상대 골라서 링크 공유할 수 있게 뜹니다. 문제는 저 제작방법만 가지고는 어떻게 해야할지 잘 모르겠다는 거구요 ^^;;;

            현재로서는 이렇게 플러그인 만들어주시는 kimsreal 님께 하소연하는 수밖에 없다보니, 이미 체크해 보셨을 수도 있지만 다른 블로그의 두 케이스에 대해 제 폰에서의 테스트 결과를 공유드립니다~

            행복한 오후 되세요 !!

          • kimsreal on 06/20/2013 17:24

            좋은 예제를 알려주셔서 감사합니다. 적용을 위해 2가지 문제가 있는데, 예제에서 사용된 카톡API가 2년전에 만들어졌고 지금은 방식이 바뀌면서 폐기된 소스입니다.(호환성 문제) 그리고, function을 만들어 사용하는 것은 지금 버전으로도 가능한데 이렇게 되면 페이지에 여러 글이나오고 글마다 카톡버튼이 붙는 상황에 오류가 발생합니다.
            사용하고계신 테마에서는 풀 포스트 여러개를 출력하지 않으니 상관없지만 공개된 플러그인에는 위 기능을 적용할 수 없습니다.

            님에게는 중요한 문제인것 같아 예제의 방식으로 따로 만들었습니다. 아래 링크를 클릭하셔서 플러그인을 다운로드 받으셔서 따로 설치해보세요.
            http://syncst.com/download/kakaotalk2.zip
            압축을 푼 후 폴더째로 FTP로 wp루트/wp-contents/plugins/에 올리신 후 플러그인에 가서 “Kakao Talk Link 2″를 활성화 하세요.

            추신 : 카카오톡에서 배포한 최신 API가 설치된 앱을 인식하지 못하는 문제는 카카오톡에 항의를 해야겠네요.^^

      • 이렇게 별도 버전의 플러그인까지 제작해서 공유해 주셔서 황송합니다. ㅠㅠ

        일단 바로 테스트해 보았는데 아이콘 이미지가 제대로 링크가 안되는 마이너한 이슈도 있고, 데스크톱에서 마우스 오버했을 때 웹브라우저 좌하단을 보니 javascript:; 까지만 나오는 걸로 봐서 역시 뭔가 제대로 인자값이 전달되지 않나 봅니다.

        더이상은 개발자님께 부탁드리는게 실례일거 같고 카톡 API 자체가 좀 나아지면 (지금은 이래저래 문제가 있어 보이니) 다시 원래 버전 설치해서 플러그인 하나씩 켜가면서 테스트해보던가 해야겠습니다. ^^;;

        신경써 주셔서 정말 감사드립니다~

        • kimsreal on 06/22/2013 02:30

          이미지 문제는 저도 잘모르겠네요^^;
          javascript:;로 나오는건 알려주신 예제에서 사용하는 jQuery 방식으로 정상입니다. 오해없으시길..

댓글 남기기

이메일은 공개되지 않습니다.

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

 

 

 

궁금한 것이 있으시다구요? 망설이지 마시고 문의주세요.
생각보다 많은 정보를 얻으실 수 있습니다.
제휴 문의