이걸 하는 이유는 스케치북에서 기본 제공하는 카카오톡 보내기가 마음에 들지 않기 때문입니다.
https://xetown.com/qna/150418 참조
(* 우선 스케치북 공홈에서 1.7.2버전으로 업그레이드해야 합니다. http://xe.sketchbook.kr/freeboard/83081 )
1. 카카오톡 개발자센터(https://developers.kakao.com )에 가입하고 "앱 만들기"를 이용해서 사이트 등록하고 api키 발급받습니다.
2. 스케치북 설정에 api키를 입력하거나, list.html파일의 Kakao.init를 직접 수정해서 넣습니다.
3. _read.html파일을 열고, <!--// SNS --> 부분에 카카오톡 부분을 찾아서 다음과 같이 수정합니다.
<a id="kakao-link-btn" class="kakao" href="javascript:;"><b class="ico_sns kakao">Kakao</b></a>
4. 아래 적당한 부분에 다음과 같이 추가합니다.
<script>
Kakao.Link.createTalkLinkButton({
container: '#kakao-link-btn',
label: '{$oDocument->getTitle()}',
<!--@if($oDocument->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type))-->
image: {
src: '{$oDocument->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}',
width: '{$module_info->thumbnail_width}', // 썸네일 최소크기는 세로 80px, 가로 80px
height: '{$module_info->thumbnail_height}'
},
<!--@else-->
image: {
src: '사이트 기본 이미지 주소', // 게시물에 이미지가 없을 경우 불러옵니다.
width: '넓이',
height: '높이' // 기본 이미지의 크기를 기재합니다.
},
<!--@endif-->
webButton: {
text: '사이트 이름', // 사이트에 맞게 적절히 수정
url: '{getUrl($oDocument->document_srl)}' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
}
});
</script>
끝.
# 참고한 게시물
https://developers.kakao.com/docs/js
https://xe1.xpressengine.com/qna/22759299
https://xe1.xpressengine.com/tip/22818572
https://xetown.com/lakepark/126508
내용추가: 모바일 카카오스토리 작동하도록 수정하기
(내용수정: 제가 웹으로 공유하기랑 앱으로 공유하는걸 잘못 읽었네요. 모바일 앱으로 열도록 수정했습니다)
위 3번에서 <!--@if(Mobile::isMobileCheckByAgent())--> 아랫줄의 카카오스토리를 이렇게 수정합니다.
<a class="kakaostory" href="javascript:shareStory()"><b class="ico_sns kakaostory">KakaoStory</b></a>
그 다음에, 4번의 마지막 </script> 이전 부분에 다음과 같이 추가합니다.
function shareStory() {
Kakao.Story.open({
url: '{getUrl($oDocument->document_srl)}',
text: '{$oDocument->getTitle()}'
});
}
내용2차수정: 확인해보니 저 스크립트를 모바일에서만 불러와야지, 안그러면 개발자도구로 확인할때 콘솔에서 에러가 나더군요.
거슬리는 분들은 앞뒤를 <!--@if(Mobile::isMobileCheckByAgent())-->, <!--@end--> 로 감싸주면 됩니다.
