자바스크립트 - 카카오톡&트위터 공유하기

카카오톡 공유하기

버튼을 눌렀을 때 창을 띄워 카카오톡으로 공유하는 기능을 구현 해보았다.
우선 카카오톡 공유 기능을 이용하려면 카카오 API를 이용해야 하는데, 제일먼저 카카오 디벨로퍼에 애플리케이션 등록을 해주어야 한다.

1. 카카오 디벨로퍼 홈페이지 접속
   https://developers.kakao.com/
   
   
   

2. 우측 상단의 '내 애플리케이션' 클릭
   
   
   
   

3. 애플리케이션 추가하기 클릭
   
   
   
   

4. 애플리케이션 등록정보 입력 - 약관동의 후 저장
   앱 이름/사업자명은 원하는대로 지어주면 된다.
   
   
   
   

5. 내 애플리케이션 - 추가된 애플리케이션 클릭
   앱키들이 여러개 나오는데, 이중에서 필요한건 JavaScript 키다. 복사 해놓자
   
   
   
   

6. 코드 작성
   html 코드로 클릭시 카카오톡 공유하기 기능이 구현되도록 영역을 만들어준다.

   
   6-1. 카카오톡 공유
   

 <div class="share">
	<a class="kakaoIcon" id="kakaoShare">
    	<img src="https://ifh.cc/g/kfhxzw.png" border="0">
      	카카오톡 공유하기
   	</a>
 </div>

  <SCRIPT>
  document.getElementById("kakaoShare").addEventListener("click", shareKakao);	
  function shareKakao() {
   
  Kakao.init('복사해놓은 JavaScript 앱키');
   
  Kakao.Link.createDefaultButton({
    container: '#kakaoShare', // 카카오공유버튼ID
    objectType: 'feed',
    content: {
      title: "보여질 제목", 
      description: "보여질 간략한 설명", 
      imageUrl: "썸네일 이미지 URL", 
      link: {
         mobileWebUrl: "모바일으로 접속시 연결될 URL",
         webUrl: "웹으로 접속시 연결될 URL"
      }
    }
 });   
}
  </SCRIPT>    

6-2. 트위터 공유

<div class="shareSpace">
	<a class="shareIcon" id="twitterShareBtn">
		<img src="https://ifh.cc/g/VxDANH.png" border="0">&nbsp;&nbsp;트위터 공유하기
	</a>
</div>

document.getElementById("twitterShareBtn").addEventListener("click", shareTwitter);	
  function shareTwitter() {
    var sendText = "전달할 텍스트"; 
    var sendUrl = "전달할 URL"; 
    window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl);
}