티스토리 SNS 공유버튼 만들기

티스토리 SNS 공유버튼 만들기

안녕하세요. 오늘은 티스토리 블로그를 이용시 정성들여 작성한 글을 외부 SNS 채널로 글을 보내기를 하고 싶을때 알아두면 유용한 팁을 소개해드리겠습니다. 

일반적인 티스토리가 제공하는 플러그인을 사용해서 사용을 하셔도 좋지만 더 넓은 채널에 내 글을 내보내기를 하고 싶으신 분들은 집중해 주세요.

티스토리 기본제공 SNS 글보내기 플러그인

  해당 블로그 로그인 후 [관리]- [왼쪽 상단에 플러그인]-[플러그인 설정]- 위 상단에 [글 보내기]-[SNS 글보내기 클릭] 크기 : 아이콘+ 문구형, 아이콘형 , 정렬은 왼쪽, 가운데, 오른쪽 으로 선택 후 저장을 하시면 소셜 SNS 글보내기 플러그인을 사용하실 수 있습니다. 사용된 사진은 위 오른쪽 사진처럼 적용됩니다.

보시는 바와같이 (카카오스토리, 트위터, 페이스북) 세 개의 채널만 글보내기를 하실 수 있기 때문에 더 많은 곳에 글을 보내고 싶으시다면

AddThis 라는 서비스를 이용하실 수 있는데요 설명은 아래에

1. AddThis 란 사이트에 접속을 하시면 가장 먼저 'Get Started Free' 을 클릭 후 회원가입을 하실 수 있는 창이 하나가 나오는데요. 해당 서비스를 이용하기 위해서 꼭 회원가입을 하지 않으셔도 되지만 저는 가입을 하시라고 권해드리고 싶습니다 이유는? 오른쪽 사진에 보시면 내 '티스토리 SNS채널 공유버튼'을 클릭하여 공유를 시도한 흔적들(통계자료)를 얻으실 수 있기 때문입니다. 이 자료는 상당히 유용하게 작용되고 물론 '구글의 애널리틱스'라는 아주 훌륭한 분석도구가 있지만 이 것으로도 그것의 기능을 할 수 있으니 좋습니다.

2. 상단 에 보시면 [ANALYTICS]카테고리를 클릭 후 방문자, 공유, 팔로워 SNS 퍼가기 한 채널들이 상세하게 출력이 됩니다. 지금까지는 'AddThis' 분석기능에 대한 간단한 소개였다면 지금부터는 [TOOLS]카테고리에 있는 Social Media Buttons SNS 공유버튼 만들기 포스팅의 핵심 부분을 설명드리겠습니다. 오른쪽 사진을 보시면 그냥 Sharing Sidebar가 있고 모바일 쉐어링 툴바 라는 것이 있고 아래에는 Pro 라는 유료 툴바도 있습니다. 사용하고자 하시는 툴바를 선택 후 SETUP 을 클릭 해주세요.

3. SETUP 클릭 후 위와같은 화면이 나올건데요 여기서 Choose a side 는 사이드바 툴바의 위치를 (왼쪽, 오른쪽) 선택을 하실 수 있습니다. 서비스에서 (Auto Personalization, Select Your Own)에서 오토를 선택 해주시고요 그 아래 항목 Number of Buttons 공유버튼의 갯수를 1~10개까지 지정 하실 수 있습니다. 선택 후 Update를 클릭 해주시면 됩니다.

4. 추가로 [Show More options]을 클릭 시 왼쪽 사진과 같은 화면이 나오는데요~ 홈페이지에 숨김으로 마우스를 갖다대면 나타나고, 마우스를 대지 않으면 숨겨져 있는 상태 설정을 하실 수가 있고 버튼의 사이즈, 공유 시 자동으로 출력되는 문구를 지정(Thanks for sharing)을 변경하실 수 있고, 여기서는 디테일한 설정을 하실 수가 있습니다. 오른쪽 사진을 보시면 슬립버튼으로 활성화가 되어서 파란불이 들어온 것과 아래에 이전에 SETUP이 아니라 SETTINGS로 변경이 된것을 확인 하실 수 있습니다.  

5. 전단계는 원하는 툴바를 선택하고 디테일한 모양, 위치, 문구등을 설정 할 수 있었습니다. 이번 단계는 코드를 생성해서 내 티스토리 블로그에 적용해보겠습니다. AddThis 상단 TOOLS 카테고리 옆 [GET THE CODE]를 클릭해주세요. 그러면 왼쪽사진처럼 Basic Code 아래에 생성된 코드를 복사해주세요 단축키는 Control + C , and 티스토리 홈페이지에서 로그인 후 [관리]-[HTML/CSS 편집]클릭 후 HTML항목에서 Control + F 찾기 단축키를 사용하여 'BODY' 를 검색 하시면 바디 근처에 마우스 포인트가 자동으로 위치되면서 위사진처럼 바디 아래에 해당 코드를 복사하여 붙여넣기를 해주세요. 

알고 있으면 정말 유용한   윈도우 단축키 모음 정리

6. AddThis 데스크탑 용 사이드바 공유 버튼 적용시 제 블로그 사진인데요 왼쪽을 보시면 SNS 공유버튼이 출력이 된 것을 확인하실 수 있고요, 플러스 모양을 클릭하면 오른쪽과 같이 (트위터, 페이스북, 이메일, 즐겨찾기, 쥐메일) 등 정말 많은 소셜로 내보내기를 하실 수가 있습니다. 

7. AddThis 모바일 용 사이드 바 공유 버튼 적용시 제 블로그 사진인데요. 데스크탑만 하면 왠지 아쉬움이 남고, 모바일에서는 적용이 되지 않기 때문에 모바일에서도 적용을 원하시면? 데스크탑 용 사이드바 공유버튼 만들기와 동일한 방법으로 만들어 주시면 되는데요. 여기서 핵심부분을 설명드리면? 데스크탑 용 사이드바 생성시 코드를 복사하여 붙여넣기를 했는데 모바일도 그럼 따로 코드를 복사하여 붙여넣기를 해야할까요? 대답은 아닙니다. 오른쪽 사진을 보시면 모바일, 데스크탑 용 사이드바 두개가 동시에 활성화가 된 것을 확인 하실 수 있습니다. 지금 이상태면 모바일, 데스크탑 에서 SNS 공유버튼이 출력이 됩니다. 

8. 모바일 기기에서 블로그 접속 후 화면을 캡쳐한 사진입니다. 정상적으로 출력이 되죠? 

지금까지 티스토리 SNS 공유버튼 만들기 포스팅이였습니다. 감사합니다.