안녕하세요. 카톡 카카오톡 공유 버튼 만들기를 해보겠습니다.
지금 대부분의 블로그에서 카카오톡 공유 버튼이 오류일 것입니다.
바로 아래 처럼 새롭게 바뀐 카카오톡 공유 버튼을 만들어 보겠습니다.
짜잔!!
최신 버전 카카오톡 공유 버튼 만들기 2022 버전
소스코드 내용이 많이 바뀌었습니다. 아래코드만 참고하면 됩니다. 나머지부분은 다 안됩니다.
<a href="javascript:shareLink()">
<img src="./images/widget_kt_btn.png"> //버튼 이미지를 삽입 하는 곳입니다. 본인의 이미지를 삽입하네요.
</a>
<script>
function shareLink() {
Kakao.Link.sendScrap( {
requestUrl: location.href
} );
};
</script>
아래 코드는 옛날 코드이며 동작을 하지 않습니다.
위 코드로 손쉽게, 공유버튼을 만들 수 있으며, PC버전에서도 작동합니다.
2022-04-14 수정
---------------------------------------------------------------------------------------------------------------------------
사실 몇몇 기존 블로그 스킨에 카카오톡 공유 버튼이 있거나
예전에는 티스토리 자체 플러그인에서도 카카오톡 보내는 기능이 있었지만
지금은 카카오스토리 트위터 페이스북만 플러그인으로 제공되고 있습니다.
지금 모든 예전 방식의 버튼들은 오류가 뜨고
제대로 전달되지 않게 됩니다!
바로 카카오 링크 방식이 변경되어서 이렇게 오류가 나타나게 되는 현상입니다!
이제 본격적으로 카카오톡 공유 버튼을 만들어 보겠습니다.
카카오톡 만들기 준비물
2개의 준비물이 필요합니다.
1. 버튼으로 사용할 아이콘!
이건 제가 포토샵으로 기존 플러그인과 동질감있게 만든거입니다.
위에 것을 사용하셔도 좋고 아니면 직접 아이콘을 준비 하셔야 합니다.
2. kakao developers에 가입
총 사용량은 일반 블로그 유저들은 크게 신경 쓰지 않아도 되는 부분입니다.
아래 쿼터 정책이 자세히 나와있습니다.
본격적으로 카카오톡 공유 버튼 만들기
카카오디벨로퍼 페이지에서 [내 애플리케이션] -> [앱 만들기] 를 우선 해줍니다.
그럼 앱이 생성되면서 키값이 보입니다.
키값은 공개해서는 안됩니다. 잘 보관 합시다!
바로 [설정]에 들어가거나 좌측 링크에서 [앱정보]->[설정]을 들어가줍니다.
그리고 [플랫폼] 추가를 해줍니다.
매우 중요
합니다!! 꼭해줍니다.
그냥 티스토리 도메인만 사용하는 경우는 그냥 티스토리 주소만 적으면 됩니다.
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
부분은
입력 해줍니다.
카카오톡 원래 기본 예제에서 웹버튼만 추가한 형태입니다.
제목은 치환자를 통해서 [티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크) 를 통해서 쉽게 해결했는데
썸네일은 이번에 새롭게 추가된 티스토리 썸네일 치환자 로도 보이지가 않습니다.
새로 추가된 티스토리 썸네일 치환자
썸네일 나타나게 하는 문제 때문에
몇 시간을 고생하던 중
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: '[티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크)', // 공유할 메세지의 제목을 설정 image: { src: firstImgSrc, width: '300', height: parseInt(300*firstImgRatio) } // 이건 썸네일을 설정 하는 겁니다. , webButton: { text: '기사 꼭 보러가기^ㅡ^', url : document.URL // 각각의 포스팅 본문의 링크를 거는 코드입니다. } }); } </script> 자 그리고 이제 버튼을 눌러보면
정상적으로 출력이 되게 됩니다!
썸네일은 제일 첫 번째 이미지가 보이게 됩니다.
그럼 다들 손쉽게 블로그에 카카오톡 공유링크를 달아보시기 바랍니다.
개인 키를 발급 받아서 공유하는 방식 때문에 기존 방식에서 교체를 해야합니다!!
