안녕하세요. 오늘은 대단한 것이면서엄청난 것을 해보겠습니다.
바로 카카오톡 공유 버튼 만들기 입니다.!
지금 대부분의 블로그에서 카카오톡 공유 버튼이 오류일 것입니다.
바로 아래 처럼 새롭게 바뀐 카카오톡 공유 버튼을 만들어 보겠습니다.
짜잔!!
사실 몇몇 기존 블로그 스킨에 카카오톡 공유 버튼이 있거나
예전에는 티스토리 자체 플러그인에서도 카카오톡 보내는 기능이 있었지만
지금은 카카오스토리 트위터 페이스북만 플러그인으로 제공되고 있습니다.
지금 모든 예전 방식의 버튼들은 오류가 뜨고
제대로 전달되지 않게 됩니다!
바로 카카오 링크 방식이 변경되어서 이렇게 오류가 나타나게 되는 현상입니다!
이제 본격적으로 카카오톡 공유 버튼을 만들어 보겠습니다.
카카오톡 만들기 준비물
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부분은
입력 해줍니다.
카카오톡 원래 기본 예제에서 웹버튼만 추가한 형태입니다.
제목은 치환자를 통해서 [##_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>
자 그리고 이제 버튼을 눌러보면
정상적으로 출력이 되게 됩니다!
썸네일은 제일 첫 번째 이미지가 보이게 됩니다.
그럼 다들 손쉽게 블로그에 카카오톡 공유링크를 달아보시기 바랍니다.
개인 키를 발급 받아서 공유하는 방식 때문에 기존 방식에서 교체를 해야합니다!!
좋은정보 감사합니다 어렵지만 차근차근 따라해봐야겠군요 ㄷㄷ;
개발지식이 부족해서
전부 이해하지는 못했지만
카카오에서 개발자를 위한 API를 공개했고
그걸 활용하는 방식이군요. 좋은 정보 감사합니다.
자주 올게요. 베짱이 공간에도 자주 찾아주세요. ^^
코코님, 트위터 공유하는 코드좀 가르쳐주세요. 무식하게 TEXT와 URL가지고 오는 건 인코딩 문제 때문에 이제 공유가 안되더라고요.
고수님의 도움이 절실히 필요합니다. 부탁좀 드릴게요.
감사합니다. ^^*
와 감사합니다! 이 포스팅과 본문하단이미지 넣기 포스팅 보면서 차근차근 따라해서 버튼 달았어요!!
하지만ㅠㅠ코코님처럼 가운데에 예쁘게 정렬 시키고 싶은데ㅠㅠ
고것도 알려주심안될까요? ^0^
안녕하세요..서브카테고리에서 보내지지 않는데 어떢하죠 ㅠ?
안녕하세요..서브카테고리에서 보내지지 않는데 어떢하죠 ㅠ?
좋은 정보 감사합니다.
근데 궁금한것이 있는데요
SNS버튼이 티스토리 맨아래부분에 위치해 있는데
공감버튼 아래로 보내기위해서는 어떻게 해야 할까요?^^
좋은글 잘 봤습니다. 감사합니다.
그런데 저도 적용을 해봤는데 썸네일이 출력되지 않네요 엑스표시가 나옵니다. 왜 그런걸까요
혹시, pc에서 보낼수 있는 방법은 없나요??...
이 글 보면서 몇일째 혼자 끙끙대고 있습니다.
카카오톡 버튼 달기의 2줄 코드는
html/css 에서 어느 부분에 위치시켜야 되는지 모르겠네요!1 답변좀 부탁드릴게요 ㅠㅠ