본문으로 바로가기


안녕하세요. 오늘은 대단한 것이면서엄청난 것을 해보겠습니다.


바로 카카오톡 공유 버튼 만들기 입니다.!


지금 대부분의 블로그에서 카카오톡 공유 버튼이 오류일 것입니다.


바로 아래 처럼 새롭게 바뀐 카카오톡 공유 버튼을 만들어 보겠습니다.


짜잔!!





사실 몇몇 기존 블로그 스킨에 카카오톡 공유 버튼이 있거나


예전에는 티스토리 자체 플러그인에서도 카카오톡 보내는 기능이 있었지만


지금은 카카오스토리 트위터 페이스북만 플러그인으로 제공되고 있습니다.



지금 모든 예전 방식의 버튼들은 오류가 뜨고

제대로 전달되지 않게 됩니다!


바로 카카오 링크 방식이 변경되어서 이렇게 오류가 나타나게 되는 현상입니다!



이제 본격적으로 카카오톡 공유 버튼을 만들어 보겠습니다.

카카오톡 만들기 준비물

2개의 준비물이 필요합니다.


1. 버튼으로 사용할 아이콘!



이건 제가 포토샵으로 기존 플러그인과 동질감있게 만든거입니다.

위에 것을 사용하셔도 좋고 아니면 직접 아이콘을 준비 하셔야 합니다.


2. kakao developers에 가입

https://developers.kakao.com/


총 사용량은 일반 블로그 유저들은 크게 신경 쓰지 않아도 되는 부분입니다.

아래 쿼터 정책이 자세히 나와있습니다.


쿼터 정책 더보기



본격적으로 카카오톡 공유 버튼 만들기

카카오디벨로퍼 페이지에서 [내 애플리케이션] -> [앱 만들기] 를 우선 해줍니다.



그럼 앱이 생성되면서 키값이 보입니다.

키값은 공개해서는 안됩니다. 잘 보관 합시다!

바로 [설정]에 들어가거나 좌측 링크에서 [앱정보]->[설정]을 들어가줍니다. 


그리고 [플랫폼] 추가를 해줍니다.

매우 중요합니다!! 꼭해줍니다.

그냥 티스토리 도메인만 사용하는 경우는 그냥 티스토리 주소만 적으면 됩니다.

2차 도메인을 블로그 주소로 사용하시는 분들중 www. 접속 가능하다면 다 적어줘야합니다.

일부 모바일 브라우저는 www.를 호스트 주소로 접속하는 경우가 있습니다.


아 그리고 저기 앱정보에서 

을 Edit 교체 해주면 카톡으로 보낼때 바뀌게 됩니다. 


플랫폼 추가 설정이 끝났다면 개발가이드를 가봅니다.


시키는 데로만 한다면 초보자들도 손쉽게 따라할 수 있습니다.


동적으로 바뀌는 내용의 카카오톡 링크 보내기

https://developers.kakao.com/docs/js#카카오톡-링크-예제:-동적으로-바뀌는-내용의-카카오톡-링크-보내기

의 예제를 적용 해야합니다. 다른것을 해보니 오류가 납니다. ㅠ_ㅠ


여기서도 시간 오래걸렸습니다. 다들 한번씩 읽어보시면 좋습니다.

이 예제를 사용해서 만들 것입니다.


외부스크립트 소스 추가 및 실행 - [HTML] 부분에 추가


    <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
  </head>

<!-- /head 윗 부분에 붙혀넣기를 해줍니다 -->

카카오톡에서 제공하는 외부 스크립트 파일을 실행(?) 선언(?) 시켜 주어야합니다.

그래야지 카카오톡 버튼의 공유 기능을 사용 할 수 있습니다.


붙혀 넣기 할 위치는 크게 상관없으나 <body>

코드는 한 곳에 모아두는 습관을 가지면 좋습니다!

저는 따로<body>모아서 붙혀 넣기를 했습니다.


스크립트 파일은 <head> 또는 <body> 부분에 붙혀 넣기 하면 되고 보통 외부 스크립트 파일은 <head>안에 위치하라고 하는데

스크립트 위치는 크게 상관이 없는 것 같습니다. 다만 코드를 한 곳에 모아두는 습관을 가지는 것이 좋고 페이지에 영향을 주는

외부 스타일 이나 스크립트 파일을 우선 배치시키는 것이 페이지의 내용을 정확하게 표시되고 동작한다는 이론이 있습니다.



카카오톡 버튼 달기


     <a id="kakao-link-btn" href="javascript:sendLink()">
           <img src="./images/업로드한_이미지_파일" ></a>  

업로드한 이미지 파일 명을 적어서 해당 코드를 사용해서 버튼을 만들어주면 됩니다.

해당 버튼은 카카오톡이 앱이 설치된 경우만 작동하기 때문에

.hidden-lg.hidden-md 사용해 PC 화면에서는

보이지 않게 처리 하는 것도 좋습니다.


이제 개별 설정을 할 부분을 수정 해보자

꼭 아래 소스 에서

YOUR APP KEY부분은

입력 해줍니다.


카카오톡 원래 기본 예제에서 웹버튼만 추가한 형태입니다.

제목은 치환자를 통해서 [##_page_title_##] 를 통해서 쉽게 해결했는데

썸네일은 이번에 새롭게 추가된 티스토리 썸네일 치환자 로도 보이지가 않습니다.


썸네일 나타나게 하는 문제 때문에


몇 시간을 고생하던 중 

http://hawool.com/106 블로그에서

본문의 첫번째 이미지를 썸네일을 갖고 오는 소스를 찾게 됩니다!


카카오톡 공유하기 버튼에 기능을 부여하는 소스 코드 - [HTML] 부분에 추가


<!-- /body 윗부분에 추가-->
<script>
    var firstImg=$(".imageblock:first-of-type img");
    var contents="";
    if(firstImg.attr("src")){
        var firstImgSrc=firstImg.attr("src");
        var firstImgRatio = parseInt(firstImg.css("height"))/parseInt(firstImg.css("width"));
        if (firstImgRatio <=0.27) var firstImgRatio=0.27;
    }else{var firstImgSrc=location.origin+"/favicon.ico";var firstImgRatio=1}
  
    Kakao.init('YOUR APP KEY');   // 사용할 앱의 JavaScript 키를 설정해 주세요.

    function sendLink() {
      Kakao.Link.sendTalkLink({
        label: '[##_page_title_##]', // 공유할 메세지의 제목을 설정
				 image: {
        src: firstImgSrc,
        width: '300',
        height: parseInt(300*firstImgRatio)
      } // 이건 썸네일을 설정 하는 겁니다.
				,
      webButton: {
        text: '기사 꼭 보러가기^ㅡ^',
         url : document.URL // 각각의 포스팅 본문의 링크를 거는 코드입니다. 
      }
      });
    }
</script>	

자 그리고 이제 버튼을 눌러보면


정상적으로 출력이 되게 됩니다!



썸네일은 제일 첫 번째 이미지가 보이게 됩니다.

* 이미지의 최소 크기는 가로80px, 세로 80px입니다. 이미지의 용량은 500KB 이하로 제한 됩니다.


그럼 다들 손쉽게 블로그에 카카오톡 공유링크를 달아보시기 바랍니다.

개인 키를 발급 받아서 공유하는 방식 때문에 기존 방식에서 교체를 해야합니다!!

신고

댓글을 달아 주세요

  1. BlogIcon 슈나우저 2016.02.10 20:53 신고

    좋은정보 감사합니다 어렵지만 차근차근 따라해봐야겠군요 ㄷㄷ;

  2. BlogIcon 베짱이 2016.02.13 17:01 신고

    개발지식이 부족해서
    전부 이해하지는 못했지만
    카카오에서 개발자를 위한 API를 공개했고
    그걸 활용하는 방식이군요. 좋은 정보 감사합니다.

    자주 올게요. 베짱이 공간에도 자주 찾아주세요. ^^

    • BlogIcon COCOSOFT COCO Media 2016.02.13 17:34 신고

      네 감사합니다^^CCZ-CROSS스킨을 사용하셨네요! ㅎㅎ 최근에 이스킨이 가장 마음에 듭니다! 거의 모든 운영체제와 브라우저를 호환하면서도 빠른 속도를 제공해서 좋은것같습니다!!

  3. BlogIcon 언젠간. 2016.03.01 04:00 신고

    코코님, 트위터 공유하는 코드좀 가르쳐주세요. 무식하게 TEXT와 URL가지고 오는 건 인코딩 문제 때문에 이제 공유가 안되더라고요.
    고수님의 도움이 절실히 필요합니다. 부탁좀 드릴게요.
    감사합니다. ^^*

    • BlogIcon COCOSOFT COCO Media 2016.03.01 06:09 신고

      아닙니다. ㅠ 저도 초보에요.ㅎㅎ 그냥 검색해가면서 배워가며 하나둘씩 만들어가고있답니다. ㅠ_ㅠ

      트위터 공유코드는 티스토리 자체플러그인을 이용하려면
      http://아이디.tistory.com/plugin/sendSNS_Message?service=twitter&entryId=글고유ID&title=제목

      <a href="javascript:;" onclick="ShareEntryWithSNS.share('twitter', '글고유ID', 'encodeURIComponent(document.title)');">트위터공유버튼</a>

      이런식으로 버튼을 간단하게 만들면되는데..
      근데 글고유ID의 갖고와야하는데.. 도메인을 제외한 경로 값을 갖고오는 능력은 제게 없기 때문에.... 이방법은 포기했구요.ㅠ
      능력자분들이 있으면 요방법 도와주시면 좋은데..

      그다음으로는 그냥 트위터 자체 공유URL을 이용한 방법으로
      요건 뭐 구글링을 해보면 많이 알려져있고 거의 대부분의 스킨에 들어가 있을거라고 생각하네요ㅎㅎ
      https://twitter.com/share?url=글주소&amp;via=글제목

      아래와 같이 버튼을 만들면 됩니다^^
      <a href="#" onclick="javascript:window.open('https://twitter.com/share?url='+encodeURIComponent(document.URL)+'&amp;via='+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter">트위터공유버튼</a>

    • BlogIcon 언젠간. 2016.03.01 14:47 신고

      글 고유 ID라면 혹시 [샵샵_article_rep_id_샵샵] 이걸 말씀하시는 걸까요? 이렇게 하면 도메인 빼고 뒤에 포스팅 /xxx 같은 숫자만 끌고 오거든요.
      저렇게 넣어도 제목을 가져오지 못하는 것 같네요.

      마지막 코드는 설정을 해봤는데, @가 제목 앞에 붙고, 제목 끝에 '님이 공유'란 엉뚱한 메세지가 나오네요.
      공유가 안되는 건 아니지만 뭔가 문장이 어색해서 말끔하게 정돈하고 싶은데, 그게 참 어려운거 같애요.
      트위터에서 제공하는 코드를 쓰면 로딩하는데 오래걸려 맘에 안들더라고요.

      아무튼 친절하게 도움 주셔서 정말 감사하고요,
      혹시라도 트위터 말끔하게 공유할 수 있는 코드 찾으신다면 공유좀 부탁드릴게요.

      도움 많이 받고 갑니다. 감사합니다.

    • BlogIcon COCOSOFT COCO Media 2016.03.01 20:42 신고

      <a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'+encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" class="twitter hidden-xs"><i class="icon icon-twitter"></i></a>

      이렇게 하니깐 @님이 공유라는 말이 없이 제목과 링크 또는 하고 싶은 말을 설정할수있네요!! 앞에 [공유] 라고 적어났습니다!! 그냥 링크공유 주소가아닌 트윗 날리기용 주소를 사용하니깐 쉽게 조절이 되네요. 어차피 트위터는 링크를 포함해서 트윗 날려도 동일하게 표현이되네요!! ㅎㅎ

    • BlogIcon 언젠간. 2016.03.01 20:50 신고

      와, 완죤 감사합니다. 진정한 고수님 맞으세요!

  4. BlogIcon ForReal 2016.03.15 20:09 신고

    와 감사합니다! 이 포스팅과 본문하단이미지 넣기 포스팅 보면서 차근차근 따라해서 버튼 달았어요!!
    하지만ㅠㅠ코코님처럼 가운데에 예쁘게 정렬 시키고 싶은데ㅠㅠ
    고것도 알려주심안될까요? ^0^

    • BlogIcon ForReal 2016.03.15 20:13 신고

      댓글 쓰고 보니, 이건...검색해보니 제가 찾아봐야할 문제 같습니다ㅠ 죄송합니다! 여하튼 감사합니다!!

    • BlogIcon COCOSOFT COCO Media 2016.03.15 20:14 신고

      <div class="foot-source" style="center" ;="">

      <div class="foot-source" style="display: table;margin-left: auto;margin-right: auto;">

      이런식으로 고쳐주면됩니다^^ display를 테이블형식으로 바꾸고 좌우마진을 자동으로 주어서 가운데로 오게하는 방법이에요!

    • BlogIcon COCOSOFT COCO Media 2016.03.15 20:17 신고

      그리고 추가적으로 카카오톡 버튼은 클릭해도 눌러지지 않으니깐

      div class="foot-source" 에다가 class="foot-source hidden-lg"

      라고 하면 와이드 PC화면에는 보이지 않을 거에요 이건 선택사항입니다.!!

    • BlogIcon ForReal 2016.03.15 21:42 신고

      빠르고 자세한 설명 너무 감사합니다!! !!^0^!
      저도 사실 숨겨보고 싶었는데 코드기본기(?)가 아예 없어서 이해를 못했었거든요
      팁까지 더 자세하게 알려주셔서 감사합니다!
      블로그 내용들도 너무 좋아요! 좋은 저녁되세요!^0^

  5. BlogIcon 어썸 로그 2016.11.24 20:52 신고

    안녕하세요..서브카테고리에서 보내지지 않는데 어떢하죠 ㅠ?

  6. BlogIcon 어썸 로그 2016.11.24 20:52 신고

    안녕하세요..서브카테고리에서 보내지지 않는데 어떢하죠 ㅠ?

  7. BlogIcon 줄반장 2016.12.15 10:42 신고

    좋은 정보 감사합니다.
    근데 궁금한것이 있는데요
    SNS버튼이 티스토리 맨아래부분에 위치해 있는데
    공감버튼 아래로 보내기위해서는 어떻게 해야 할까요?^^

  8. 가오슝 2017.03.28 14:17 신고

    좋은글 잘 봤습니다. 감사합니다.
    그런데 저도 적용을 해봤는데 썸네일이 출력되지 않네요 엑스표시가 나옵니다. 왜 그런걸까요

티스토리 툴바