[javascript] 카카오링크 사용하기(모바일전용)

진짜 백만년만에 포스팅. (ㅋㅋㅋㅋ)

정신줄을 놨다 잡았다를 무한반복하다가 이래선 안되겠다 싶어서.ㅠㅠ

시간이 날때마다 혼자한 쌩쑈들을 다시 기록해두기로 했다. 아자아자 화이팅!

기본 지식이 아--무것도 없다는 전제하에 최대한 자세하고 쉬운설명으로,

모바일상에서 보내기에 꼭 빠지지않고 한자리 차지하고 있는 카톡 아이콘을 사용하는 방법을 설명하고자 한다.

1. https://developers.kakao.com/

카카오 개발자 사이트 접속 - 카카오링크 클릭! - 앱 개발 시작하기 버튼 클릭!

여기까지 하면, 로그인을 요구한다. 개발자 전용개정이 있는게 좋으니까 회원가입을 하는걸로~

가입하고 다시 카카오 링크페이지로 돌아가서 앱 개발 시작하기를 누르면,

내 애플리케이션 페이지로 이동!

좌측 메뉴에 요런 화면이 뜨면 앱 만들기를 클릭!

맨 처음 앱 만들기를 클릭하면 사용자이름과 앱이름을 입력하는 필드가 두개 뜬다.

(이미 만든앱이 있고 앱을 추가한다면 위의 캡쳐처럼 입력 필드는 하나..)

앱 이름을 입력하고 create 버튼을 누르면~

애플리케이션을 생성했다는 페이지와 함께 4개의 key가 생성된다.

2. 1번까지 하고나면 기본적인 준비(?)는 끝!

https://developers.kakao.com/docs/js#카카오톡-링크

여기 보면 링크 생성하는 예제와 개발가이드가 있다.

카카오 링크의 경우 모바일에서만 전송이 가능하며, 해당 버튼의 하단에 스크립트를 넣어주면 된다.

<script>

    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('YOUR APP KEY'); //괄호안에 생성받은 JavaScript키를 입력해준다

    // 카카오톡 링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createTalkLinkButton({
      container: '#kakao-link-btn',
      label: 'BitterSweet Life :: 신도리이야기', //라벨
      image: {
        src: 'http://dn.api1.kage.kakao.co.kr/14/dn/btqaWmFftyx/tBbQPH764Maw2R6IBhXd6K/o.jpg', //이미지
        width: '300', //이미지가로
        height: '200' //이미지세로
      },
      webButton: {
        text: '신도리이야기로 GO', //버튼에 들어갈 텍스트
        url: 'https://dev.kakao.com/docs/js' //클릭했을때 연결되는 링크 url
      }
    });
    </script>

해당하는 라벨(타이틀), 이미지 등을 채워주고도 추가하고 싶은것이 있다면,

https://developers.kakao.com/docs/js-reference#kakao_link

여기서 카카토링크와 관련된 추가 함수들을 볼수있다ㅎㅎ

3. 앱버튼의 이미지는 따로 설정하지 않으면 상단이미지처럼 기본 버튼이미지가 적용되므로

앱버튼의 이미지를 변경하고싶다면,

내 애플리케이션 - 앱 정보 - 설정 으로 가서 변경가능하다!

뭔지몰라서 한참을 찾았는데ㅎㅎ(멍충이ㅜㅜ) 저 APP이미지에 마우스 오버를하면 edit가 뜨면서 이미지를 업로드할수 있게 된다..