카카오 링크 자바스크립트 예제(kakao link javascript example)

출처 : http://ngee.tistory.com/879

요번에 해볼 예제는 카카오 링크 예제!!

카톡을 통해 친구들에게 내 서비스를 편리하게 공유할 수 있도록 제공하는 기능이죠 :)

예제는 카카오 개발자 페이지에 너무나 잘 되어 있고, 여기서는 확인하는 수준으로 정리합니다 :)

1.먼저 카카오 서비스 API에 등록하셔야 합니다. 

    - 카카오 Open API 홈페이지 : https://developers.kakao.com/

    - 아이디 없으신 분들은 가입하고 로그인해서 API KEY를 받아야 합니다 !!

    - 새로운 APP을 만들고, 앱의 개요 페이지를 보면 KEY가 존재합니다. 

2. 카카오 링크를 생성하는 페이지의  Head 부분에

<script src="//developers.kakao.com/sdk/js/kakao.min.js"   ></script>

 을 추가합니다 :)

 사용자들이 누를 수 있는 버튼 같은 걸 만들어줍니다 :)

<a class="no-uline btn" id="kakao-link-btn" href="javascript:;">

<img style="margin-left:5px; height:22px;" src="http://dn.api1.kage.kakao.co.kr/14/dn/btqa9B90G1b/GESkkYjKCwJdYOkLvIBKZ0/o.jpg" />

<p style="color: black; margin-left:8px; display:inline;"> 카카오톡을 통해 친구들과 공유할래요. </p>

</a>

 마지막으로 버튼을 눌렀을 때 카카오 링크 기능이 작동하도록 Javascript를 추가합니다 :)

+소스는 여기에+

  Kakao.init('api_key_api_key_api_key_api_key_api_key_api_key');

    Kakao.Link.createTalkLinkButton({

        container: '#kakao-link-btn',

        label: '링크 테스트',

        image: {

            src: 'http://ip_address_or_domain_name/static/a1.png',

            width: '250',

            height: '172'

        },

        webButton: {

            text: 'LINK TEST',

            url: 'http://ngee.tistory.com'

        }

    });

init 함수에는 api_key가 꼭 들어가야합니다. 여러분꺼로. 

src에는 외부에서도 접근 가능한 url이 되어야 합니다. 

그러니깐 http://도메인_주소/이미지_경로.png  이런식이어야 합니다. 도메인 주소는 ip address로 변경되어도 가능하구요.

이런건 안되요.  '/static/a1.png' 당연한 이야기죠 ? :) 

적용해보면 아래와 같은 화면을 만날 수 있어요 !! 

끝 :)

출처: http://ngee.tistory.com/879 [ngee]