카카오링크 활용 / 이미지&링크 카톡으로 깔끔하게 보내기 (API) 정보
카카오링크 활용 / 이미지&링크 카톡으로 깔끔하게 보내기 (API)본문
카톡으로 이미지를 포함한 링크, 깔끔하게 보내기 팁 입니다.
최근 친구놈 모바일 청첩장을 만들면서 알게된 정보를 공유합니다~
우선 카카오 API 키가 필요합니다~
https://developers.kakao.com/apps
키발급 방법에 대한 가이드는 검색하면 많은 정보가 있으니 참고해주시고,
Kakao.init('발급받은 JavaScript 키'); 부분에 웹용, javascript키를 넣어주시면 됩니다.
코드는 아래와 같습니다.
<!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>
위 코드만 넣어서 각 항목에 들어갈 내용을
사용하시는 링크의 용도에 맞게 넣어주시고 업로드 한 후
모바일기기로 업로드하신 페이지로 접속하시면 카카오 아이콘이 있습니다.
클릭 하시면 카카오톡 으로 연결되고 카카오톡에 등록된 친구를
선택할 수 있으며 [확인] 하시면 바로 발송 됩니다.
꼭 자신에게 먼저 보내서 충분한 테스트를 해보시고 보내세요 ~
주의하실점은 위 코드를 실행하는 파일 및 링크주소는
카카오앱 생성시 등록한 도메인 안에서만 되어야 정상작동 합니다.
카카오링크 Dev 가이드 : https://developers.kakao.com/docs/js/kakaotalklink
!-->
추천
10
10
댓글 28개
흠 .. 대단 하세요 이밤에,,,
그래도 이사님 못따라갑니다 ~ ^^;
좋은 정보네요 공개해 주셔서 감사합니다.
^^ 감사합니다~
펄스나인님 이었다니...
이거 공식 팬 1호 가능한건가요? ㅎㅎ
추천은 물론 입니다^^
이거 공식 팬 1호 가능한건가요? ㅎㅎ
추천은 물론 입니다^^
ㅎㅎㅎ 과찬이십니다!
어떻게 사용해야 할지 모르겠네요.ㅠㅠ
위에 코드를 그대로 복사하셔서 html에 붙여넣으신 후
발급받으신 키값, 이미지경로, 제목 텍스트 등 사용하실 용도에 맞게 변경하신 후
만드신 html파일을 FTP로 업로드하시고 모바일로 업로드하신 페이지를
열어보시면 카카오 버튼이 하나 있습니다~
그걸 누르시면 카카오톡 친구선택 화면이 나오고
보내신 친구를 선택한 후 확인< 을 누르시면 html에서 설정한대로
카톡이 전달됩니다~
뭐사실 이미지를 포함한 링크를 좀더
깔끔하게(?) 보내는 용도밖에 안되서..ㅎㅎ
발급받으신 키값, 이미지경로, 제목 텍스트 등 사용하실 용도에 맞게 변경하신 후
만드신 html파일을 FTP로 업로드하시고 모바일로 업로드하신 페이지를
열어보시면 카카오 버튼이 하나 있습니다~
그걸 누르시면 카카오톡 친구선택 화면이 나오고
보내신 친구를 선택한 후 확인< 을 누르시면 html에서 설정한대로
카톡이 전달됩니다~
뭐사실 이미지를 포함한 링크를 좀더
깔끔하게(?) 보내는 용도밖에 안되서..ㅎㅎ
딱 제가 필요한 소스였는데~ 감사합니다^^
ㅎㅎ 감사합니다~ 잘쓰셔요~
정말정말 필요한 소스 잘사용해 보겠습니다 감사해요
도움이 되셨다니 다행입니다~
잘쓰세요~
잘쓰세요~
감사합니다
감사합니다~
좋은 소스 공유 감사합니다!
좋은말씀 감사합니다~
카카오톡 링크
안녕하세요, 좋은자료 공유해주셔서 감사합니다.
한 가지 풀지 못하는 문제가 있어서 문의드립니다.
공유해주신대로 링크는 다 잘되는데요.
카카오앱 생성시 제목으로 나오는 부분을 클릭하면
이미지를 링크해둔 웹서버의 도메인으로 갑니다.
제가 원하는 것은 카카오앱 생성시 제목설정했던 부분이 실제 카카오톡 대화방에서는 이미지 아래에 나오는 버튼(카카오앱 생성시 이름)을 눌러도 링크가 안 걸리게 할 수 없을까 질문드립니다.
즉, 이 부분을 클릭해도 링크가 안되게 할 수는 없을까요.
이렇게 질문드리는 이유는
저의 경우는 카페24의 쇼핑몰을 두개 운영 중인데
카카오 링크용 이미지 보관은 같은 도메인을 사용합니다(미이지를 공통으로 쓰기위해).
그러다 보니 카카오앱 플랫폼 설정에서 같은 도메인을 쓸 수 밖에 없어서
이미지 링크주소는 (http://공통이미지서버주소)
이미지 클릭시 연결되는 주소는(http://a쇼핑몰)과 (http://b쇼핑몰) 이런씩으로 완전히 다른 주소입니다.
한 가지 풀지 못하는 문제가 있어서 문의드립니다.
공유해주신대로 링크는 다 잘되는데요.
카카오앱 생성시 제목으로 나오는 부분을 클릭하면
이미지를 링크해둔 웹서버의 도메인으로 갑니다.
제가 원하는 것은 카카오앱 생성시 제목설정했던 부분이 실제 카카오톡 대화방에서는 이미지 아래에 나오는 버튼(카카오앱 생성시 이름)을 눌러도 링크가 안 걸리게 할 수 없을까 질문드립니다.
즉, 이 부분을 클릭해도 링크가 안되게 할 수는 없을까요.
이렇게 질문드리는 이유는
저의 경우는 카페24의 쇼핑몰을 두개 운영 중인데
카카오 링크용 이미지 보관은 같은 도메인을 사용합니다(미이지를 공통으로 쓰기위해).
그러다 보니 카카오앱 플랫폼 설정에서 같은 도메인을 쓸 수 밖에 없어서
이미지 링크주소는 (http://공통이미지서버주소)
이미지 클릭시 연결되는 주소는(http://a쇼핑몰)과 (http://b쇼핑몰) 이런씩으로 완전히 다른 주소입니다.
당시에 해당영역은 카카오앱 등록할때 도메인이 들어가므로 수정이 안되는걸로 알고 있습니다,,
지금은 어떨런지 잘 모르겠네요 ㅠㅠ
지금은 어떨런지 잘 모르겠네요 ㅠㅠ
다 만들고 저장도 했는데 그 다음 어떻게 사람들한테 전달 할 수 있나요??
만드신 페이지를 모바일로 접속하시면 카카오아이콘이 있습니다
아이콘 클릭하시면 기기에 등록되어있는 친구를 선택하시고 보낼 수 있습니다~
아이콘 클릭하시면 기기에 등록되어있는 친구를 선택하시고 보낼 수 있습니다~
만든 페이지(?)를 모바일상에서 어떻게 접속 하는 건가요?
.php나 .html로 페이지를 코딩하신후에
파일을 FTP로 계정에 업로드하고..
해당파일을 휴대폰으로 브라우저에서 열어주시면 되세요..ㅎ
파일을 FTP로 계정에 업로드하고..
해당파일을 휴대폰으로 브라우저에서 열어주시면 되세요..ㅎ
좋은 정보 감사합니다. 혹시 이미지 사이즈를 조절하는 코드는 없나요?
카카오에서 제공하는 고정양식이라 거기까지는 못봤네요~
아마도 가로 100%로 자동으로 채워지는것 같고,
사이즈는 좀 커야 선명하게 보일것 같네요 ~
아마도 가로 100%로 자동으로 채워지는것 같고,
사이즈는 좀 커야 선명하게 보일것 같네요 ~
굿
좋은자료공유 감사합니다.!
감사합니다.