Http://gongmohe.com/

JavaScript
#1

카카오톡 “링크 보내기” 사용 에서 JavaScript 키 재발급 후 에러납니다.
처음에는 잘되다가 재발급 후 안되고 있습니다.
→ 에러 현상 : 버튼을 클릭해도 반응이 없습니다.
여기 내용 참고해서 찾아봐도 해결이 안되어서 문의 올립니다.

앱 ID 844932

입니다.

#2

안녕하세요.

해당 사이트에 접속해보니 구현하신 코드에 문제가 있어 보입니다.

1. JS SDK 로드, SDK초기화를 두번 하고 있습니다.

2. 존재하지 않는 element에 카카오 링크 버튼을 생성하고 있습니다.

image
image

3. 카톡 전달 버튼이 존재하지 않는 함수를 호출하고 있습니다.

image
image

서비스측 코드를 수정 하셔야 할것 같아요

#3

  1. JS SDK 로드, SDK초기화를 두번 하고 있습니다.
    → 일단 "kakaolink.js는 삭제했습니다. (지금은 삭제를 했지만, 이부분은 중복이 되도 처음부터 정상적으로 작동되었습니다.)

  2. 존재하지 않는 element에 카카오 링크 버튼을 생성하고 있습니다.
    → 내 애플리케이션에서 템플렛을 삭제했습니다. (링크 작동이 안되어서 템플렛을 만들어 보았는데. 지금삭제했습니다.)

  3. 카톡 전달 버튼이 존재하지 않는 함수를 호출하고 있습니다.
    → 버튼에 링크는 처음에 링크 작동이 잘된것 기존것과 같은 링크입니다.

체크해서 다시 해봐도 안됩니다.
알려주신부분이 이해가 되질 않습니다.

그리고 문제는 위의 소스문제가 아닌듯 합니다.
처음에 링크 잘되던것이… → JavaScript 키 재발급 받고나서 안되었으며… 안되어 새로 내 애플리케이션만 추가해서 적용한 것입니다. 위에 알려주신 소스 부분은 건드리지도 않았습니다.

#4

적용 소스 내용

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type='text/javascript'>
  //<![CDATA[
    // // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('c7....4c70...88d.....ffe4b....안보이게.......f8ba1');
    // // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
    Kakao.Link.createDefaultButton({
      container: '#kakao-link-btn',
      objectType: 'feed',
      content: {
        title: '환경영상공모전',
        description: '#환경 #공모전 #영상공모 #자연환경 #자연경관 #한국자연경관보전회',
        imageUrl: 'http://gongmohe.com/img/lingk_logo2.jpg',
        link: {
          mobileWebUrl: 'http://gongmohe.com',
          webUrl: 'http://gongmohe.com'
        }
      },
      social: {
        likeCount: 5886848,
        commentCount: 44325,
        sharedCount: 8445325
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: 'http://gongmohe.com',
            webUrl: 'http://gongmohe.com'
          }
        },

      ]
    });
  //]]>
</script>

적용 버튼 내용

<a id="kakao-link-btn" href="javascript:sendLink()">카톡 전달 </a>

이렇게 작성했습니다.
다시한번 말씀드리자면요… 이렇게 시작했을때는 정상적으로 작동이 되었습니다.
문제는 자바키 재발급후 동일한 방법으로 애플리케이션을 새로 만들었는데 그때부터 안되더라구요.
그래서 계정을 다시 새로 만들어서 해도 안됩니다.
에러창이라도 뜨면 수정이라도 할텐데요… 버튼 클릭해도 반응이 없습니다.
아마도 재발급후 안된것 보면 저희쪽 부분 보다 카카오쪽 초기화가 안된듯합니다.

초기화 하는 방법으로도 해봤지만, 이것도 안됩니다.

초기화 부탁드립니다. 다시한번 애플리케이션 추가해서 하겠습니다.

감사합니다.

#5

안녕하세요.

현재 발생하고 있는 오류는 잘못된 html 마크업과 JS SDK 사용에 의한 것입니다.
JS KEY 재발급은 현재 발생하는 오류에 영향을 주지 않습니다.
(첨부 이미지의 오류를 보시면 모두 JS 오류로 모두 프론트측 오류입니다.)

1. 아직도 JS SDK가 두번 로드되고 있습니다.

이 부분이 프론트측 오류의 직접적인 원인이 되지 않지만, 오류가 발생될수도 있는 여지를 남겨두시지 마시고 하나만 로드되게 하시는게 좋을것 같습니다

2. <a id=“kakao-link-btn” …> 태그가 DOM에 로드되기전 Kakao.Link.createDefaultButton 가 먼저 호출됩니다.

Kakao.Link.createDefaultButton 호출을

  1. 본문 마지막에서 호출하시거나
  2. dom이 모두 로드된뒤 동작할수 있도록 DOMContentLoaded 이벤트가 발생된 후 실행하도록 하시는게 좋겠습니다.

예시 1) 본문 마지막에서 호출

...
    
    <script>
        Kakao.init( ... )
        Kakao.Link.createDefaultButton( ... )
    </script>
</body>
...

예시 2) DOMContentLoaded 이벤트 이후 호출 (jQuery 활용)

<script>
$(function() {
    Kakao.init( ... )
    Kakao.Link.createDefaultButton( ... )
})
</script>
3. a 태그에서 sendLink 는 제거하십시오.

프론트측에 존재하지 않는 함수를 연결하고 있습니다.

<a id="kakao-link-btn">카톡 전달 </a>

현재 발생하고 있는 오류는 애플리케이션과 JS KEY 재발급과 관련 없으며 잘못된 html 마크업과 JS SDK 사용에 의한 것입니다. 프론트측 오류가 수정 되어야만 정상동작할수 있습니다.

#6

감사합니다. 원인을 찾았습니다.

순서가 아래처럼 배치하니 됩니다.

– 상단 –
<a id=“kakao-link-btn” …> ← 요기링크부분이 상단위치에 있으면 됩니다.

– 하단 –
스크립 소스

링크 밑에 스크립트 소스가 배치가 되니 정상적으로 작동이 됩니다.
순서 문제가 있었네요.

** 그리고 상단에 답변 주신 내용에 “자바스크립 키” 노출이 되어있는데 이부분 삭제 부탁드립니다.

감사합니다.

1개의 좋아요