매뉴얼

외부 API 카카오톡 링크 연동 방법

기존 방식의 경우 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>

 

[위치 - 결과물]

 

 

* 주의사항

카카오 디벨로퍼에 앱등록시 작성한 도메인에서만 연결이 됩니다.

도메인이 여러개일 경우 카카오 디벨로퍼에 도메인을 추가로 등록을 해주시면 됩니다.

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top