카카오링크 보내기 ( Kakao.Link )

Open API/kakao|2017. 1. 18. 15:20
반응형



동적으로 바뀌는 내용의 카카오링크를 보내는 예제입니다.



카카오 Developers 페이지에서도 확인 하실 수 있습니다.

https://developers.kakao.com/docs/js



추가적인 함수들은 아래 링크에서 확인가능합니다.

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



적용하기 위해서는 api 와 url 정보 변경이 필요합니다.


샘플 Url : http://www.uhoon.co.kr/dev/kakao/83.html



<!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>KakaoLink Demo(Dynamic) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<h3>카카오톡 앱이 설치되어 있는 모바일 기기라면 아래의 링크가 동작합니다.</h3>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//dev.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('eb3c1b62b32108278b664b7fc35d5174');

    function sendLink() {
		Kakao.Link.sendTalkLink({
			label: '카카오톡 내보내기',
			webLink: {
				text:'http://dev.uhoon.co.kr',
				url:'dev.uhoon.co.kr'
			}
		});
    }
  //]]>
</script>

</body>
</html>


저작자표시

댓글()

카카오톡 개발자 등록 및 애플리케이션 등록

Open API/kakao|2017. 1. 18. 15:14
반응형

카카오 API도 버전이 올라가며 많이 바뀌었네요.


밑바닥 부터 천천히 하나씩 짚어봐야겠습니다.


첫발을 내딛기 위해서는 등록부터..




▼  https://developers.kakao.com/


Kakao Developers에 로그인 합니다.





▼ https://developers.kakao.com/apps


내 애플리케이션 메뉴에서 앱 만들기를 선택합니다.





▼ 앱 이름을 적고 앱 만들기를 클릭



▼ 필요한 경우 앱 아이콘을 업로드 할수도 있습니다.





▼ 등록하면 인증키가 바로 발급됩니다.






▼ 키가 발급되었어도 플랫폼 등록을 해야 실제 사용이 가능합니다.






▼  당분간은 어플 사용할 계획이 없으므로 웹으로 등록해봅니다.




▼ 실제로 키가 유출되어도 플랫폼 등록이 안되어있게되면 인증 오류가 발생하므로 걱정없습니다..ㅎㅎ




이렇게하면 카카오 API를 이용할 준비가 되었습니다.


하나씩 이용해봐야겠습니다.

저작자표시

댓글()

네이버 맵 (기본 맵 + 마커) v3

Open API/Naver|2016. 12. 20. 17:59
반응형

네이버 기본 맵 ( 마커 찍기 + 라벨 넣기 )


Test Url : http://www.uhoon.co.kr/test/995.html

네이버 API 키 발급 Url : https://dev.naver.com/openapi/register


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <title>네이버 맵 마커 </title>
  <style>v\:* { behavior: url(#default#VML); }</style>
  <!-- prevent IE6 flickering -->
  <script type="text/javascript">
   try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
  </script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버맵키"></script>
 </head>
 <body>
 <div id = "naverMap" style="border:1px solid #000; width:700px; height:400px; margin:20px; display:block;"></div>
 <script type="text/javascript">
    var oPoint = new nhn.api.map.LatLng(37.7396101, 127.0623053);
    nhn.api.map.setDefaultPoint('LatLng');
    oMap = new nhn.api.map.Map('naverMap', {
        center : oPoint,
        level : 10, // 줌 초기 값 10.
        enableWheelZoom : true,
        enableDragPan : true,
        enableDblClickZoom : false,
        mapMode : 0,
        activateTrafficMap : false,
        activateBicycleMap : false,
        activateRealtyMap : true,
        minMaxLevel : [ 1, 14 ],
        size : new nhn.api.map.Size(500, 400)
    });
 
    var oSize = new nhn.api.map.Size(28, 37);
    var oOffset = new nhn.api.map.Size(14, 37);
    var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
 
    // 마커 찍기
    var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '유느님이 계신 곳 ' });  //마커 생성
    oMarker1.setPoint(oPoint); //마커 표시할 좌표 선택
    oMap.addOverlay(oMarker1); //마커를 지도위에 표현
 
    //라벨 넣기
    var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
    oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
    oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기
 
  </script>
 </body>
</html>


저작자표시

댓글()
이전 1 2 3 4 5 6 7 8 ··· 28 다음

티스토리툴바