폰갭 - 카카오톡링크 , 카카오 스토리 공유 방법
어플에 SNS 공유를 넣자
폰갭 어플에서 SNS 공유 기능 개발
문제점 : 카카오톡및 카카오 스토리 공유 기능의 웹뷰 미지원
어플 개발에서 SNS 공유 기능이 최근 웹뷰에서 동작하지 않거나 웹뷰로 공유 페이지가 나와서 제대로 동작하지 안을 경우가 있습니다.
최근 저희 개발에서 이런 상황이 벌어져 소스를 변경하여 공유 합니다.
카카오톡 공유, 카카오 스토리 공유 방법
서버에 별도의 SNS 공유 HTML문서로 준비합니다.
var url="http://도메인/HTML문서";
var ref = cordova.InAppBrowser.open(url, '_system', 'location=no');
어플에서 위 스크립트를 실행해서 공유를 실행합니다.
_system 으로 실행하여 시스템 브라우즈를 실행하도록 합니다.
공유하기 소스
<!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>KakaoStory Share Button Demo - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
</head>
<body>
<img src="https://developers.kakao.com/sdk/js/resources/story/icon_small.png" onclick="shareStory()"/>
<img src="//developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_small.png" onclick="sendLink();" />
<script type='text/javascript'>
//<![CDATA[
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('키값');
function shareStory() {
Kakao.Story.open({
url: 'http://blog.kakaocorp.co.kr/390',
text: '카카오검색에서 카카오스토리를! #카카오스토리 #카카오검색 :)'
});
}
//]]>
function sendLink() {
Kakao.Link.sendDefault({
objectType: 'feed',
content: {
title: '딸기 치즈 케익',
description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
imageUrl: 'http://mud-kage.kakao.co.kr/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
link: {
mobileWebUrl: 'https://developers.kakao.com',
webUrl: 'https://developers.kakao.com'
}
},
social: {
likeCount: 286,
commentCount: 45,
sharedCount: 845
},
buttons: [
{
title: '웹으로 보기',
link: {
mobileWebUrl: 'https://developers.kakao.com',
webUrl: 'https://developers.kakao.com'
}
},
{
title: '앱으로 보기',
link: {
mobileWebUrl: 'https://developers.kakao.com',
webUrl: 'https://developers.kakao.com'
}
}
]
});
}
//]]>
sendLink();
</script>
</body>
</html>
위 소스로 카카오톡과 카카오 스토리로 공유 가능합니다. 위 소스는 카카오톡과 카카오 스토리 앱을 실행하여 공유 합니다. PC 버전에는 해당사항이 없습니다. 카카오 API 소스를 보시면 일반 웹으로 공유하는 방법이 나와 있습니다.
