애니빌드.LAB
매뉴얼
외부 API 카카오톡 링크 연동 방법
- Anybuild
- 2014-12-16 12:42:00
- hit9381
- http://lab.anybuild.co.kr/bbs/faq/3792
기존 방식의 경우 safari에서 지원하지 않아 아래와 같이 변동되었습니다.
우선 카카오톡 링크를 사용하려면 API key 발급 및 등록을해야 하므로 아래 매뉴얼을 보고 선작업을 해주셔야 합니다.
http://lab.anybuild.co.kr/bbs/faq/6743
API key 발급이 완료되었다면 아래의 페이지에서 구현하고자 하는 링크를 확인해 주세요.
https://developers.kakao.com/tool/demo/message/kakaolink
(선택 후 스크롤을 조금 내리면 기본소스가 제공됩니다. 카카오 버튼을 클릭하면 카톡으로 전송해 볼 수 있습니다.)
* 다시 돌아와서 이제 삽입방법에 대해 안내드리겠습니다.
카카오링크의 경우 header 또는 footer에 많이 삽입이 되기때문에 스킨 소스에 적용하는 것을 추천드립니다.
각 구현방식별로 들어가야할 소스는 아래와 같습니다. (kakao script 연결, a태그 버튼으로 사용)
(kakao API Javascript 키는 위에서 앱을 등록하고 발급받은 Javascript Key를 입력해 주시면 됩니다.)
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script>
Kakao.init('kakao API Javascript 키');
</script>
<a id="kakao-link-btn" href="javascript:;"><img src="카카오 버튼으로 사용할 이미지" alt="카카오톡 공유 보내기 버튼" /></a>
아래 소스는 추가로 삽입되어야 할 구현 방법별 소스입니다.
* 기본 메시지 - 피드
<script>
Kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'feed',
content: {
title: '내 홈페이지 이름 또는 소개할 타이틀',
description: '키워드 해시태그 ex) #케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
imageUrl:'링크에 나올 사진 전체 경로 ex) https://www.anybuild.com/img_up/shop_pds/anybuild4/design/img/img_logo.png',
link: {
mobileWebUrl: '이미지 클릭시 링크 모바일 전체 경로 ex) https://www.anybuild.com',
webUrl: '이미지 클릭시 링크 전체 경로 ex) https://www.anybuild.com',
},
},
buttons: [
{
title: '카카오 톡에서 버튼으로 내에 작성될 문구 ex) 웹으로 보기',
link: {
mobileWebUrl: '버튼 클릭시 모바일 전체 경로 ex) https://www.anybuild.com',
webUrl: '버튼 클릭시 전체 경로 ex) https://www.anybuild.com',
},
}
// 버튼 한개만 사용하신다면 아래 노란부분을 삭제하시면 됩니다.
,{
title: '카카오 톡에서 버튼으로 내에 작성될 문구 ex) 앱으로 보기',
link: {
mobileWebUrl: '버튼 클릭시 모바일 전체 경로 ex) https://www.anybuild.com',
webUrl: '버튼 클릭시 전체 경로 ex) https://www.anybuild.com',
}
}
]
})
</script>
[피드 - 결과물]
* 기본 메시지 - 리스트
<script>
Kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'list',
headerTitle: '리스트 타이틀',
headerLink: {
mobileWebUrl: '타이틀 클릭시 모바일 링크 전체 경로 ex) https://www.anybuild.com',
webUrl: '타이틀 클릭시 링크 전체 경로 ex) https://www.anybuild.com',
},
contents: [
{
title: '취미의 특징, 탁구',
description: '스포츠',
imageUrl:
'http://k.kakaocdn.net/dn/bDPMIb/btqgeoTRQvd/49BuF1gNo6UXkdbKecx600/kakaolink40_original.png',
link: {
mobileWebUrl: '이미지 클릭시 모바일 링크 전체 경로 ex) https://www.anybuild.com',
webUrl: '이미지 클릭시 링크 전체 경로 ex) https://www.anybuild.com',
},
}
// 리스트 한개만 사용하신다면 아래 노란부분을 삭제하시면 됩니다.
,{
title: '크림으로 이해하는 커피이야기',
description: '음식',
imageUrl:'http://k.kakaocdn.net/dn/QPeNt/btqgeSfSsCR/0QJIRuWTtkg4cYc57n8H80/kakaolink40_original.png',
link: {
mobileWebUrl: '이미지 클릭시 모바일 링크 전체 경로 ex) https://www.anybuild.comm',
webUrl: '이미지 클릭시 링크 전체 경로 ex) https://www.anybuild.com',
},
}
,{
title: '감성이 가득한 분위기',
description: '사진',
imageUrl:'http://k.kakaocdn.net/dn/c7MBX4/btqgeRgWhBy/ZMLnndJFAqyUAnqu4sQHS0/kakaolink40_original.png',
link: {
mobileWebUrl: '이미지 클릭시 모바일 링크 전체 경로 ex) https://www.anybuild.com',
webUrl: '이미지 클릭시 링크 전체 경로 ex) https://www.anybuild.com',
},
}
],
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: '버튼 클릭시 모바일 전체 경로 ex) https://www.anybuild.com',
webUrl: '버튼 클릭시 전체 경로 ex) https://www.anybuild.com',
},
}
// 버튼 한개만 사용하신다면 아래 노란부분을 삭제하시면 됩니다.
,{
title: '앱으로 보기',
link: {
mobileWebUrl: '버튼 클릭시 모바일 전체 경로 ex) https://www.anybuild.com',
webUrl: '버튼 클릭시 전체 경로 ex) https://www.anybuild.com',
},
}
]
})
</script>
[리스트 - 결과물]
* 기본 메시지 - 위치
address 의 경우 카카오 지도 내에서 검색이 가능한 주소를 입력해 주세요.
<script>
Kakao.Link.createDefaultButton({
container: '#kakao-link-btn',
objectType: 'location',
address: '부산광역시 해운대구 센텀중앙로 97',
addressTitle: '애니빌드',
content: {
title: '신메뉴 출시♥︎ 체리블라썸라떼',
description: '이번 주는 체리블라썸라떼 1+1',
imageUrl:'http://k.kakaocdn.net/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png',
link: {
mobileWebUrl: 'https://www.anybuild.com',
webUrl: 'https://www.anybuild.com',
},
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'https://www.anybuild.com',
webUrl: 'https://www.anybuild.com',
},
},
],
})
</script>
[위치 - 결과물]
* 주의사항
카카오 디벨로퍼에 앱등록시 작성한 도메인에서만 연결이 됩니다.
도메인이 여러개일 경우 카카오 디벨로퍼에 도메인을 추가로 등록을 해주시면 됩니다.
열기 닫기