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

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

· 6년 전 · 29670 · 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개

5년 전
만드신 페이지를 모바일로 접속하시면 카카오아이콘이 있습니다
아이콘 클릭하시면 기기에 등록되어있는 친구를 선택하시고 보낼 수 있습니다~
만든 페이지(?)를 모바일상에서 어떻게 접속 하는 건가요?
5년 전
.php나 .html로 페이지를 코딩하신후에
파일을 FTP로 계정에 업로드하고..
해당파일을 휴대폰으로 브라우저에서 열어주시면 되세요..ㅎ
좋은 정보 감사합니다. 혹시 이미지 사이즈를 조절하는 코드는 없나요?
5년 전
카카오에서 제공하는 고정양식이라 거기까지는 못봤네요~
아마도 가로 100%로 자동으로 채워지는것 같고,
사이즈는 좀 커야 선명하게 보일것 같네요 ~
굿
좋은자료공유 감사합니다.!
감사합니다.

게시글 목록

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