Fastboot 티스토리에 SNS 공유하기 버튼 달기

티스토리 쉽게 따라하기 - Fastboot 티스토리에 SNS 공유하기 버튼 달기

티스토리를 하다보면 방문자들이 SNS를 이용하여 공유를 하기도 한다. 그래서 이번에는 SNS 공유를 쉽게 할 수 있도록 티스토리에 애드디스를 이용해서 이쁜 SNS 공유하기 버튼을 만드는 방법을 알아보겠다.

Fastboot 티스토리에 애드디스를 이용해서 SNS 공유하기 버튼 만들기

먼저 SNS 공유하기 버튼을 만들기 위해서 애드디스 홈페이지로 간다.

홈페이지를 들어가면 일단 로그인을 해야 하는데 나는 구글 계정으로 했다.

이메일을 입력하고, 나라를 선택하고, 그 아래로 각종 동의를 한다.

로그인을 했으면 Share Buttons 를 클릭한다.

그리고 Floationg을 클릭한 후 맨아래 Contiune 를 클릭한다.

이제 세팅하는 단계이다. 아래 그림처럼 셋팅을 하면 되는데 뭐 다르게 하고 싶은 분들은 달리 해도 된다.

ADD MORE SERVICE를 클릭하면 기본 세팅외에 다양한 SNS를 추가 할 수 있으니 쭉 살펴보고 원하는 SNS를 추가하도록 한다. 최근에 카카오톡도 생겼으니 참고하길 바란다.

세팅이 끝났으면 맨아래 Save & Contivue를 클릭하면 코드가 나온다. 코드를 복사한다.

코드를 복사했으면 다시 블로그로 와서 블로그관리홈> 꾸미기> HTML/CSS편집을 클릭한다.

오른쪽 HTML소스에서 맨 하단으로 내려 </body> 앞에 복사한 코드를 붙여 넣는다. 그리고 저장 버튼을 클릭하면 끝난다.

블로그에 SNS 공유하기 버튼이 생긴 모습이다.

모바일에선 이렇게 나온다.

<애드디스 분석 자료 활용하기>

애드디스에 로그인해서 Analytics를 클릭하면 방문객 숫자와 공유버튼 사용 횟수가 나온다. 이 통계로 어느 SNS로 공유되었는지 알 수 있다.

티스토리 이전글, 다음글 표시 버튼 제거하기

SNS 공유하기 버튼을 만들면 좀 거슬리는 것이 하나 생긴다. 바로 '이전글, 다음글 표시 버튼' 이다.

원래 있던 것이지만 SNS 공유하기 버튼과 위치가 겹치면서 오클릭이 생긴다. 그렇기 때문에 SNS 공유하기 버튼을 만들었으면 이전글, 다음글 표시 버튼을 없애는 것이 편리하다.

이전글, 다음글 표시 버튼을 없애기 위해서 블로그관리홈> 꾸미기> HTML/CSS편집을 클릭한다.

HTML에서 Ctrl+F 눌러 검색창을 활성화 하고 그곳에 '이전' 을 입력해서 검색한다. 그럼 다음과 같은 소스가 검색된다.

그곳에서 맨 위에 주석 부분 마지막 쪽의 '-->' 를 잘라내기를 해서 아래쪽 </script> 오른쪽에 붙여 넣는다.

이전글, 다음글 표시 버튼에 대한 소스 전체를 주석화 해서 없앤것이다. 저장을 하고 나와 블로그로 가보면 버튼이 없어진것을 확인 할 수 있다.

오늘은 애드디스를 활용하여 티스토리에 SNS 공유하기 버튼을 만들어 보았다. 쓰임새도 좋지만 버튼이 이뻐서 보기에도 좋은것 같다.

SNS 공유하기 버튼을 잘 활용해서 좋은 블로그가 되길 바란다.

정보가 도움이 되셨다면 '공감' 한번 꾹 눌러주세요

저작자표시 비영리 변경금지

레드의 달콤한 비밀