카톡으로 이미지를 포함한 링크, 깔끔하게 보내기 팁 입니다.
최근 친구놈 모바일 청첩장을 만들면서 알게된 정보를 공유합니다~
우선 카카오 API 키가 필요합니다~
https://developers.kakao.com/apps
키발급 방법에 대한 가이드는 검색하면 많은 정보가 있으니 참고해주시고,
Kakao.init('발급받은 JavaScript 키'); 부분에 웹용, javascript키를 넣어주시면 됩니다.
코드는 아래와 같습니다.
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>타이틀을 넣어주세요.</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
<body>
<a id="kakao-link-btn" href="javascript:;">
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
//<![CDATA[
Kakao.init('발급받은 JavaScript 키');
Kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'feed',
content: {
title: '대제목',
description: '소제목',
imageUrl: '이미지주소',
link: {
mobileWebUrl: '이미지클릭시 이동할 모바일용 링크주소',
webUrl: '이미지클릭시 이동할 PC용 링크주소'
}
},
buttons: [
{
title: '버튼 타이틀',
link: {
mobileWebUrl: '버튼클릭시 이동할 모바일용 링크주소',
webUrl: '버튼클릭시 이동할 PC용 링크주소'
}
}
]
});
//]]>
</script>
</body>
</html>
[/code]
위 코드만 넣어서 각 항목에 들어갈 내용을
사용하시는 링크의 용도에 맞게 넣어주시고 업로드 한 후
모바일기기로 업로드하신 페이지로 접속하시면 카카오 아이콘이 있습니다.
클릭 하시면 카카오톡 으로 연결되고 카카오톡에 등록된 친구를
선택할 수 있으며 [확인] 하시면 바로 발송 됩니다.
꼭 자신에게 먼저 보내서 충분한 테스트를 해보시고 보내세요 ~
주의하실점은 위 코드를 실행하는 파일 및 링크주소는
카카오앱 생성시 등록한 도메인 안에서만 되어야 정상작동 합니다.
카카오링크 Dev 가이드 : https://developers.kakao.com/docs/js/kakaotalklink
댓글 28개
한 가지 풀지 못하는 문제가 있어서 문의드립니다.
공유해주신대로 링크는 다 잘되는데요.
카카오앱 생성시 제목으로 나오는 부분을 클릭하면
이미지를 링크해둔 웹서버의 도메인으로 갑니다.
제가 원하는 것은 카카오앱 생성시 제목설정했던 부분이 실제 카카오톡 대화방에서는 이미지 아래에 나오는 버튼(카카오앱 생성시 이름)을 눌러도 링크가 안 걸리게 할 수 없을까 질문드립니다.
즉, 이 부분을 클릭해도 링크가 안되게 할 수는 없을까요.
이렇게 질문드리는 이유는
저의 경우는 카페24의 쇼핑몰을 두개 운영 중인데
카카오 링크용 이미지 보관은 같은 도메인을 사용합니다(미이지를 공통으로 쓰기위해).
그러다 보니 카카오앱 플랫폼 설정에서 같은 도메인을 쓸 수 밖에 없어서
이미지 링크주소는 (http://공통이미지서버주소)
이미지 클릭시 연결되는 주소는(http://a쇼핑몰)과 (http://b쇼핑몰) 이런씩으로 완전히 다른 주소입니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 24318 | |
| 24317 | |
| 24315 | |
| 24309 | |
| 24294 | |
| 24293 | |
| 24277 | |
| 24262 | |
| 24260 | |
| 24253 | |
| 24251 | |
| 24236 | |
| 24233 | |
| 24228 | |
| 24226 | |
| 24221 | |
| 24214 | |
| 24203 | |
| 24201 | |
| 24199 | |
| 24196 | |
| 24195 | |
| 24194 | |
| 24192 | |
| 24191 | |
| 24187 | |
| 24185 | |
| 24183 | |
| 24172 | |
| 24168 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기