티스토리에 sns 공유버튼 넣기(addthis와 티스토리 설정) 😊👍

티스토리를 sns에 공유할 수 있는 버튼을 만들어주는 작업입니다.
방법은 2가지 입니다. 티스토리를 이용하는 방법과 addthis사이트를 이용하는 방법입니다.
티스토리 본문 하단에 카카오스토리, 페이스북, 트위터 공유버튼이 있어요.

이 sns 공유버튼이 아직 없다면 티스토리 관리화면 플러그인에서 간단하게 추가할 수 있습니다.
또는 pc에서는 왼쪽에 모바일에서는 아랫쪽에 위치하면서 따라다니는 sns 공유버튼을 넣을 수 있습니다.

 

 

  티스토리 관리화면에서 sns 공유 버튼 넣기

 

 

 

티스토리 관리화면에서 플러그인으로 들어갑니다.

 

 

 

여기에 SNS 글보내기를 클릭해줍니다.

 

 

SNS 글보내기 설정창이 나오는데요,
여기에서 아이콘형태를 정하고 위치를 설정한 후 적용하면
바로 티스토리 본문하단에 SNS 공유버튼이 나옵니다.

 

 

  티스토리 따라다니는 sns 공유 버튼 넣기

 

플로팅 메뉴바입니다. 이렇게 생겼어요.

 

다른 사람들의 티스토리중에 왼쪽 브라우저에 붙어서 스크롤시 따라다니는 sns 공유버튼을 본적이 있을거예요.
html을 모르는 사람도 간단하게 추가할 수 있습니다.

이런 sns 공유버튼을 생성해 제공해주는 사이트를 이용하면 됩니다.
addthis라는 사이트 무료입니다.

 여기에 들어가서 가입해줍니다.
이메일을 넣고 나라 korea를 선택하고 이용정책에 모두 체크하면 됩니다.

 

제 3자에게 광고를 위해서 정보를 제공한다는 사항에 체크를 해야사용할 수 있어요.
이런거 하기 싫지만 무료이기 때문에 체크하고 가입했어요.
아무튼 동의에 모두 체크하고 가입합니다.

 

 

 

 

가입하면 아래와 같이 툴을 선택하라고 합니다.
티스토리에 공유버튼을 넣을 거라서 "Share Buttons"를 선택했습니다.

 

 

 

 

아래 화면으로 들어갑니다. 따라다니는 버튼은 Floating을 선택하면 됩니다.
하나씩 클릭해보시면 다 아실거에요.
오른쪽 화면에 구현되는 모습을 보여주는 것을 보고 맘에 드는 것으로 선택하세요.

 

 

 

 

 

 

페이스북과 트위터, 프린트와 이메일 공유버튼만 있습니다.
더 추가할 것이 있다면 '+'버튼을 클릭해서 추가해주면 됩니다.

 

 

 

검색창에 kakao를클릭하니 나오네요.
kakao를 선택하여 추가해주세요.
카카오톡은 현재 안되니 패쓰~(개인계정과 연결되는 거라서 그런것 같아요.)

 

 

선택해서 넣었으면 하단에 있는 'continue'를 클릭해줍니다.

 

 

공유버튼 몇 개를 보여줄 건지 여기에서 선택해줍니다.

 

 

Selected by you를 선택하면 다시 한번 원하는 sns를 검색해서 추가하면 되는데요,
여기에서 순서를 바꿀 수 있어요. 원하는 위치로 sns를 끌어올리거나 끌어내리면 됩니다.
다른 sns 버튼을 넣고 싶다면  "ADD MORE SERVICES"를 클릭해서 넣을 수 있어요.
그리고 나서 "Activate Tool"를 클릭해줍니다.

 

 

상단에 "Get The Code"를 클릭해서 코드를 복사해 옵니다.

이제 티스토리 관리화면에서 스킨편집으로 들어갑니다.
서 html 편집창으로 가세요.

 

 

html소스 페이지 제일 하단으로 가서 </body> 태그 바로 위에 붙여줍니다.
저장하면 끝나요~

 

 

 

 

이렇게 왼쪽으로 따라다니는 공유버튼이 생성되었어요.
이 위치도 위쪽으로 또는 아랫쪽으로 설정할 수 있어요.

 

 

 

Floating 메뉴에서 설정할 수 있어요.
Positon에서 데스크탑과 모바일에서 공유버튼 위치를 조금 변경할 수 있어요.
나머지 메뉴들도 살펴보세요.

 

만든 공유버튼 모양이나 색깔을 바꾸려면 상단에 있는 "Tools"을 클릭하고 "SETTINGS"에서 변경하고 저장되면 바로 공유버튼 설정한 값으로 변경됩니다. 한번만 소스를 넣고 여기에서 바꾸기만 하니깐 번거로움이 없네요.

 

이것을 설치하고 나서 얼마나 공유가 되었는지 확인할 수도 있어요.
상단에 Analytics를 통해서 볼 수 있습니다.

 

 

사실 티스토리 본문 하단에 간단하게 sns 공유버튼을 추가할 수 있어요.
그러나 눈에 잘 띄이지 않아요.
그런점에서는 좋아요. 아쉬운 점은 네이버 공유버튼이 연결되지 않은 것이 아쉽네요.
네이버는 api를 이용해서 따로 달아줘야해요.

addthis 사이트~👇👇🌈

Get more likes, shares and follows with smart website tools - AddThis

티스토리 동영상 유튜브 하단 여백 제거 성공 🙌

티스토리에 sns 공유할 수 있는 아이콘 넣기(티스토리 플러그인 이용 : 아주 쉬움)