Min's아빠

옐로우아디가 있는 경우

http://goto.kakao.com/@아이디

로 링크시 카톡친구추가 페이지로 이동됨

출처 : 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]

var lon = '경도';    

var lat = '위도';

$.ajax({    

url: 'https://apis.daum.net/local/geo/coord2addr?apikey=발급받은API키&longitude=' + lon + '&latitude=' + lat + '&inputCoordSystem=WGS84&output=json',    

type: 'GET',    

cache: false,    

context: {},    

crossOrigin: true,    

success: function(data) {        

var jsonObj = $.parseJSON(data);        

var contentText = document.getElementById('content');            

contentText.innerHTML += "<br>동네 이름 : " + jsonObj.name + " / 전체 주소 : " + jsonObj.fullName + " / 나라 : " + jsonObj.name0;    

},error:function(request,status,error){        

alert("다시 시도해주세요.\n" + "code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);    

}

});

1. iOS

기본 아이폰이 제공하는 UI 처리 : 아이폰은 자동으로 모서리가 둥글게 되고, 아이콘 위쪽은 밝게, 아래는 어둡게 자동으로 광택 효과가 적용

1.1 기본 아이폰이 제공하는 UI 처리 사용시

1.2 기본 아이폰이 제공하는 UI 처리 사용하지 않을시

apple-touch-icon.png 가 기본 이름이지만 임의대로 할수도 있습니다.  

일반적으로 아이폰에서 웹사이트 아이콘을 추가하게 되면 웹사이트 화면을 캡쳐한 내용을 아이콘으로 사용하는데 
apple-touch-icon 이라는 링크를 추가하여 아이콘을 내가 지정한 것으로 사용할 수 있습니다. 

아이폰은 57×57 , 아이패드는 72×72, 아이폰4는 114×114 사이즈의 png 이미지를 사용하며,  

가능하면 114×114 이미지로 만들어두면 아이폰에서 자동으로 크기 리사이즈를 해줌. 

2. 안드로이드(Android)

아이콘 사이즈는 안드로이는 같은 경우 72x72(px)의 png이미지를 지정하면 됩니다.

3. 스크립트를 이용 웹브라우저를 판단후 처리 할 수 있는 방법은 아래와 같습니다.

<script type="text/javascript">

var userAgent = navigator.userAgent.toLowerCase();
var url = "";
var icon = "";
var title = "";
var serviceCode = "";

function home_key(){
document.write('<object id="bookmark_obj" type="text/html" data="naversearchapp://addshortcut?url='+url+'&icon='+icon+'&title='+title+'&serviceCode='+serviceCode+'&version=7" width="0" height="0"></object>')

}

function bookmark_btn(){
 if(userAgent.match('iphone')) {
  home_key();
 } else if(userAgent.match('ipad')) {
  home_key();
 } else if(userAgent.match('ipod')) {
  home_key();
 } else if(userAgent.match('android')) {
  home_key();
 }
}
</script>

<input type="button" value="북마크" onclick="bookmark_btn();">