먼저 공유하기 버튼을 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 작성
});
연결 후 버튼을 클릭하면 아래와 같은 팝업창이 뜬다.