본문 바로가기
잘공IT

티스토리 SNS 공유버튼 Addthis 따라하기

by 잘공이 2020. 2. 5.

안녕하세요.

티스토리를 조금 더 잘 운영하고 싶다? 그렇다면 SNS 공유버튼을 한 번 달아보세요.

내가 올린 포스팅을 SNS에 공유해 유입율을 높일수도 있고, 방문자 입장에서도 유용한 정보가 있다면 쉽고 편하게  퍼갈 수 있게 해두는 건데요, 티스토리 플러그인에도 자체 기능이 있지만 Addthis 라는 사이트를 이용해 좀 더 그럴 듯한 공유버튼을 만들어 보겠습니다.



Addthis를 사용하는 이유는 흔히 사용하는 트위터, 카카오, 페이스북 외에도 아래 이미지처럼 내가 원하는 SNS를 골라서 티스토리 사이드에 따라다니는 배너처럼 만들 수 있게 때문입니다. 저는 페이스북, 트위터, 카카오, 카카오스토리, 라인, 이메일 이렇게 만들어 봤는데요, 생각보다 만들기 쉽더라구요.

자, 그럼 한 번 만들어볼까요? 팔로팔로미~~


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



https://www.addthis.com/


우선 addthis 사이트에 접속 후 아래 화면에서 Get started, it's free 버튼을 눌러주세요.



회원가입을 해줍니다. 외국사이트는 거의 이메일과 비밀번호만 넣으면 되니 굉장히 간편해서 좋더라구요.



Share Buttons 공유버튼을 눌러줍니다.




그럼 아래와 같은 화면으로 전환이 됩니다. 

플로팅(Floating)은 화면 왼쪽에 떠다니는 스타일이고 Inline은 가로로 펼쳐져 포스팅 내 들어가는 스타일입니다. 그 아래로 확장, 팝업 등 다양한 스타일이 있지만 플로팅이 가장 사용하기 좋아서 추천해 드립니다.

크게 확대해 보여 드릴게요. 플로팅을 선택하고 컨티뉴 해주세요.



우리가 Addthis를 사용하는 이유는 우리가 원하는 SNS를 넣고 싶어서니까 Selected by You를 눌러줍니다. 



페이스북, 트위터, 이메일, 핀터레스트만 보인다고 실망하지 마세요. 바로 아래 Add more services를 누르면 다양한 SNS가 쫙 나오거든요.



처음보는 SNS도 굉장히 많이 보였습니다. 저는 카카오톡을 추가하고 싶었어요. 그래서 검색해 보았습니다.



카카오와 카카오톡 모두 검색되길래 두개 모두 추가했습니다. 아이콘을 누르면 추가됩니다.



라인과 지메일도 추가했어요. 아이콘 순서는 원하는대로 바꿀 수 있습니다. 다 되었다면 Activate 해주세요.




이제 홈으로 돌아와서 Get the code를 눌러주세요. 

중간 + 버튼을 누르면 코드가 복사됩니다. 이 코드를 넣기 위해 이제부터 티스토리 스킨편집에 들어갈게요.




티스토리 스킨편집 HTML에서 하단으로 쭉 내려가서 아래 화면처럼 </body>앞에 붙여주세요. 그리고 적용, 새로고침 아시죠?



자, 그럼 화면 왼쪽에 적용된 것을 확인하실 수 있을거에요. 참고로 모바일로 볼 때는 화면 하단에 위치한답니다. 



포스팅이 유용했다면 공감 부탁 드릴게요:)


이전 포스팅

예쁜 글씨체 무료폰트다운10종 다운로드 하기

무료 폰트 다운 7종 (서울서체, 성동서체, 고양체, 이순신체, 부산체, 제주서체, 독도체)

유튜브 카메라 뭐가 좋을까? 유튜버 카메라 추천, 비교

고프로8 가격, 스펙 알아보기 , 유튜브 카메라 추천합니다.

유튜브 채널 만들기, 유튜브 시작하기



댓글