카카오 공유하기의 경우 거의 대다수 사이트에서 많이 볼 수 있으며 모바일에서는 웹 브라우저 기본 공유시에도 카카오톡 공유하기가 제공되기 때문에 상당히 많은 비중을 차지하고 있는것을 알 수 있다.
다만 원하는 형태의 내용을 담아 공유하기 위해선 카카오 API 중 JS SDK 가 필요하다. (카카오 공유하기는 javascript 방식만 제공) 이번편에서는 카카오 공유하기에 대한 간단한 예제를 살펴보도록 하자. 참고로 중간에 PHP 소스가 있으니 원하는 방식을 참고하길 바란다.
| 카카오톡 공유하기 공식 개발가이드 문서
카카오 공유하기의 경우 아래와 같은 소스코드로 간단하게 바로 테스트 해볼 수 있다. (아래 예제는 카카오 공유하기 예제소스를 참고 하였으며 소스코드 몇군데만 수정을 했다.)
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<a id="kakaotalk-sharing-btn" href="javascript:;">
<img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
alt="카카오톡 공유 보내기 버튼" />
</a>
<script>
var kakaoShareData = {
container: '#kakaotalk-sharing-btn',
objectType: 'feed',
content: {
title: '딸기 치즈 케익',
description: '#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
imageUrl:
'http://k.kakaocdn.net/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',
},
},
],
};
Kakao.init('카카오 developers > 내 애플리케이션 > 요약정보 > 앱키 > JavaScript 키'); // JavaScript 키
Kakao.Share.createDefaultButton(kakaoShareData);
</script>
| 실행화면(PC)
너무 간단해서 예제라고하기엔 메리트가 없는면이 있어서 아래와 같이 이번엔 공유하기 옵션 객체들을 PHP로 처리해보았다.
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<a id="kakaotalk-sharing-btn" href="javascript:;">
<img src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
alt="카카오톡 공유 보내기 버튼" />
</a>
<?php
// 카카오 공유하기 옵션 데이터
$kakaoShareData = array(
'container'=>'#kakaotalk-sharing-btn',
'objectType'=>'feed',
'content'=>array(
'title'=>'딸기 치즈 케익',
'description'=>'#케익 #딸기 #삼평동 #카페 #분위기 #소개팅',
'imageUrl'=>'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
'link'=>array(
'mobileWebUrl'=>'https://developers.kakao.com',
'webUrl'=>'https://developers.kakao.com',
),
),
'social'=>array(
'likeCount'=>286,
'commentCount'=>45,
'sharedCount'=>845,
),
'buttons'=>
array(
array(
'title'=>'웹으로 보기',
'link'=> array(
'mobileWebUrl'=>'https://developers.kakao.com',
'webUrl'=>'https://developers.kakao.com',
)
),
array(
'title'=>'앱으로 보기',
'link'=> array(
'mobileWebUrl'=>'https://developers.kakao.com',
'webUrl'=>'https://developers.kakao.com',
)
),
),
);
?>
<script>
Kakao.init('카카오 developers > 내 애플리케이션 > 요약정보 > 앱키 > JavaScript 키'); // JavaScript 키
Kakao.Share.createDefaultButton(<?php echo json_encode($kakaoShareData) ?>);
</script>
위의 예제소스를 보면 객체에 들어갈 내용을 PHP로 처리한 부분을 볼 수 있다. PHP에선 배열을 json_encode() 함수를 사용하여 객체 String 으로 변경할 수 있기때문에 이를 잘 활용한다면 여러 데이터를 깔끔하게 PHP단에서 처리 후 스크립트에선 최소한의 PHP스크립트만 사용하여 처리할 수 있다.