[Java] 게시글 공유하기 기능 (페이스북, 카카오톡, 트위터)

1. 카카오 개발자 센터에서 로그인을 한 뒤 앱 생성까지 완료한 상태로 진행

https://developers.kakao.com/docs/latest/ko/message/js-link

JavaScript 키 사용할 예정

2. 카카오에서 제공하는 js파일을 추가

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

 

3. 게시글에 버튼 만들기

<div class="btn-group dropup" style="float: right;">
	<button type="button" class="btn btn-Light dropdown-toggle"
		data-toggle="dropdown" style="border: 1px solid black;">📤</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" id="btnFacebook"href="javascript:shareFacebook();">페이스북으로 공유</a> 
		<a class="dropdown-item" id="btnKakao" href="javascript:shareKakao(${board.id});">카카오톡으로 공유</a> 
		<a class="dropdown-item" id="btnTwitter" href="javascript:shareTwitter();">트위터로 공유</a> 
		<a class="dropdown-item" href="#">URL 복사</a> 
	</div>
</div> 

 

4. 버튼에 링크와 id 추가하기

<a class="dropdown-item" id="btnKakao" href="javascript:shareKakao(${board.id});">카카오톡으로 공유</a>


<script src="/js/share.js"></script>

 

5. 자바스크립트 구현

- share.js

function shareKakao(id) {
 
  // 사용할 앱의 JavaScript 키 설정
  Kakao.init('카카오의 JavaScript 키 사용');
 
  // 카카오링크 버튼 생성
  Kakao.Link.createDefaultButton({
    container: '#btnKakao', // 카카오공유버튼ID 
    objectType: 'feed',
    content: {
      title: "미니 블로그", // 보여질 제목
      description: "미니 블로그입니다", // 보여질 설명
      imageUrl: `/board/${id}`, // 콘텐츠 URL
      link: {
         mobileWebUrl: `http://localhost:8000/board/${id}`,
         webUrl: `http://localhost:8000/board/${id}`
      }
    }
  });
}


function shareTwitter() {
    var sendText = "미니블로그"; // 전달할 텍스트
    var sendUrl = `http://localhost:8000/board/${id}`; // 전달할 URL
    window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl);
}


function shareFacebook() {
    var sendUrl = `http://localhost:8000/board/${id}`; // 전달할 URL
    window.open("http://www.facebook.com/sharer/sharer.php?u=" + sendUrl);
}

 

6. 결과 : 카카오톡으로 공유를 누르면 공유창이 나오고 정상적으로 카카오톡으로 전달된걸 확인할 수 있다.

 

- 페이스북과 트위터는 간단한 반면에 카카오톡리 조금 복잡합니다 참고하세요!

- 개발새발님의 블로그에 깔끔하게 정리가 되어있어서 참조하시면 좋습니다!

---

참조 : https://devpad.tistory.com/53

[JavaScript] 웹으로 SNS 공유하기(트위터, 페이스북, 카카오톡)