워드프레스 SNS 공유 버튼 만들기 (카카오톡, 네이버)

  • 핀터레스트  공유하기
  • 카카오톡 공유하기
  • 네이버블로그 공유하기
  • 네이버밴드 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • URL 복사하기

워드프레스를 비롯한 웹사이트에서는 신규 발행된 콘텐츠의 확산을 도모하기 위해 소셜 네트워크 서비스(SNS)를 활용하는 것이 중요합니다. 간편하게 소셜 미디어에 콘텐츠를 공유할 수 있는 SNS 공유 버튼을 추가하게 되면 사용자들과의 상호 작용을 증진시키고 트래픽을 높일 수 있죠. 이번 글에서는 WordPress 웹사이트에 SNS 공유 버튼을 추가하는 방법을 알아보겠습니다. 아랫글을 참조해주세요


만약 워드프레스를 통한 수익형 블로그를 무료로 만들어보길 원하시면, 아래 경로로 쉽게 여러분의 워드프레스를 설치해 보세요. 3일 간 무료 체험을 통해 워드프레스의 매력을 한껏 경험해보실 수 있습니다. 클라우드웨이즈 가입시 워정공에서 드리는 다양한 혜택도 있으니 확인해보세요

SNS 공유 버튼 예시

SNS를 추가하는 방법은 크게 외부 플러그인 서비스를 활용한 방법과 스크립트를 활용한 방법이 있습니다. 이 때 플러그인을 쓰게 되면 조금 무거워지는 경향이 있어서 저는 귀찮더라도 직접 이미지파일을 티스토리나 워드프레스에 직접 올리고 스크립트를 활용하여 각 글에 공유버튼을 게시하는 방법을 선호하는 편입니다.

SNS 공유버튼
SNS 공유버튼

예시로 글의 제목 밑에 이런 식으로 SNS 공유 버튼을 달 수 있습니다. 위치는 페이지 가장 상단 혹은 하단 등 원하는 곳 어디든 원하는 곳에 넣을 수 있어요. 티스토리에서의 경우 아래의 경로를 참조해 주세요

SNS 공유버튼 추가 단계 개요

전체적인 개요를 말씀드리면 아래 순서와 같습니다.

  1. 워드프레스에 SNS 공유용 이미지파일을 업로드 하고 링크 주소를 확인합니다
  2. 애드인서터 플러그인을 통해 원하는 장소에 html 코드를 추가합니다

이렇게 하면 완성입니다. 처음에 글을 썼을 때는 디자인을 CSS에서 별도로 정의했었는데 (티스토리 링크 참조) 가끔 외부링크의 경로에 따라서 CSS가 풀리는 현상을 발견했습니다. 제목 아래 들어가는건데 엄청 크게 세로정렬로 CSS가 풀려버리더라구요. 그래서 html 안에서 한방에 디자인까지 정의하는 코드로 변경해서 헤드앤 푸터 플러그인에 넣는 방법으로 변경했습니다.

네이버나 페이스북 공유는 위의 방법으로 끝나지만, 그 외에 카카오톡과 핀터레스트는 좀 더 부가적으로 해줘야 할 것들이 있습니다.

  • 카카오톡 공유시에는 카카오 개발자 사이트에서 스크립트 키를 별도로 발급 받습니다
  • 발급받은 자바스크립트 키를 워드프레스 헤드앤 푸터 플러그인을 통해 <footer> 부분에 추가합니다.
  • 핀터레스트의 경우 본문에서 이미지를 가져오기 위한 키를 헤드앤 푸터 플러그인 <body> 부분에 추가합니다

여기서 가장 귀찮은 부분이 카카오톡 키 받는 과정, 그리고 SNS 공유를 위한 최신화된 이미지를 구하고, 업로드하고 각 이미지의 주소를 따는 일이 좀 번거롭더라구요. 아무튼 모든 과정은 무수한 시행착오를 통해 정리 완료했으니 차근차근 따라오시면 됩니다.

1. 아이콘 이미지 업로드

SNS 공유버튼
SNS 공유버튼

색깔 순서대로 배열을 해 봤습니다. 좌측부터 핀터레스트, 카카오톡, 네이버 블로그, 네이버 밴드, 페이스북, X로 서비스명이 바뀐 트위터까지 넣었는데요. 이 중에 필요없는 건 개인적으로 빼셔도 됩니다. 이런 아이콘들은 시기가 지나면 한번씩 미세하게 리뉴얼되기 때문에 좀 오래되면 다른 이미지로 교체해주시면 됩니다.

이미지 업로드
이미지 업로드

파일을 다운받은 후 워드프레스의 미디어에 업로드해주세요. 이미지 사이즈는 140×140이며 이후에 CSS에서 사이즈를 조절해서 노출하게 됩니다.

이미지 주소 확인
이미지 주소확인

그리고 각 이미지를 클릭하면 고유 URL을 확인할 수 있습니다. 따로 적어놔주세요.

2. 애드인서터로 코드 추가

자 그 다음에 이제 워드프레스에서 원하는 위치에 아이콘을 넣을 차례입니다. 애드인서터를 활용하는 방법은 아래 글을 참조해주세요. 원하는 위치에 넣을 수 있습니다.

  • 설정 – ad inserter – 코드 추가

애드인서터 코드 추가
애드인서터 코드 추가

코드는 아래의 코드에서 <img src=””본인 이미지 URL 넣어주세요” 부분에 위에서 적어둔 이미지 주소를 넣어서 변경하시면 됩니다. 원치 않는 SNS종류는 빼주시고 더 넣고 싶은 게 있다면 동일하게 항목을 복사해서 이미지 주소와 함께 넣어주시면 됩니다.


<!-- (시작) SNS 공유 -->
<div style="text-align: left; margin-top: 20px;">
  <ul style="padding: 0; margin: 0; list-style: none;">
    <!-- 핀터레스트 공유 버튼 --> 
    <li style="margin-right: 0.5; display: inline-block;">
      <a data-pin-do="buttonBookmark" data-pin-custom="true" href="https://www.pinterest.com/pin/create/button/">
        <img src="본인 이미지 URL 넣어주세요" alt="핀터레스트  공유하기" rel="nofollow" style="border-radius: 25%; width: 34px;">
      </a>
    </li>

    <!-- 카카오 공유 버튼 --> 
    <li style="margin-right: 0.5; display: inline-block;">
      <a href="#" onclick="shareKatalk();">
        <img src="본인 이미지 URL 넣어주세요" alt="카카오톡 공유하기" rel="nofollow" style="border-radius: 25%; width: 34px;">
      </a>
    </li>
  
    <!-- 네이버공유 버튼 -->  
    <li style="margin-right: 0.5; display: inline-block;">
      <a onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url='&#13;&#10;+encodeURIComponent(document.URL)+'&amp;title='+encodeURIComponent(document.title),&#13;&#10; 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" href="#" target=_blank alt="Share on Naver">
        <img src="본인 이미지 URL 넣어주세요" alt="네이버블로그 공유하기" rel="nofollow" style="border-radius: 25%; width: 34px;">
      </a>
    </li>

    <!-- 네이버 밴드 공유 버튼 -->  
    <li style="margin-right: 0.5; display: inline-block;">
      <a onclick="javascript:window.open('http://band.us/plugin/share?body='+encodeURIComponent(document.title)+encodeURIComponent('\r\n')+encodeURIComponent(document.URL)+'&amp;route='+encodeURIComponent(document.URL), 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" href="#" target=_blank alt="Share on Naver Band">
        <img src="본인 이미지 URL 넣어주세요" alt="네이버밴드 공유하기" rel="nofollow" style="border-radius: 25%; width: 34px;">
      </a>
    </li>

    <!-- 페이스북 공유 버튼 -->  
    <li style="margin-right: 0.5; display: inline-block;">
      <a onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='&#13;&#10;+encodeURIComponent(document.URL)+'&amp;t='+encodeURIComponent(document.title), 'facebooksharedialog',&#13;&#10; 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" href="#" target=_blank alt="Share on Facebook">
        <img src="본인 이미지 URL 넣어주세요" alt="페이스북 공유하기" rel="nofollow" style="border-radius: 25%; width: 34px;">
      </a>
    </li>

    <!-- 트위터 공유 버튼 -->  
    <li style="margin-right: 0.5; display: inline-block;">
      <a onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20'&#13;&#10;+encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog',&#13;&#10; 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" href="#" target=_blank alt="Share on Twitter">
        <img src="본인 이미지 URL 넣어주세요" alt="트위터 공유하기" rel="nofollow" style="border-radius: 25%; width: 34px;">
      </a>
    </li>
  </ul>
</div>
<!-- (끝) SNS 공유 -->

위 코드를 애드인서터에 원하는 곳에 추가합니다. 이때 잊지말고 각 아이콘의 이미지 주소를 본인 주소로 변경하여 넣어주시면 됩니다. 여기서 순서를 바꿔주시면 노출되는 아이콘 순서도 변합니다.

노출 페이지 결정
노출 페이지 결정

그리고 SNS공유 아이콘이 나왔으면 하는 페이지는 본인 사이트의 특성에 맞춰서 선택합니다. 노출 위치는 참고로 비포컨텐츠 아니면 비포 포스트, 혹은 애프터 컨텐츠나 포스트 등으로 하게 되는데요. 변경시 세이브하면서 노출 위치를 보고 결정하시면 됩니다.

3. 아이콘 정렬 및 디자인 설정

참고로 위 코드에서 본인의 사이트에 따라 변경할 사항을 알려드립니다.

  • margin-top: 20px; 제목 아래에 위치할 경우 위쪽으로 제목과 20px만 떨어지게 지정을 한거죠. 숫자를 변경해가면서 거리를 지정해주시면 됩니다.
  • style=”border-radius: 25%; width: 34px;”
    • width: 35px; 지금 아이콘들은 원본이 가로 세로 140px 입니다. 이걸 노출하고 싶은 크기로 설정하는거에요
    • border-radius: 25%; 아이콘의 네 귀퉁이를 둥글게 하는 정도입니다. 변경해가면서 지정해보세요

그럼 잘 들어갔는지 확인해볼까요?

공유버튼 확인
공유버튼 노출 확인

자 이제 공유버튼은 잘 노출이되는 것까진 확인을 했습니다. 하지만 여기까지 저장을 하고 나면 작동을 하는 버튼도 있습니다. 하지만 핀터레스트와 카카오톡은 아직 제대로 작동을 안할거에요. 위에서 설명드렸듯 추가적인 작업이 필요합니다. 자 거의 다 왔으니 조금만 더 힘내주세요

카카오 개발자 키 발급

카카오는 공유시 개인 개정으로 로그인이 되어야 하는 과정에서 자바스크립트를 별도로 받아주는 작업을 한 번 거쳐야 합니다. 먼저 아래 사이트로 들어가주세요

카카오 로그인
카카오 로그인

우상단에 보면 로그인이 있습니다. 본인 카카오 계정으로 로그인합니다.

애플리케이션 추가

내 애플리케이션
내 애플리케이션
우상단에 있는 내 애플리케이션으로 들어가서 중간에 보이는 애플리케이션 추가하기 버튼을 눌러줍니다.
애플리케이션 추가하기
애플리케이션 추가하기
  • 앱아이콘 : 필요없습니다
  • 앱이름 : 본인 사이트 이름
  • 사업자명 : 이름
  • 카테고리 : 적당하게 > 서비스 이용 체크 후 저장버튼
자바스크립트 키
자바스크립트 키 복사

그러면 네가지 앱키가 나오게 됩니다. 이 중에 JavaScript 키를 복사합니다.

플랫폼 등록

플랫폼 등록
플랫폼 등록
  • 좌측 메뉴의 내 애플리케이션 > 앱설정 > 플랫폼으로 들어갑니다.
Web 플랫폼 등록
Web 플랫폼 등록
  • 가장 하단에 있는 Web 플랫폼 등록으로 들어갑니다.
사이트 도메인 등록
사이트 도메인 등록
  • 공유버튼을 추가하고 싶은 사이트 도메인 등록 (여러개 하셔도 됩니다)
  • 하단의 저장버튼을 눌러줍니다.
등록완료 화면
등록완료 화면

발급받은 카카오 키 등록

이제 위에서 발급받은 자바스크립트 키를 워드프레스 푸터에 넣어줍니다. 헤드앤 푸터 플러그인을 이용하시면 됩니다. 플러그인 설치가 안되신 분들은 하단의 글을 참조해주세요

플러그인 사용
Head & Footer Code
  • 도구 – Head & Footer Code 로 들어가 주세요

그리고 하단의 코드를 Footer Code 에 입력해주세요

<!-- (시작) 카카오톡 공유 -->
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<!-- 카카오톡 공유 JavaScript -->
<script>
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('이곳에 복사한 키를 복사합니다');
function shareKatalk() {
<!-- 카카오 Link 공유 API 사용-->
Kakao.Link.sendScrap({
requestUrl: location.href
});
};
</script>
<!-- (시작) 카카오톡 공유 -->

중간에 ‘이곳에 복사한 키를 복사합니다’ 라고 있는 부분의 ‘ ‘ (따옴표) 사이에 키를 복사하면 됩니다. 변경사항 저장을 눌러줍니다.

참고로 주석을 다는 방법은 아랫글을 참조해주세요

여기까지 하면 카카오톡 공유는 완료됩니다. 작동이 잘 되는지 한 번 보겠습니다.

카카오톡 공유
카카오톡 공유

성공적으로 공유되네요

핀터레스트 연동 키 넣기

핀터레스트는 나중에 핀을 눌러 공유할 때 본문에 있는 이미지를 선택하는 과정이 있습니다. 그래서 헤드 앤 푸터 코드에서 Body Code 에 한 줄을 추가해서 넣어야 합니다.

  • 도구 – Head & Footer Code 로 들어가 주세요

그리고 하단의 코드를 Body Code 에 하단 코드 입력해주세요

<!-- (시작) 핀터레스트 공유 -->
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<!-- (끝) 핀터레스트 공유 -->

복사해서 넣은 후 변경사항 저장을 눌러줍니다. 그리고 작동이 잘 되는지 한 번 보겠습니다.

핀터레스트 테스트
핀터레스트 테스트

마무리

이렇게 SNS공유 버튼을 깔끔하게 넣고 테스트까지 마무리 했습니다. 또 몇 년 지나면 아이콘이 새롭게 변하게 될 거에요. 그리고 지원되는 코드가 변하기도 합니다. 예를 들어 최근에는 카카오 스토리 공유버튼이 본사 정책으로 막히기도 했었죠. 그렇게 되면 바뀐 코드를 찾아서 변경하고, 이미지도 바꿔서 연동하게 되면 계속 사용하실 수 있습니다.

관련글

‘워드프레스 정보공유’ 사이트 본문 중 제휴링크를 통해 수수료를 제공받을 수 있습니다