Addthis로 sns 공유버튼 스크롤 따라다니게 만들기

SNS 공유버튼을 만들려다 보니까 티스토리 플러그인 자체에서 제공하는 공유버튼은 너무 투박하고 선택사항도 없어 맘에 들지 않았습니다. 공유버튼 대표회사의 이미지가 뙇! 하고 나와있으면 귀엽기도 했구요. 그래서 찾게된 프로그램이 addthis 인데요 스크롤 혹은 마우스로 화면을 이동해도 따라다니는 공유버튼 만들 수 있습니다. 공유버튼으로 블로그꾸미기 해보세요^^

 

▶addthis 사이트 연결

http://www.addthis.com

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

홈페이지 접속하면 첫화면입니다. 파란색 원안에 Get started, it's free 란 문구를 눌러 회원가입을 하시면 됩니다. 무료인 데다 이메일 주소와 국적 말고는 기입하는 게 없어서 걱정 없이 진행하셔도 됩니다.

 

다음 단계 화면입니다. 어떤 걸 할 건지 선택하는 곳인데요 첫번째 Share Buttons 이 공유버튼을 뜻합니다. 선택해 주세요. 그 옆에 버튼은 팔로우 버튼이니 필요하신 분은 활용해 보세요.

 

혹시 번역된 한글로 보면서 편하게 하고 싶으시다면 오른쪽 상단 주소창 끝에 파란박스와 같은 그림이 있어요. 번역 버튼이니 클릭해서 번역된 화면으로 보시면 됩니다. 단 크롬에서 열린 창에서만 가능한 방법입니다.  

 

가입하는 방법입니다. 맨 위에 있는 Email Address에 자신의 이메일주소를 쓰고 아래칸에 기입하시면 되는데 처음엔 네이버 주소를 썼더니 계속 가입이 안되더라구요. 결국 gmail 주소를 기입했더니 가입에 성공해서 다음단계로 넘어갔습니다. country 에는 korea of Republic 선택하시고 그 아래 Monthly Pageviews는 옵션이라는 말 그대로 소식받기라서 체크 안하셔도 됩니다. 위에 것들을 다 작성하고 나면 소식받기 밑으로 박스가 여러개 생기는데요 정보동의용이니 그 아래 박스는 다 체크해 주셔야 합니다. '로봇이 아닙니다' 까지 체크해 주신 다음 Let's Get Started 클릭!

 

 

 

 

1단계

이제 편집하는 곳인데요 스크롤 따라서 움직이는 공유버튼을 만들거니까 맨 위에 Floating 클릭.

 

2단계

기본적으로 세팅되어 있는 빨간박스안에 저 아이들로 할거면 위에 동그라미에 체크하고 다른 sns를 추가,편집하고 싶으면 현재 체크되어 있는 두번째 selected by you 체크 후 빨간박스 아래 있는 ADD MORE SETVICES를 누르고 추가하고 싶은 SNS를 검색창에 입력하시면 됩니다. 예)kakao, line, link

 

3단계

3번이라고 써있는 곳 아래에 두번째 도구버튼을 선택. 크기와 보드색상등을 결정하는 곳입니다. 선택할때마다 오른쪽에 아래와 같은 화면처럼 테스트가 되서 뭘 뜻하는건지 어떻게 변하는건지 알아채실 수 있답니다. 아래사진 상단에 보면 PC그림과 핸드폰 그림이 있는데요 난 분명 왼쪽 스크롤을 선택했는데 왜 아래있지? 라는 의문으로 도대체 몇번을 만들었는지 몰라요 ㅠㅠ 원래 핸드폰은 폭이 좁아서인지 공유버튼이 아래에 나타나고 PC 화면은 정상적으로 왼쪽에 나타나는 겁니다. 그걸 몰라 시간낭비했어요.

 

 

4단계

공유버튼 옆에 나타나는 카운터 유형입니다. 전 아무도 공유하지 않으면 부끄러울까 봐 선택 안 하는 None으로 했어요.

 

5단계

맨 위칸은 위치입니다. 전 데스크탑에선 왼쪽(left)에 위치하고 모바일인 핸드폰은 하단에 나오게 선택했어요. 가운데는 폭맞추는 거라는데 잘 모르겠어서 기본으로 놔뒀구요 세번째는 제가 왼쪽으로 선택한 데스크탑의 상위 몇프로쯤의 위치하느냐를 묻는 건데 기본이 20%로 나와서 그대로 선택했어요. 제 블로그상 공유버튼을 보시면 이해가 되실 거예요.

 

6단계

이 공유버튼을 특정 화면에만 보여줄 건지 안 보여줄 건지 선택하는 겁니다. 전 모두 노출되게 할 거니까 Activate Tool을 누릅니다. 처음 하신 분들은 편집해야 할 코드 부분으로 넘어가지만 기존에 해보셨던 분들은 기존 것이 있는데 편집할 건지 새로 만드는 건지 묻는 창이 나옵니다. 손 안 대고 그냥 Activate Tool 클릭하심 되요.

 

 

마지막 단계입니다. 하늘색 상자 안에 있는 코드를 복사해야는데요 상자안에 플러스(+) 버튼 누르심 복사가 됩니다. 그리고 티스토리 블로그의 스킨 편집으로 가셔서 html 편집 --> 제일 아랫부분에 남색 창에서 처럼 </body>가 나옵니다. 그 바로 위에 붙여넣기 하시면 완성!! 적용 눌러서 저장한 다음 새로고침 하신 후 공유버튼 생성을 확인하세요~