출처 : 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를 추가합니다 :)
+소스는 여기에+
init 함수에는 api_key가 꼭 들어가야합니다. 여러분꺼로.
src에는 외부에서도 접근 가능한 url이 되어야 합니다.
그러니깐 http://도메인_주소/이미지_경로.png 이런식이어야 합니다. 도메인 주소는 ip address로 변경되어도 가능하구요.
이런건 안되요. '/static/a1.png' 당연한 이야기죠 ? :)
적용해보면 아래와 같은 화면을 만날 수 있어요 !!
끝 :)
출처: http://ngee.tistory.com/879 [ngee]
'자바스크립트' 카테고리의 다른 글
jquery get 한글 깨짐 (0) | 2017.12.30 |
---|---|
카카오톡 친구 맺기 (0) | 2017.12.29 |
자바스크립트를 이용해 위도,경도를 주소로 변환하기 (0) | 2017.12.29 |
모바일 웹 사이트 바로가기 설정 (0) | 2017.12.28 |
네이버앱을 통해 모바일 웹에서 북마크 하기 (0) | 2017.12.28 |