[티스토리] 카카오톡 공유버튼 만드는 법

💻 Information/Computer

[티스토리] 카카오톡 공유버튼 만드는 법

GigaWatt 2017. 10. 19. 20:32

티스토리에는 카카오톡 공유버튼이 아직 없습니다. 이 글을 통해 쉽게 만들어 보시기 바랍니다.

3번의 복사 붙여넣기로 카카오톡 공유 버튼 만들기가 가능합니다.

하시기 전에 카카오디벨로퍼(카카오 개발자 플랫폼) 사이트에서 자신의 자바코드만 준비하시면 됩니다.

※ 붙여넣을 코드는 아래 텍스트 파일로 준비했습니다.

1. 카카오톡 공유버튼 스크립트 적용

HTML의 <head> ~ </head> 안에 아래 코드 넣기

1
2
3
<!-- 카카오톡 공유하기 스크립트 시작 -->
<script src="http://developers.kakao.com/sdk/js/kakao.min.js"></script>
<!-- 카카오톡 공유하기 스크립트 끝 -->
Colored by Color Scripter
cs

2. 카카오톡 공유버튼 스크립트 적용2

HTML <body> ~ </body> 안에 아래 코드 넣기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- 카카오톡 공유하기 스크립트 시작 -->
 
<script type='text/javascript'>
 
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('카카오디벨로퍼에서 받은 자바코드를 넣어야 합니다');
 
Kakao.Link.createTalkLinkButton({
 
container: '#kakao-link-btn',
 
label: '[티스토리] 카카오톡 공유버튼 만드는 법',
 
image: {src: firstImgSrc,
 
width: '300',
 
height: parseInt(300*firstImgRatio)},
 
webButton: {
 
text: '블로그 방문하기',
 
url: document.URL}});
 
</script>
 
<!-- 카카오톡 공유하기 스크립트 끝 -->
Colored by Color Scripter
cs

3. 카카오톡 공유버튼 HTML에서 원하는 위치에 붙여넣기

<body>~</body>안에 <div class="area_etc"> 영역의 "<li><a href="#none" class="ico_skin link_fb" data-service="facebook">페이스북</a></li>"

위의 코드 찾아 바로 아랫줄에 코드 붙여넣기.

1
<li><a id="kakao-link-btn" href="javascript:;"class="ico_skin link_kt">카카오톡</a></li>
cs

위의 모든 코드를 적은 텍스트 파일 입니다.

kakaotalk share.txt

백업 후 적용하세요.

저작자표시 비영리 변경금지

현재글[티스토리] 카카오톡 공유버튼 만드는 법

기가왓

[티스토리] 카카오톡 공유버튼 만드는 법

1. 카카오톡 공유버튼 스크립트 적용

2. 카카오톡 공유버튼 스크립트 적용2

3. 카카오톡 공유버튼 HTML에서 원하는 위치에 붙여넣기

'💻 Information/Computer'의 다른글

티스토리툴바

[티스토리] 카카오톡 공유버튼 만드는 법

1. 카카오톡 공유버튼 스크립트 적용

2. 카카오톡 공유버튼 스크립트 적용2

3. 카카오톡 공유버튼 HTML에서 원하는 위치에 붙여넣기

'💻 Information/Computer'의 다른글

관련글

티스토리툴바