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

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



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



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를 추가합니다 :)


+소스는 여기에+



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


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

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

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


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



끝 :)



+ Recent posts