팁/튜토리얼

이걸 하는 이유는 스케치북에서 기본 제공하는 카카오톡 보내기가 마음에 들지 않기 때문입니다.

 

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--> 로 감싸주면 됩니다.

 

댓글 15