[javascript] 카카오톡 공유하기 - 카카오 링크 / 요청실패시

카카오톡 공유하기 기능은 많은 개발자들이 사용하는 기능이다.

실제로 업무에서도 많이 사용하는 기능으로 매번 개발할때마다 같은 실수를 하는 경우가 빈번하기에

스스로 기억하고자 기록해보려고 한다. 

아래 예제는 우리 부부가 결혼 준비당시 모바일 청첩장을 만들면서 사용한 예제이다. 

 

 

 

 

 

앱키 확인하기 

---

카카오 개발자 센터에서 애플리케이션을 만든 후 

내 애플리케이션 > 앱설정 > 요약정보 탭에서 javascript키를 통해 확인 가능하다. 

 

 

카카오톡으로 공유하기

---

javascript로 카카오톡 공유하기를 구현한 간단한 예제이다.

내가 구현한 방식은 createDefaultButton 함수를 활용하여 구현하였으며, 카카오 개발자 사이트에서 더 다양한 케이스를 확인 할 수 있다. 

 

우선 javascript 함수를 구현하기에 앞서

어떤 버튼을 누르면 공유하기가 실행될지 html에 영역을 지정해주어야 한다. 

 

HTML

<div class="kakao-link">
  <a id="kakao-link-btn" href="javascript:;">
  카카오톡으로 공유하기
  </a>
</div>

 

JAVASCRIPT

parameter는 아래와같이 구성된다. 

option 값	설명	value
container	위의 html에서 만들어준 버튼의 선택자
objectType		feed / list / location / commerce / text
content	json 형태로 구성
ㄴtitle	피드에 노출될 제목
ㄴdescription	제목 아랫줄에 표시될 내용
ㄴimageUrl	메인이미지
ㄴlink	클릭시 이동될 url ( mobile / pc 여부 )
buttons	json 형태로 구성
ㄴtitle	버튼 타이틀
ㄴlink	버튼 클릭시 이동될 url

$(document).ready(function(){

	// 카카오톡 링크 생성
	kakaoLink()
    
    let kakaoLink = function () {
    
    	// 사용할 앱의 JavaScript 키를 설정해 주세요.
      Kakao.init({#카카오 developer 사이트에서 발급받은 JavaScript 키});
      // 카카오링크 버튼을 생성합니다. 처음 한번만 호출하면 됩니다.
      Kakao.Link.createDefaultButton({
          container: '#kakao-link-btn',
          objectType: 'feed',
          content: {
              title: '타이틀입니다',
              description: '아래쪽에 노출될 내용',
              imageUrl: 'http://eomcheon.com/images/main.jpg',
              link: {
                  mobileWebUrl: 'http://eomcheon.com/index.php',
                  webUrl: 'http://eomcheon.com/index.php'
              }
          },
          buttons: [
              {
                  title: '청첩장 보기',
                  link: {
                      mobileWebUrl: 'http://eomcheon.com/index.php',
                      webUrl: 'http://eomcheon.com/index.php'
                  }
              },
              {
                  title: '위치 보기',
                  link: {
                      mobileWebUrl: kakaoMapUrl,
                      webUrl: kakaoMapUrl
                  }
              }
          ]
      });
    }
    
});

 

 

 

카카오 공유하기 클릭시 요청실패

---

카카오 공유하기 버튼 클릭시 아래와같이 요청 실패 팝업창이 뜬다면 웹 url 설정이 되어있지 않은 것이므로 이를 설정해주면 될것이다. 

 

 

플랫폼 등록

---

내 애플리케이션 > 앱설정 > 플랫폼 페이지를 진입하여 Web플랫폼 등록 버튼을 눌러 공유하기 시도를 하려는 사이트 url을 정확하게 입력해야 공유하기가 가능하다.

로컬에서 테스트시 http://localhost:8080 과 같이 포트도 정확하게 입력해야하므로 주의하기 바란다.

 

 

디테일한 가이드는 아래 링크를 통해 확인 가능하다. 

Kakao Developers