Frontend/JavaScript

JavaScript 웹으로 SNS 공유하기 구현 예제(트위터, 페이스북, 카카오톡)

컴슈터 2021. 3. 24. 16:49

웹에서 SNS로 콘텐츠를 공유하는 기능을 구현해야 할 때가 있다. 트위터, 페이스북, 카카오톡 같은 SNS에서는 이를 공유하는 기능을 제공하고 있다. 이 기능으로 이미지, 링크, 멀티미디어 등 다양한 콘텐츠를 공유할 수 있다. 

아이콘 추가하기

이미지 버튼으로 보여줄 아이콘 이미지를 다운로드 받는다. (트위터, 페이스북, 카카오톡의 아이콘 이미지)

icon.zip
0.00MB

CSS 추가하기

다운받은 아이콘 이미지를 적용하기 위해 아래 CSS를 추가한다. 각 이미지 버튼에 아이콘을 매핑하는 작업이다. 

.link-icon { position: relative; display: inline-block; width: auto; font-size: 14px; font-weight: 500; color: #333; margin-right: 10px; padding-top: 50px; }
.link-icon.twitter { background-image: url(./images/icon-twitter.png); background-repeat: no-repeat; }
.link-icon.facebook { background-image: url(./images/icon-facebook.png); background-repeat: no-repeat; } 
.link-icon.kakao { background-image: url(./images/icon-kakao.png); background-repeat: no-repeat; }

JavaScript 링크 추가하기

이제 구현하고자 하는 곳에 아래 소스를 붙여 넣고, 아이콘 이미지가 정상적으로 보여지는지 확인한다. 

<a id="btnTwitter" class="link-icon twitter" href="javascript:shareTwitter();" />트위터
<a id="btnFacebook" class="link-icon facebook" href="javascript:shareFacebook();" />페이스북    
<a id="btnKakao" class="link-icon kakao" href="javascript:shareKakao();" />카카오톡

JavaScript 실제 기능 구현

SNS별로 하나씩 기능을 구현할 차례이다. 트위터와 페이스북은 매우 간단히 구현할 수 있지만, 카카오톡은 절차가 살짝 번거로운 편이므로 마지막에 적어두었다.

1) 트위터에 공유하기

function shareTwitter() {
    var sendText = "개발새발"; // 전달할 텍스트
    var sendUrl = "devpad.tistory.com/"; // 전달할 URL
    window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendUrl);
}

2) 페이스북에 공유하기

function shareFacebook() {
    var sendUrl = "devpad.tistory.com/"; // 전달할 URL
    window.open("http://www.facebook.com/sharer/sharer.php?u=" + sendUrl);
}

3) 카카오톡에 공유하기

카카오톡에 공유하려면, 카카오 개발자 사이트에 회원가입 및 애플리케이션 등록 절차가 필요하다. 카카오 개발자 사이트에 접속하여 계정이 없다면 계정을 등록한 뒤, [내 애플리케이션]에서 애플리케이션을 추가하자.

그러면 아래와 같이 플랫폼별 앱 키가 발급되는데 JavaScript로 카카오 공유 기능을 구현할 것이기 때문에 이 중에서 JavaScript 앱 키만 기억해두면 된다. (참고 : 카카오, 네이버 OpenAPI 앱 키 발급받는 방법)

이제 웹 플랫폼을 등록할 것이다. [내 애플리케이션] > [플랫폼] 카테고리로 이동한 뒤 Android, iOS, Web 중에서 플랫폼 등록해야 한다. 나는 'Web'을 선택한 뒤 허용할 서비스 도메인을 입력하면 된다.

주의해야 할 점은 허용서비스가 아닌 곳에서 발급받은 API 키를 가지고 공유하는 경우 ErrorCode(4002) 에러가 발생한다. 만약 이 에러가 발생한다면 사이트도메인 등록이 안되있거나 잘못 등록되어 있다고 생각하면 된다.

웹 플랫폼 등록까지 정상적으로 마쳤다면, 이제 카카오톡 기능을 실제로 구현할 차례다. 카카오에서 제공하는 js 파일을 추가한 후,

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

아래 소스와 같이 API키를 기술하고, 공유버튼 ID와 전달할 URL 정보를 기술하면 된다. 더 자세한 활용법은 Kakao Developer 사이트에 상세하게 기술되어 있으므로 참고하면 좋을것 같다.

function shareKakao() {

  // 사용할 앱의 JavaScript 키 설정
  Kakao.init('카카오에서_발급받은_API키');

  // 카카오링크 버튼 생성
  Kakao.Link.createDefaultButton({
    container: '#btnKakao', // 카카오공유버튼ID
    objectType: 'feed',
    content: {
      title: "개발새발", // 보여질 제목
      description: "개발새발 블로그입니다", // 보여질 설명
      imageUrl: "devpad.tistory.com/", // 콘텐츠 URL
      link: {
         mobileWebUrl: "devpad.tistory.com/",
         webUrl: "devpad.tistory.com/"
      }
    }
  });
}