[JavaScript] 웹페이지 공유하기 (카카오 API, 클립보드)

현재 보고 있는 페이지를 클립보드와 카카오 API를 사용해서 공유하는 방법을 적용해보도록 하겠습니다.

1. 카카오 Developer 설정

1-1. 카카오 개발자 사이트 가입하기

- 카카오톡에 공유하기 위해서 카카오 API(카카오링크)를 사용하도록 하겠습니다.

- 카카오 개발자사이트를 접속하여 가입을 진행합니다.

1-2. 어플리케이션 생성

- 자세한 정보는 카카오 개발자사이트를 참고하셔도 됩니다.
- 가입이 완료되었다면, 우측 상단에 [내 어플리케이션]을 클릭합니다.

- [어플리케이션 추가하기]를 클릭하여, 정보를 입력하여 생성합니다.

- 정상적으로 생성이 되었다면, 해당 애플리케이션을 클릭하여, 앱 키를 확인합니다.

참고!!!
앱키는 각 애플리케이션의 고유 값이므로, 잘 보관하도록 합니다.

1-3. 플랫폼 추가하기

- 카카오 API를 사용하기 위해서 도메인을 추가합니다.

- 해당 글에서는 웹페이지를 사용하기 때문에, [Web] 플랫폼을 추가하도록 하겠습니다.
ex) http://localhost:8080 , https://jaewon-study.com

1-4. 소스 코드 작성

- JAVASCRIPT_KEY 에는 애플리케이션을 생성하고 할당받은 앱 키 중 JavaScript 키를 입력합니다.

- kakao.isInitialized() 는 카카오 스크립트가 정상적으로 호출되었는지 확인합니다.(true: 성공 / false : 실패)

- objectType은 총 4가지 방식이 있으므로 공식 사이트를 참고하여 원하는 방식으로 사용하면 됩니다.

<body>
    <a id="kakao-link-btn" href="javascript:kakaoShare()">
    	<img src="https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png" />
    </a>
</body>

<!-- kakao sdk 호출 -->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

<script type="text/javascript">
  // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
  Kakao.init('JAVASCRIPT_KEY');

  // SDK 초기화 여부를 판단합니다.
  console.log(Kakao.isInitialized());

  function kakaoShare() {
    Kakao.Link.sendDefault({
      objectType: 'feed',
      content: {
        title: '카카오공유하기 시 타이틀',
        description: '카카오공유하기 시 설명',
        imageUrl: '카카오공유하기 시 썸네일 이미지 경로',
        link: {
          mobileWebUrl: '카카오공유하기 시 클릭 후 이동 경로',
          webUrl: '카카오공유하기 시 클릭 후 이동 경로',
        },
      },
      buttons: [
        {
          title: '웹으로 보기',
          link: {
            mobileWebUrl: '카카오공유하기 시 클릭 후 이동 경로',
            webUrl: '카카오공유하기 시 클릭 후 이동 경로',
          },
        },
      ],
      // 카카오톡 미설치 시 카카오톡 설치 경로이동
      installTalk: true,
    })
  }
</script>

- 카카오톡 공유하기 시 다음과 같습니다.

2. 클립보드 적용하기

2-1. 클립보드 사용하기

- 시스템 함수를 사용하여 클립보드에 복사하여 공유를 해보도록 하겠습니다.

- 방법은 간단합니다.

새로운 element를 생성한다.
해당 element에 복사하고자 하는 value를 저장시킨다.
해당 element는 화면에서는 안 보이도록 위치시킨다.
해당 element의 value를 시스템 함수를 호출하여 복사한다.
해당 element를 삭제한다.

2-2. 소스 코드 작성

클립보드 복사하기 기능 추가

<body>
    <a id="clip-btn" href="javascript:clipboardShare()">
    	<img src="이미지 경로" />
    </a>
</body>

<script type="text/javascript">
	//  클립보드 복사하기
	function clipboardShare() {
    	    // 1. 새로운 element 생성
    	    var tmpTextarea = document.createElement('textarea');
            
            // 2. 해당 element에 복사하고자 하는 value 저장
            tmpTextarea.value = "복사하고픈 value";
            
            // 3. 해당 element를 화면에 안보이는 곳에 위치
            tmpTextarea.setAttribute('readonly', '');
            tmpTextarea.style.position = 'absolute';
            tmpTextarea.style.left = '-9999px';
            document.body.appendChild(tmpTextarea);
            
            // 4. 해당 element의 value를 시스템 함수를 호출하여 복사
            tmpTextarea.select();
            tmpTextarea.setSelectionRange(0, 9999);  // 셀렉트 범위 설정
            var successChk = document.execCommand('copy');
            
            // 5. 해당 element 삭제
            document.body.removeChild(tmpTextarea);
            
            // 클립보드 성공여부 확인
            if(!successChk){
            	alert("클립보드 복사에 실패하였습니다.");
            } else {
            	alert("클립보드에 복사가 완료되었습니다.");
            }
       }
</script>

참고

- https://developers.kakao.com/docs/latest/ko/getting-started/sdk-js
- https://developers.kakao.com/docs/latest/ko/message/js

- https://developers.kakao.com/sdk/reference/js/release/Kakao.html

'FrontEnd > JavaScript' 카테고리의 다른 글

[JavaScript] if문으로 undefined, null 체크하기 (0)	2022.06.06
[JavaScript] 동적 Element 생성 시 함수 인자에 따옴표 추가하기(따옴표 안에 따옴표) (0)	2021.08.14