RX / XERXE 활용팁서드파티
Extra Form

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

 

https://www.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://www.xpressengine.com/qna/22759299

https://www.xpressengine.com/tip/22818572

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

 

  • profile
    핑크두유 2016.01.19 22:03:13
    좋아요~
  • profile
    dongdong 2016.01.20 11:10:30
    감사합니다. 그동안 팁을 봐도 잘 몰랐었는데. 추천!!
  • profile
    고양이 2016.01.20 14:01:44
    팁감사드립니다. 적용하여 보려고하는데
    스케치북 설정에 api키를 입력하거나, list.html파일의 Kakao.init를 직접 수정해서 넣습니다.
    이부분은 어디에서 수행하여야 하나요 스케치북 설정에도 API 넣는곳이 그리고 LIST.html 파일에도 카카오관련된 파일이 보이질 않습니다.
  • ?
    기븐 2016.01.20 14:26:06

    1.7.2 버전으로 업그레이드하세요
     

    http://xe.sketchbook.kr/

  • profile
    고양이 2016.01.20 14:29:58
    http://xe.sketchbook.kr/freeboard/83081

    아 이쪽주소에 XE 공홈에 안올라온 최신 자료가 있었네요 감사합니다.
  • ?
    기븐 2016.01.20 14:41:44
    사실 너무 예전에 업그레이드해서 저게 공홈에 안 올라왔었다는걸 깜박했네요.

    본문에 추가해야겠네요
  • profile
    고양이 2016.01.20 16:03:56
    메세지를 발송한 앱의 설정(사이트 도메인)에 오류가 있어 ...에러가 발생합니다.
    API를 수정했고 사이트 도메인을 추가하였음에도 발생하네요

    혹시 Redirect Path 값이 /oauth가 맞을까요?

    감사합니다.
  • profile
    고양이 2016.01.20 16:13:47
    url: '{getUrl($oDocument->document_srl)}' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.
    이부분을

    url: 'http://www.주소.com{getUrl($oDocument->document_srl)}' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.

    이렇게 바꿔주니 작동을 하네요.
  • ?
    기븐 2016.01.20 16:46:51
    그러면 주소가 이중으로 걸리지 않나요?
  • ?
    기븐 2016.01.20 16:50:44
    주소란을 {$sns_link} 이걸로 한번 해보세요

    참고로 전 본문으로 잘 됩니다. 오히려 다른 주소를 먹이니까 그런 오류가 나더군요.

    (리다이렉트는 로그인 관련한 부분일 겁니다)
  • profile
    고양이 2016.01.20 16:55:21

    {$sns_link} 로 하니 에러 없이 잘됩니다.

    {getUrl($oDocument->document_srl)} 이걸로하면 모듈명이 붙어서 폴더주소로 붙어서 에러 나는 가봅니다.


    감사합니다. ^^

     

  • profile
    아파치 2016.02.09 17:32:02
    좋은팁 감사합니다.
  • profile
    일단놓고말해 2016.02.19 08:22:22
    어디서부터 잘못된건지.....
    왜 안돼는건지~~~~ ㅠㅜ
  • profile
    일단놓고말해 2016.03.06 02:20:16
    web button에서
    url: '{$sns_link}' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다.

    요렇게 바꾸니... 잘 돼요!!!!! *^^*
  • profile
    데버 2016.06.27 02:51:10
    감사합니다. 좋은 정보 얻어갑니다.

서버에 요청 중입니다. 잠시만 기다려 주십시오...