티스토리 블로그 SNS 공유 버튼 만들어 적용하는 방법

티스토리는 기본적으로 '글 보내기' SNS 공유 플러그인을 제공하고 있어서 쉽게 포스트 하단에 페이스북, 트위터, 카카오스토리 공유 버튼을 달수 있습니다.

SNS로 공유되는 정보가 상당한 만큼 내 블로그의 글이 SNS로 공유된다면 방문자 유입에도 효과를 보는 것은 당연한 얘기일 것입니다.

하지만 플러그인으로 제공하는 공유 버튼은 아이콘이 작고 종류 또한 3가지로 제한적이여서 네이버 블로그나 구글 플러스등의 공유 버튼을 달고 싶다면 직접 스킨에 코드를 추가해서 포스트 하단에 SNS 공유 버튼을 달수 있습니다.

현재 IT라운지에서 포스트 하단에 있는 '이 포스트 공유하기' 와 똑같은 모양의 코드 이므로 자신의 스타일에 맞게 수정해서 사용하면 더욱 좋습니다.

IT라운지에서 사용하는 스킨은 CMSFactory에서 구입해서 사용하고 있는데 CMSFactory 사이트의 본문 아래 공유 버튼과 유사하게 디자인했고 소스 코드 또한 여기에서 참조 했습니다. 네이버 밴드 같은 경우 API를 제공하고 있는데 아이콘을 커스텀 할수 없어 직접 쿼리문을 뽑아 작업했습니다.

스타일시트에 대한 이해도가 낮은 초보자도 있기 때문에 스킨에 CSS 코드를 추가하는 것 보다 쉽게 적용 및 수정을 할수 있도록 각 태그 내에 style을 입혔습니다.

티스토리 스킨 HTML 파일을 편집하기 전 아래 이미지 압축 파일을 풀어 스킨에 업로드 합니다. 그리고 첨부된 텍스트 파일에 아래 소스 코드가 모두 첨부되어 있으니 (주석 포함) 필요한 부분만 사용하면 되겠습니다.

SNS 버튼 이미지 압축 파일 sns_icon.7z

SNS 공유 소스 파일  tistory_sns_button.txt


티스토리 블로그 SNS 공유 버튼 만들어 적용하는 방법

티스토리 관리자 메뉴의 꾸미기 > HTML/CSS 편집을 클릭해 스킨을 열어 HTML 편집창에 키보드 CTRL+F 를 누른 다음 [##_article_rep_desc_##] 치환자 구문을 찾아 그 아래에 공유 버튼의 큰 테두리가 되는 코드를 삽입합니다.

만일 모든 SNS 서비스의 공유 버튼을 사용하고 싶다면 텍스트 파일을 전부 복사한 다음 붙여넣기 하면 끝입니다.

<div style="width:100%; border: 1px solid #cccccc; margin: 50px 0; text-align:center;">
<div style="width: 100%; border-bottom: 1px solid #cccccc; text-align:center;">
<h4>이 포스트 공유하기</h4>
</div>
<div style="width: 100%; margin: 20px 0px; text-align: center;">

<!-- 이 안에 원하는 SNS 공유 버튼 코드 삽입 -->

</div>
</div>

위 코드를 삽입한 다음 넣고 싶은 SNS 서비스 공유 버튼 소스를 <!-- 이 안에 원하는...... --> 주석 처리된 부분 아래 부터 복사해서 넣으면 필요한 SNS 공유 버튼만 달수 있습니다.

모두 적용한 공유 버튼들 입니다. 글 맨 아래에서도 확인할 수 있지만 스크롤을 내리는 번거로움을 피하기 위해 이미지로 보여 드립니다. ^^;


페이스북

<div style="width: 46px; text-align: center; display: inline-block;">
<div>
<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='
+encodeURIComponent(document.URL)+'&amp;t='+encodeURIComponent(document.title), 'facebooksharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" title="페이스북에 공유하기" alt="페이스북에 공유하기">
<img src="./images/facebook.png" width="90%"></a>
</div>
<div>
<span style="font-size:11px">페북</span>
</div>
</div>


트위터

<div style="width: 46px; text-align: center; display: inline-block;">
<div>
<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'%20-%20'+encodeURIComponent(document.URL), 'twittersharedialog',
'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" title="트위터에 공유하기" alt="트위터에 공유하기">
<img src="./images/twitter.png" width="90%"></a>
</div>
<div>
<span style="font-size:11px">트위터</span>
</div>
</div>

구글플러스

<div style="width: 46px; text-align: center; display: inline-block;">
<div>
<a href="#" onclick="javascript:window.open('https://plus.google.com/share?url='+encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" title="구글 플러스에 공유하기" alt="구글 플러스에 공유하기">
<img src="./images/google.png" width="90%"></a>
</div>
<div>
<span style="font-size:11px">구글+</span>
</div>
</div>


네이버 블로그

<div style="width: 46px; text-align: center; display: inline-block;">
<div>
<a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url='
+encodeURIComponent(document.URL)+'&amp;title='+encodeURIComponent(document.title),
'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="네이버 블로그 카페에 공유하기">
<img src="./images/naverblog.png" width="90%"></a>
</div>
<div>
<span style="font-size:11px">네이버</span>
</div>
</div>


카카오 스토리

<div style="width: 46px; text-align: center; display: inline-block;">
<div>
<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url='+encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="카카오 스토리에 공유하기">
<img src="./images/kakaostory.png" width="90%"></a>
</div>
<div>
<span style="font-size:11px">카스</span>
</div>
</div>


네이버 밴드

<div style="width: 46px; text-align: center; display: inline-block;">
<div>
<a href="#" onclick="javascript:window.open('http://band.us/plugin/share?body='+encodeURIComponent(document.title)+encodeURIComponent('\r\n')+encodeURIComponent(document.URL)+'&route='+encodeURIComponent(document.URL), 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="네이버 밴드에 공유하기">
<img src="./images/naverband.png" width="90%"></a>
</div>
<div>
<span style="font-size:11px">밴드</span>
</div>
</div>

이 글을 공유하기

댓글(6)

Designed by JB FACTORY