카카오링크 활용 / 이미지&링크 카톡으로 깔끔하게 보내기 (API) > 그누보드5 팁자료실

그누보드5 팁자료실

카카오링크 활용 / 이미지&링크 카톡으로 깔끔하게 보내기 (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

 

1754226436_1564325864.2976.jpg

추천
10

댓글 28개

위에 코드를 그대로 복사하셔서 html에 붙여넣으신 후
발급받으신 키값, 이미지경로, 제목 텍스트 등 사용하실 용도에 맞게 변경하신 후
만드신 html파일을 FTP로 업로드하시고 모바일로 업로드하신 페이지를
열어보시면 카카오 버튼이 하나 있습니다~

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

뭐사실 이미지를 포함한 링크를 좀더
깔끔하게(?) 보내는 용도밖에 안되서..ㅎㅎ
안녕하세요, 좋은자료 공유해주셔서 감사합니다.
한 가지 풀지 못하는 문제가 있어서 문의드립니다.
공유해주신대로 링크는 다 잘되는데요.

카카오앱 생성시 제목으로 나오는 부분을 클릭하면
이미지를 링크해둔 웹서버의 도메인으로 갑니다.

제가 원하는 것은 카카오앱 생성시 제목설정했던 부분이 실제 카카오톡 대화방에서는 이미지 아래에 나오는 버튼(카카오앱 생성시 이름)을 눌러도 링크가 안 걸리게 할 수 없을까 질문드립니다.
즉, 이 부분을 클릭해도 링크가 안되게 할 수는 없을까요.

이렇게 질문드리는 이유는
저의 경우는 카페24의 쇼핑몰을 두개 운영 중인데
카카오 링크용 이미지 보관은 같은 도메인을 사용합니다(미이지를 공통으로 쓰기위해).
그러다 보니 카카오앱 플랫폼 설정에서 같은 도메인을 쓸 수 밖에 없어서
이미지 링크주소는 (http://공통이미지서버주소)
이미지 클릭시 연결되는 주소는(http://a쇼핑몰)과 (http://b쇼핑몰) 이런씩으로 완전히 다른 주소입니다.
당시에 해당영역은 카카오앱 등록할때 도메인이 들어가므로 수정이 안되는걸로 알고 있습니다,,
지금은 어떨런지 잘 모르겠네요 ㅠㅠ
만드신 페이지를 모바일로 접속하시면 카카오아이콘이 있습니다
아이콘 클릭하시면 기기에 등록되어있는 친구를 선택하시고 보낼 수 있습니다~
.php나 .html로 페이지를 코딩하신후에
파일을 FTP로 계정에 업로드하고..
해당파일을 휴대폰으로 브라우저에서 열어주시면 되세요..ㅎ
카카오에서 제공하는 고정양식이라 거기까지는 못봤네요~
아마도 가로 100%로 자동으로 채워지는것 같고,
사이즈는 좀 커야 선명하게 보일것 같네요 ~
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT