티스토리 SNS 공유 버튼 만들기 (카카오톡, 네이버)

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

SNS 공유 버튼 예시

사실 티스토리에는 글 하단에 공감버튼 옆에 카카오톡, 페이스북, 엑스(트위터)에 공유할 수 있는 기능이 있습니다. 그리고 모바일에서도 기본적으로 SNS로 공유할 수 있는 버튼이 있죠. 지금 알려드리는 방법은 좀 더 시각적으로 쉽게 공유할 수 있도록 공유하는 기능입니다. 꼭 필요한 건 아니에요.

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

이런 형태로 글의 제목 밑에 SNS 공유 버튼을 달 수 있습니다. 위치는 페이지 가장 상단 혹은 하단 등 원하는 곳 어디든 원하는 곳에 넣을 수 있어요. 참고로 워드프레스에서 공유버튼 넣는 방법은 아래의 경로를 참조해 주세요

SNS 공유버튼 추가 단계 개요

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

1. 티스토리에 SNS 공유용 이미지파일을 업로드 하고 링크 주소를 확인합니다
2. 스킨편집에서 원하는 장소에 html 코드를 추가합니다
3. CSS에서 디자인을 일괄적으로 정의합니다.

이렇게 하면 완성입니다. 디자인을 CSS에서 별도로 정의하는 이유는 경험상 훨씬 깔끔하고 관리가 편리하기 때문입니다. 그냥 html 코드에서 페이지 상 위치 및 모양, 크기, 주위 간격까지 다 지정해서 한 번에 넣을 수도 있습니다. 만약 CSS에서 디자인을 정의하는 방식이 아닌 html로 한방에 넣고 싶은 분은 아랫글의 코드를 참조해주세요

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

• 카카오톡 공유시에는 카카오 개발자 사이트에서 스크립트 키를 별도로 발급 받습니다
• 발급받은 자바스크립트 키를 스킨편집 </body> 앞부분에 추가합니다.
• 핀터레스트 키를 스킨편집 </body> 앞부분에 추가합니다

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

스킨편집 경로 안내

그리고 앞으로 나올 파일 업로드 및 html수정, css 수정은 모두 동일한 경로에서 진행되니 먼저 설명을 드리도록 하겠습니다.

• 관리자창 – 꾸미기 – 스킨편집 – html 편집으로 들어가면 3개의 메뉴가 보입니다.

이렇게 총 세가지의 메뉴가 있습니다. HTML / CSS / 파일업로드가 있는데요, 앞으로 이 세가지에서 모두 설명을 드릴예정입니다.

1. 아이콘 이미지 업로드

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

파일을 다운받은 후 위에서 설명드린 파일업로드에 모두 업로드해주세요. 이미지 사이즈는 140×140이며 이후에 CSS에서 노출되는 크기는 설정할 수 있습니다.

• 파일 업로드 경로 : 스킨편집 – html편집 – 파일업로드 – 추가버튼

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

2. 스킨편집 – HTML에 코드 추가

자 그 다음에 이제 html 편집에서 원하는 위치에 아이콘을 넣을 차례입니다.

• 관리자 창 – 꾸미기 – 스킨편집 – html 편집 – HTML 로 들어갑니다

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

<!-- (시작) SNS 공유 -->
<div class="sns">
  <ul>
<!-- 핀터레스트 공유 버튼 --> 
<li>
<a data-pin-do="buttonBookmark" data-pin-custom="true" href="https://www.pinterest.com/pin/create/button/"><img src="이미지 주소 넣어주세요" alt="핀터레스트  공유하기" rel="nofollow"></a>
</li>

<!-- 카카오 공유 버튼 --> 
<li>
<a href="#" onclick="shareKatalk();"><img src="이미지 주소 넣어주세요" alt="카카오톡 공유하기" rel="nofollow"></a>
</li>
  
<!-- 네이버공유 버튼 -->  
<li>
<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="이미지 주소 넣어주세요" alt="네이버블로그 공유하기" rel="nofollow"></A>
</li>

<!-- 네이버 밴드 공유 버튼 -->  
<li>
<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="이미지 주소 넣어주세요" alt="네이버밴드 공유하기" rel="nofollow"></A>
</li>

<!-- 페이스북 공유 버튼 -->  
<li>
<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="이미지 주소 넣어주세요" alt="페이스북 공유하기" rel="nofollow"></A>
</li>

<!-- 트위터 공유 버튼 -->  
<li>
<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="이미지 주소 넣어주세요" alt="트위터 공유하기" rel="nofollow"></A>
</li>
</ul>
</div>
<!-- (끝) SNS 공유 -->

참고로 가장 위에 보이는 <div class=”sns”>는 이 코드의 그룹명을 지어준다는 의미입니다. 나중에 CSS에서 이 이름을 불러와서 한번에 디자인을 반영할거에요. sns 대신 ‘sns-icons’ 처럼 본인이 이름을 따로 지어줘도 됩니다. 자기가 넣은 그대로 CSS적을 때 적어주기만 하면 되요.

그럼 이제 위 html 코드를 원하는 곳에 추가하게 됩니다. 일단 넣는 위치는 스킨에 따라 다 다르고 원하는 위치에 따라 다릅니다. 지금 모든 기준은 #1스킨 기준으로 설명드리니 다른 스킨에서는 원하는 곳을 비교해보시면서 적용해보시기 바랍니다. 우선 제목 하단, 본문 위에 SNS공유 버튼을 넣는다고 가정하겠습니다.

지난 글에서 티스토리 스킨에서 타이틀 코드로 h1 태그를 하나만 남기고 다 수정했기 때문에 아마 ctrl+F 를 누르고 h1을 눌러보시면 찾기 쉬우실 거에요. 바로 그 아래에 붙여넣으시면 됩니다. 보통 티스토리에서는 [##_article_rep_desc_##] 라는 치환자로 본문이 나오기 때문에, 그 단어로 검색해서 바로 위에 붙여넣으시면 됩니다. 위의 빨간 공란 박스 위치입니다. 다른 위치에 넣고 싶으시면 코드를 다른 위치에 넣어가면서 테스트해보세요.

h태그 변경에 대한 내용은 아래 링크를 참조해주세요.

참고로 이 상태에서는 아이콘이 140×140 사이즈로 크기도 안맞고, 가로 정렬도 안 된 상태로 엉망으로 들어가는 것처럼 보입니다. 하지만 다음 단계에서 크기 및 가로정렬, 간격조정 등을 한 번에 하니까 일단 코드만 넣고 저장해주시면 됩니다.

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

자 그럼 이제 이 아이콘들의 위치와 크기, 나란하게 정렬하는 작업을 해보겠습니다.

• 꾸미기 – 스킨편집 – HTML편집 – CSS 로 들어갑니다.

이곳에 아래의 코드를 넣습니다.

/* SNS 공유 */
.sns ul {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0;
  overflow: hidden;
}

.sns li {
  float: left;
  padding-right: 3.5px;
}

.sns img {
    border-radius: 35%;
    width: 35px;
    height: 35px;
}

위 사진처럼 CSS의 기존에 있는 코드 가장 하단에 아래의 코드를 넣어주세요.

여기서 아까 지정한 <div class=”sns”> 의 “sns” 가 이곳의 코드와 일치해야 합니다.

.sns ul { 이렇게 쓰인 곳 보이시죠? 총 세군데가 있습니다. 그냥 복사해서 붙여넣으셔도 됩니다.

• margin: 0 0 0 0; – 여기서 margin 속성은 여백을 지정하는데 사용됩니다. 네가지 숫자가 순서대로 상, 우, 하, 좌측 과의 여백 값을 설정할 수 있습니다. 이 숫자를 바꿔보시면서 다른 그룹과의 사이를 조정해 보시면 됩니다.
• float: left; – 전체적으로 좌측정렬을 한겁니다. 가운데에 두고 싶으면 center, 우측정렬하고 싶으면 right로 놓으시면 됩니다.
• width: 35px; – 지금 아이콘들은 원본이 가로 세로 140px 입니다. 이걸 노출하고 싶은 크기로 설정하는거에요
• border-radius: 25%; – 아이콘의 네 귀퉁이를 둥글게 하는 정도입니다. 변경해가면서 지정해보세요

※ 위에서 설명드린대로 CSS를 이렇게 분리할 수도 있지만 HTML코드 안에서 한방에 해결하고 싶은 분들은 이 코드를 참조해주세요. 워드프레스는 글 쓴 이후 모바일에서 깨지는 현상이 발견되서 하나의 코드로 만들었지만 티스토리는 잘 나오고 있습니다.

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

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

카카오 개발자 키 발급

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

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

애플리케이션 추가

• 앱아이콘 : 필요없습니다
• 앱이름 : 본인 사이트 이름
• 사업자명 : 이름
• 카테고리 : 적당하게 > 서비스 이용 체크 후 저장버튼

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

플랫폼 등록

• 좌측 메뉴의 내 애플리케이션 > 앱설정 > 플랫폼으로 들어갑니다.

• 가장 하단에 있는 Web 플랫폼 등록으로 들어갑니다.

• 공유버튼을 추가하고 싶은 사이트 도메인 등록 (여러개 하셔도 됩니다)
• 하단의 저장버튼을 눌러줍니다.

발급받은 카카오 키 등록

이제 위에서 발급받은 자바스크립트 키를 티스토리 스킨편집- HTML 에서 </body> 바로 앞에 넣어줘야 합니다.

• 관리자창- 꾸미기 – 스킨편집 – HTML

그리고 하단의 코드를 </body> 앞쪽 에 하단 코드 입력해주세요.

<!-- (시작) 카카오톡 공유 -->
<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>
<!-- (시작) 카카오톡 공유 -->

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

지난번에 자동목차 넣었던 코드가 보이네요

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

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

성공적으로 공유되네요

핀터레스트 연동 키 넣기

핀터레스트는 나중에 핀을 눌러 공유할 때 본문에 있는 이미지를 선택하는 과정이 있습니다. 그래서 스킨편집 방금 카카오톡 넣은 바로 위쪽에 아래의 코드 한 줄을 추가해서 넣어야 합니다.

• 관리자창- 꾸미기 – 스킨편집 – HTML – </body> 위쪽

그리고 하단의 코드를 위 경로에 입력해주세요

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

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

마무리

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

관련글