티스토리 블로그에 SNS공유버튼 달기(SHARETHIS)

티스토리 블로그에 SNS공유버튼 달기(SHARETHIS)

설치형 블로그를 괜히 선택한 것일까요? 내가 할 수 있는 것들이 무궁무진한 까닭에 블로그를 가꾸는게 굉장히 어려울때도 있습니다. 하지만, 한편으로는 조금만 공부하면 내맘대로 할 수 있다는 생각에 즐겁기도 합니다. 본인은 개인적으로 PC,웹을 즐겨하기에 다행스럽게도 후자쪽에 가깝기에 내 블로그를 조금 더 멋진 콘텐츠와 풍부한 기능들로 채워가고자 생각했습니다. 그래서 오늘은 블로그 글을 자유롭게 SNS로 공유할 수 있는 소셜버튼을 추가해보기로 했습니다.   

사실 요즘에는 SNS공유 버튼은 하나하나 SNS업체에서 딸 필요가 없습니다. 소셜네트워크 업체와 함께 소셜네트워크를 관리하고 공유해주고 다양한 서비스를 제공해주는 업체들도 덩달아 급부상했기 때문입니다. 기본적으로 트위터(TWITTER),페이스북(FACEBOOK),구글플러스(GOOGLE PLUS) 등에 대한 버튼은 물론 전세계에서 서비스되는 웬만한 SNS기능을 공유해줄 수 있는 버튼을 이제는 클릭 몇번이면 만들 수 있게 되었습니다. 

SNS공유버튼 생성과 관련하여 나름 분석을 해본 결과, SHARETHIS와 ADDTHIS 두개의 업체서비스를 많이 이용하시는 것으로 확인되었습니다. 당초 ADDTHIS를 이용하고자 했으나 ADDTHIS는 HTML에 대한 나름의 이해가 있어야만 내가 원하는 구성을 할 수 있기도 하고, 개인적으로 크롬확장프로그램으로 사용하고 있던 터라 누구나 간편하게 따라할 수 있는 SHARETHIS를 이용하기로 했습니다. 

먼저 SHARETHIS홈페이지에 접속합니다.

WWW.SHARETHIS.COM

SHARETHIS홈페이지 바로가기

원하는 SNS버튼을 생성하고 블로그에 적용하는 것은 클릭 세번이면 끝납니다. 

먼저, 홈페이지 화면에서 아래 Get the Code 를 클릭합니다.

Step1에서 Website를 클릭합니다. 

당연히 티스토리를 위한 커스터마이징 서비스가 제공되지 않고 특별히 그럴 필요조차 없기때문에  Website로 생성하시면 됩니다. 

Step2에서 SNS공유아이콘들에 대한 원하는 노출형태를 선택합니다. 

본인은 일반 인터넷 기사페이지처럼 모든 포스팅 상단에 적용할 것이기에 버튼으로 선택했습니다. 보통 포스팅 상하단에 위치시키는 Buttons 혹 좌우측 플로팅을 구현해주는 Bars 가 가장 일반적입니다. 

Step3 에서는 아이콘 크기를 지정하고 추가할 공유서비스업체를 선택합니다. 

구글플러스,페이스북,트위터는 물론, 바이두,링크인,마이스페이스 등 왠만한 전세계 대부분의 SNS서비스업체에 대한 선택이 가능합니다. 추가로, 확장 플러그인에서는 유튜브구독,페이스북좋아요 등의 기능도 포함시킬 수 있습니다. 이제 원하는 서비스를 전부 선택했으면 하단의 FINISH get the code 를 클릭합니다. 

코드를 확인해보니 2개의 스크립트가 나왔습니다. 예상한대로 하나는 자바스크립트 소스이며(하단), 하나는 실제 원하는 위치에 붙여넣어 아이콘들을 노출시키는 span 태그들(상단)입니다. 

# 하단 박스는 티스토리 skin.html 에서  /head 앞에 넣습니다.

# 상단 박스는 티스토리 skin.html 에서 내가 원하는 위치에 넣습니다.

본인은 아래와 같이 본문 상단 구글애드센스 광고 하단에 한줄로 나열할 것입니다. 포스팅과 구분하고 나름 깔끔한 배열을 위해 라인 한줄까지 삽입해줬습니다. 

SHARETHIS를 이용해서 공유아이콘을 적용시켰습니다. 어떤가요? 이제 제 포스팅이 마음에 들면 누군가가 언제든지 자유롭게 제 글을 공유할 수 있습니다. 이렇게 공유버튼이 포함되니 포스팅의 질을 더욱 높여야할 것같은 부담감이 생기기도 합니다만, 더욱 많은 분들이 제 블로그의 글을 보고 공유해가면 참 뿌듯하겠다라는 생각이 듭니다. 건전한 블로그를 지향할 수 있을 뿐더러, 내가 열심히 작성한 글은 물론 나를 더욱 PR할 수 있고 이에따르는 수익가능성까지 열 수 있으니 어느정도 블로그를 정성스럽게 가꾸고자 하는 분들이라면 SNS공유버튼 추가는 이제는 필수인 듯 합니다. 많은 도움 되셨길 바랍니다.