[카카오톡 URL 공유]Kakao.Link.createDefaultButton 팝업 안뜸

메시지 API 메시지 API 사용 신청
1

카카오톡 url 공유 기능을 구현하기 위하여 이렇게 작성하였습니다.

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>   
<script>
function fn_sendFB(sns) {
    var thisUrl = document.URL;
    var snsTitle = "공유 테스트";

    if( sns == 'kakaotalk' ) {
        // 사용할 앱의 JavaScript 키 설정
        Kakao.init('내 javascript key');
        console.log(sns);
        console.log(thisUrl);

        // 카카오링크 버튼 생성
        Kakao.Link.createDefaultButton({
            container: '#btnKakao', // HTML에서 작성한 ID값
            objectType: 'feed',
            content: {
                title: "공유 테스트", // 보여질 제목
                description: "test", // 보여질 설명
                imageUrl: thisUrl, // 콘텐츠 URL
                link: {
                    mobileWebUrl: thisUrl,
                    webUrl: thisUrl
                }
            }
        });
    }
</script>
<a href="#n" id="btnKakao" onclick="fn_sendFB('kakaotalk');return false;" class="kakaotalk" target="_self" title="카카오톡 새창열림"><img src="icon-kakao.png"></a>

을 하였는데, 처음 클릭했을 때는 console.log로 sns, thisUrl이 콘솔에 뜨는데, 공유 팝업이 뜨지 않습니다.
그래서 두번째 클릭을 하면 ‘Uncaught $t {name: ‘KakaoError’, message: ‘Kakao.init: Already initialized’}’ 오류가 발생합니다. 이것은 init이 여러번 되서 그런 오류가 뜬다 쳐도 처음 클릭했을 때, 왜 공유 팝업이 뜨지 않는 걸까요…?

2

createDefaultButton 함수는 container에 카카오 링크 버튼을 생성합니다.
즉, 1회만 수행되면 되고 (생성된 이후 기능작동합니다.)
#btnKakao 객체가 fn_sendFB 함수를 항상 호출할 필요가 없습니다.

(1) 페이지 로드시, createDefaultButton 함수를 1회 실행하시거나

(2) 버튼에 이벤트를 걸어 fn_sendFB 함수를 사용하실거라면 createDefaultButton를 사용하지 마시고, 아래 함수를 사용해주세요.

Kakao.Link.sendDefault({
  objectType: 'text',
  text: '간단한 JavaScript SDK 샘플과 함께 카카오 플랫폼 서비스 개발을 시작해 보세요.',
  link: {
    mobileWebUrl: 'https://developers.kakao.com',
    webUrl: 'https://developers.kakao.com'
  },
  serverCallbackArgs: { // 사용자 정의 파라미터 설정
    key: 'value'
  }
});
1개의 좋아요
3 
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script>
    var thisUrl = document.URL;
    var snsTitle = "공유 테스트";
    
    
    function fn_sendFB(sns) {
    
        if( sns == 'facebook' ) {
            var url = "http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(thisUrl);
            window.open(url, "", "width=486, height=286");
        }
        else if( sns == 'twitter' ) {
            var url = "http://twitter.com/share?url="+encodeURIComponent(thisUrl)+"&text="+encodeURIComponent(snsTitle);
            window.open(url, "tweetPop", "width=486, height=286,scrollbars=yes");
        }
        else if( sns == 'band' ) {
            var url = "http://www.band.us/plugin/share?body="+encodeURIComponent(snsTitle)+"&route="+encodeURIComponent(thisUrl);
            window.open(url, "shareBand", "width=400, height=500, resizable=yes");
        } 
        else if( sns == 'kakaotalk' ) {
                // 사용할 앱의 JavaScript 키 설정
           // Kakao.init('f5436745a6ae787d5dbdb***');

            // 카카오링크 버튼 생성
            Kakao.Link.sendDefault({
               //container: '#btnKakao', // HTML에서 작성한 ID값
                objectType: 'text',
                text: '공유 테스트 입니다.',
                //content: {
                   // title: "공유 테스트", // 보여질 제목
                   // description: "test", // 보여질 설명
                  //  imageUrl: thisUrl, // 콘텐츠 URL
                    link: {
                        mobileWebUrl: thisUrl,
                        webUrl: thisUrl
                    },
                    serverCallbackArgs: { // 사용자 정의 파라미터 설정
                    key: '내 javascript key'
                  }
            });
        }
    }
</script>
<div>
       <a href="#n" onclick="fn_sendFB('facebook');return false;" class="facebook" target="_self" title="페이스북 새창열림"><img src="icon-facebook.png"></a>
       <a href="#n" onclick="fn_sendFB('twitter');return false;" class="twitter" target="_self" title="트위터 새창열림"><img src="icon-twitter.png"></a>
       <a href="#n" onclick="fn_sendFB('band');return false;" class="band" target="_self" title="네이버밴드 새창열림"><img src="icon-band.png" style="width: 40px;"></a>
       <a href="#n" id="btnKakao" onclick="fn_sendFB('kakaotalk');return false;" class="kakaotalk" target="_self" title="카카오톡 새창열림"><img src="icon-kakao.png"></a>
</div>

이렇게 작성하였는데. 'Uncaught TypeError: Cannot read properties of undefined (reading ‘sendDefault’)'가 발생합니다…ㅠㅠ

4

Kakao.init 을 안하신 것 같습니다.

Kakao.init도 이벤트마다 호출하는게 아니라 페이지 로딩 시 한번만 되도록 해주세요.