티스토리에 고정형 SNS 공유 버튼 만들기 / 블로그에 애드디스 적용하기


 안녕하세요. 오랜만에 티스토리 블로그에 대한 글을 작성해볼까 합니다. 그동안 블로그에 신경을 쓸 시간이 많이 없어서 블로그를 꾸미는 일도 못하고 있었네요. 이번에는 티스토리 블로그 안에 고정되어 있는 SNS 공유 버튼을 만드는 방법에 대해 알려드리려고 합니다. 바로 AddThis 를 이용하는 방법입니다.


[ AddThis 홈페이지 메인화면 모습 ]


 애드디스는 블로그나 홈페이지에 SNS 공유 버튼을 만들어주는 서비스를 제공하고 있습니다. 애드디스에서 제공하는 SNS 공유 버튼은 종류가 다양한데 오늘은 블로그 좌측에 고정되어 있는 SNS 공유 버튼을 만들어 볼까 합니다.


 그럼 지금부터 애드디스를 이용해 티스토리 블로그에 SNS 공유 버튼을 다는 방법에 대해 알려드리도록 하겠습니다.




  애드디스를 이용해 티스토리 블로그에 SNS 공유 버튼을 고정시켜 다는 방법



 1.

 아래의 링크를 통해 애드디스 홈페이지에 접속한 후 구글, 페이스북 계정이나 이메일 계정을 통해 홈페이지에 가입합니다.



[ 구글, 페이스북, 이메일 계정으로 가입할 수 있다 ]


[ 구글 계정으로 가입해 보았다 ]



 2.

 로그인 한 후 좌측 상단의 Explore the Tools 글자를 클릭합니다.





 3.

 Share Buttons 를 클릭합니다.





 4.

 Activate 버튼을 클릭합니다.





 5.

 Floating 을 클릭한 후 하단의 Continue 버튼을 클릭합니다. Floating 외에 다른 것을 클릭하게 되면 다른 종류의 SNS 공유 버튼으로 달 수 있습니다.





 6.

 Position 에서 DesktopMobile 에서 SNS 공유 버튼이 나오는 위치를 설정해 줍니다. Left 는 왼쪽, Right 는 오른쪽, Bottom 은 아래쪽, Top 은 위쪽 Hide 는 숨김입니다.


 저의 경우에는 컴퓨터에서는 왼쪽, 모바일에서는 숨김으로 해보겠습니다.




[ 데스크탑(컴퓨터)에서의 위치를 설정 ]


[ 모바일에서의 위치를 설정 ]



 7.

 Social Networks 에서 Select your own 를 클릭한 후 하단의 ADD MORE SERVICES 버튼을 클릭해 원하는 SNS를 추가합니다. 마우스로 드래그해서 위치를 변경할 수 있습니다.





 8.

 하단의 Save & Continue 버튼을 클릭합니다.





 9.

 상단의 GET THE CODE 로 들어간 후 HTML WEBSITE 에서 아래와 같이 1번 태그 문장을 복사합니다.





 10.

 티스토리 블로그 관리창으로 들어간 후 HTML/CSS 편집으로 들어갑니다.





 11.

 하단의 </body> 를 찾은 후 바로 위에 아까 복사한 태그 문장을 붙여넣기 합니다.





 12.

 SNS 공유 버튼이 잘 나오는지 확인합니다.


[ 홈페이지에 SNS 공유 버튼이 달려 있는 모습 ]



  티스토리 블로그 관련 다른 글 보기