본문 바로가기

카테고리 없음

SNS 공유버튼 만들기 티스토리, 사이트

오늘은 본인이 운영하고 있는 블로그나 사이트에 SNS 공유 버튼 삽입하는 방법에 대해 알려드리려고 합니다. addthis에서 제공하는 기능으로 티스토리나 워드프레스 등 HTML 수정이 가능한 사이트에만 적용 가능합니다. 우선 addthis 사이트에 접속한 후  구글 아이디, 페이스북 아이디, 이메일로 로그인 합니다.




그 다음 Share Buttons를 클릭합니다. 소셜 미디어 팔로우 버튼이나 관련 포스트를 나열해주는 기능 등 다른 기능들도 있으므로 관심이 있으시면 한 번 사용해보시기 바랍니다. 




그러면 floating, inline 등 여러 항목이 나오는데, 아이콘이 어떻게 송출될지를 선택하는 창으로  원하시는 타입을 선택하시면 됩니다. 저는 Floating을 선택했습니다.




다음으로 어떤 소셜버튼을 활성화할지 정하면 됩니다. 기본적으로 활성화 되어 있는 버튼 이외에 추가하고 싶은 SNS가 있으시다면 'Select by You'를 선택한 후 'Add more service'를 통해 입맛에 맞게 SNS 버튼을 추가/삭제 하신 후 하단 'Active Button'을 클릭하시면 소스코드가 생성됩니다.




생성된 소스코드를 복사합니다.



티스토리 기준으로 ' 꾸미기 -> 스킨 편집 -> html 편집'으로 들어 간 후 Ctrl + F를 눌러 </body>를 찾습니다. 그리고 위에서 복사한 소스코드를 </body> 위에 삽입해주면 아래와 같이 페이지 왼쪽 부분에 SNS 공유버튼이 활성화됩니다.




지금까지 SNS 공유버튼 활성화 방법에 대해 알아보았습니다. 저는 이 과정을 통해 카카오스토리, 카카오톡, 라인 등을 추가했는데요. 카카오톡과 라인의 경우 오류가 발생하면서 제대로 접속이 되지 않는 모습을 보였습니다. 아직 그대로 유지 중이지만 계속 문제가 발생할 경우 해당 버튼을 삭제할 예정입니다. 버튼을 만드실 때 참고하시기 바랍니다.