SNS 공유하기

먼저 공유하기 버튼을 html, css로 만든다.
아이콘을 만들던 버튼으로 만들던 상관없다.

<!-- 공유하기 버튼 -->
<button type="button" id="shareTw" class="btn_comm">트위터로 공유하기</button>
<button type="button" id="shareFb" class="btn_comm">페이스북으로 공유하기</button>
<button type="button" id="shareKt" class="btn_comm">카카오톡으로 공유하기</button>
<button type="button" id="shareKs" class="btn_comm">카카오스토리로 공유하기</button>

트위터로 공유하기

아래 내용을 클릭이벤트에 연결해주면 된다.

const btnShareTw = document.querySelector('#shareTw');

btnShareTw.addEventListener('click', () => {
  const sendText = '철도로 1시간 이내면 닿는다.. 덩치 키우는 서울';
  const pageUrl = 'news.v.daum.net/v/20220319120213003';
  window.open(`https://twitter.com/intent/tweet?text=${sendText}&url=${pageUrl}`);
})

페이스북으로 공유하기

페이스북은 공유할 url만 정해주면 된다.

const btnShareFb = document.querySelector('#shareFb');

btnShareFb.addEventListener('click', () => {
  const pageUrl = 'news.v.daum.net/v/20220319120213003';
  window.open(`http://www.facebook.com/sharer/sharer.php?u=${pageUrl}`);
})

카카오스토리로 공유하기

의외로 간단하다.
카카오 디벨로퍼(https://developers.kakao.com/)에 가서 카카오 계정으로 개발자 계정으로 가입한 뒤 [내 애플리케이션] 메뉴 > 애플리케이션 추가(앱 이름과, 사업자 명은 대충 써줘도 된다) > 만든 앱을 클릭하면 아래와 같이 앱 키를 확인할 수 있다.

화면에서 자바스크립트 앱 키를 확인할 수 있는데, 이것은 기능 구현시 사용자 식별하기 위한 용도로 쓰인다.

그리고 플랫폼을 등록할 수 있는데, web에서 사용할 것이기 때문에 Web 플랫폼 등록 버튼을 누르고, 내가 사용할 도메인 주소를 등록해주면 된다.

개발하면서 확인도 해야하기 때문에 http://localhost:8080 과 같은 로컬호스트 주소도 넣을 수 있다.

도메인 등록을 하는 이유는 발급 받은 앱 키를 내가 지정한 도메인에서만 사용할 수 있게 제한하기 위해서다.

이런 발급 받은 앱 키는 코드상에 그대로 드러나기 때문에 개발자 도구를 까보면 누구나 볼 수 있게 공개되어 있다.

플랫폼 제한이 없다면 다른 사람이 내 앱 키를 가져가서 자기 사이트에 쓸 수도 있는데, 이걸 막을 수 있게 플랫폼 등록을 하는 것이다.

환경 변수로 처리하거나 서버리스함수로 처리하는 방법도 있겠지만 카카오에서 제공해주는 api 앱키는 플랫폼 제한 기능을 제공해주기 떄문에 제공해주는 기능을 사용하면 편하다.

구현하기

먼저 카카오에서 제공하는 js를 html에 추가한다.

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

아까 발급받은 JavaScript 키로 아래와 같이 초기화하여 사용한다.

- 클릭 이벤트 없이 사용하는 방법

이 방법을 사용하면 container에 지정한 요소 안에 a링크로 카카오스토리 아이콘이 자동 생성된다.

// 사용할 앱의 JavaScript 키 설정
Kakao.init('발급받은 JavaScript 키');

Kakao.Story.createShareButton({
  container: '#shareKs',
  url: 'https://www.daum.net',
  text: '카카오스토리로 공유 합니다.'
});

- 클릭 이벤트를 지정해서 사용하는 방법

// 사용할 앱의 JavaScript 키 설정
Kakao.init('발급받은 JavaScript 키');

const btnShareKs = document.querySelector('#shareKs');

btnShareKs.addEventListener('click', () => {
  Kakao.Story.share({
    url: 'www.daum.net',
    text: '카카오스토리로 공유 합니다.'
  });
})

• 레퍼런스는 상단 메뉴에서 문서 > 카카오 스토리 > javascript > 공유 버튼 추가하기로 가면 코드를 볼 수 있다.
• container에 버튼 요소를 지정해 주고, 공유할 주소(url)과 공유시 작성할 문구(text)[선택사항]를 넣어주면된다.
• 참고용 페이지도 확인할 수 있다.

결과

연결 후 버튼을 클릭하면 아래와 같은 팝업창이 뜬다.

카카오톡으로 공유하기

위에 카카오스토리 부분에서 설명한것과 거의 동일하다.
다른 것은 템플릿 빌더 미리보기를 통하여 미리보기 하면서 좀 더 쉽게 구성해줄 수 있다는 것이다.
물론 미리보기 없이 다른 방법도 제공해준다.
아래 설명은 레퍼런스 페이지에서 사용자 정의 템플릿으로 메시지 보내기 부분을 참고한 것이다.

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

빌더를 사용해서 미리보기 하면서 만들 수 있는 편한 방법이 있다.

내 애플리케이션 > 내가 생성한앱 이름 클릭 > 좌측 메뉴의 메시지 > 메시지 템플릿 빌더 바로가기 > 좌측에 +템플릿 만들기 > 원하는 용도에 맞게 선택하여 확인.

템플릿을 다 만든 후 나의 앱 ID를 아래 templateId에 적는다. 만약 12345 라면 아래와 같이 넣어준다.

// 사용할 앱의 JavaScript 키 설정
Kakao.init('발급받은 JavaScript 키');

Kakao.Link.createCustomButton({
  container: '#shareKt',
  templateId: 12345, // 나의 앱 ID 작성
});

결과

연결 후 버튼을 클릭하면 아래와 같은 팝업창이 뜬다.