테스트 사이트 - 개발 중인 베타 버전입니다

카카오링크 활용 / 이미지&링크 카톡으로 깔끔하게 보내기 (API)

· 6년 전 · 29671 · 28

카톡으로 이미지를 포함한 링크, 깔끔하게 보내기 팁 입니다.

최근 친구놈 모바일 청첩장을 만들면서 알게된 정보를 공유합니다~

 

우선 카카오 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

 

1754226436_1564325864.2976.jpg

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 28개

6년 전
흠 .. 대단 하세요 이밤에,,,
6년 전
그래도 이사님 못따라갑니다 ~ ^^;
6년 전
좋은 정보네요 공개해 주셔서 감사합니다.
6년 전
^^ 감사합니다~
펄스나인님 이었다니...
이거 공식 팬 1호 가능한건가요? ㅎㅎ

추천은 물론 입니다^^
6년 전
ㅎㅎㅎ 과찬이십니다!
6년 전
어떻게 사용해야 할지 모르겠네요.ㅠㅠ
6년 전
위에 코드를 그대로 복사하셔서 html에 붙여넣으신 후
발급받으신 키값, 이미지경로, 제목 텍스트 등 사용하실 용도에 맞게 변경하신 후
만드신 html파일을 FTP로 업로드하시고 모바일로 업로드하신 페이지를
열어보시면 카카오 버튼이 하나 있습니다~

그걸 누르시면 카카오톡 친구선택 화면이 나오고
보내신 친구를 선택한 후 확인< 을 누르시면 html에서 설정한대로
카톡이 전달됩니다~

뭐사실 이미지를 포함한 링크를 좀더
깔끔하게(?) 보내는 용도밖에 안되서..ㅎㅎ
초보초보초보초보
6년 전
딱 제가 필요한 소스였는데~ 감사합니다^^
6년 전
ㅎㅎ 감사합니다~ 잘쓰셔요~

게시글 목록

번호 제목
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