티스토리 SNS 공유버튼 설치하기

반응형
반응형

네이버부터 티스토리 그리고 구글블로그까지 다양한 블로그를 활용해보고 있습니다. 구글의 블로그스팟을 사용하면서 외국사람들이 SNS로 글을 공유하는 플러그인을 사용하는 모습을 많이 보았습니다. 디자인도 깔끔하고 가벼워서 어디에나 적용하기 좋아 보였습니다. 오늘 제가 사용하고 있는 티스토리에 해당 플러그인을 적용해보고자 합니다.


"티스토리 SNS 공유버튼 설치하기"

일단 티스토리에서 제공하는 플러그인을 사용할 수도 있지만, 공유할 수 있는 채널이 페이스북 트위터 카카오에만 내보내기가 가능하기 때문에 다양한 매체로 공유가 불편했습니다. 저는 addthis 를 활용하여 SNS공유버튼을 설치해보겠습니다.

위의 링크로 접속하면 깔끔한 첫 페이지를 만날 수 있습니다. 이 서비스는 회원가입을 하지 않아도 사용할 수 있는데요, 저는 회원가입을 했습니다. 회원가입을 하면 블로그를 방문한 사람들이 공유를 얼마나 했는지 통계자료를 얻을 수 있습니다. 저는 구글 애널리틱스를 이용하고 있기 때문에 크게 활용은 안하겠지만, 어떠한 기능이 있는지 궁금하여 가입을 하였습니다.

이메일과 비밀번호를 입력하면 되고, 다른 정보는 필요하지 않습니다. 가입이 되어있는지만 확인을 하고 따로 이메일 인증과정은 없습니다.

회원가입을 하면 위와같이 툴을 선택할 수 있는데요, 저는 공유버튼을 설치해야하니 Share Buttons를 클릭하였습니다.

해당 버튼을 누르면 위와 같은 페이지가 나오게 됩니다. 여기서 타입을 설정할 수 있는데요, 사이즈바로 만들 것인지 글 가운데 넣을 것인지 이미지에 버튼을 만들지 설정이 가능합니다. 저는 사이드바를 선택하였습니다. 세팅과정을 통해서 사이드바의 위치와 모바일에서 사용유무 및 공유버튼의 갯수 등을 설정할 수 있습니다. 

원하는 세팅을 하면 위의 화면처럼 소스코드가 나타납니다. 해당 코드를 복사하여 나의 티스토리에 적용을 해보겠습니다. 코드 바로 밑의 내용을 보면 </body> 태그 의 윗 부분 중 아무 곳이나 복사하라고 나와있습니다.

html/ccs 편집에서 ctrl+F로 </body>코드를 검색합니다. <body>에서 </body>코드 사이에 아무 곳이나 넣으면 됩니다. 

저의 티스토리 블로그 메인입니다. 저는 적용하면서 몇 가지 문제가 있었습니다. addthis에서 준 소스가 저의 블로그 소스와 충돌을 일으키는지 적용이 되지 않았습니다. 플러그인이 뜨지 않은 것이죠. 몇 번 시도를 하다보니 테더데스크가 문제가 있더군요. 테더데스크를 사용하고 있었는데, 해당 서비스 사용해제하니 바로 공유버튼 서비스를 이용할 수 있게 되었습니다. 블로그 스킨마다 소스코드가 조금씩 다르기 때문에 어떠한 문제가 있다! 라고 단정짓기는 힘들겠지만, 저와 같은 문제가 있으시면 테더데스크를 해제 해보시기 바랍니다.


<2016.09.18 작성>

반응형

댓글

Designed by JB FACTORY