Addthis로 SNS 공유 버튼 넣어봅시다

 블로그들을 돌아보면 SNS 공유 버튼이 깔끔하게 정리되어 있는 블로그를 보면 저것을 어떻게 해야 할까? 의문이 들었습니다. 아쉬운 대로 티스토리에서 제공하는 SNS 공유 플러그인을 지금까지 사용했었는데 디자인 면에서 마음에 들지 않았습니다. 더욱이 가장 부러웠던 점은 모바일에서 하단에 스크롤을 따라다니면서 움직이는 플로팅 공유 버튼이었는데 구글링을 하면서 찾다가 Addthis라는 사이트에서 만들 수 있고 다른 블로그들도 이곳에서 만들어서 적용했다는 사실을 알고 만들어봤습니다.

SNS 공유버튼 만들기

 

 

▲ SNS 공유 버튼 만들기 사이트 Addthis 링크 참조 사이트에 접속하면 위와 같은 쿠키 통계를 수집한다는 메시지에 동의를 합니다.

 

 

▲ 그럼 다음과 같은 화면이 나오는데 우선 회원가입이 되어 있다면 로그인을 하고 가입이 되어 있지 않다면 Get Started, it's free를 클릭해서 가입을 해줍니다. 옆에 구글이나 페이스북 버튼을 눌러서 해당 아이디로도 회원가입이 가능하니 원하는 버튼을 클릭해서 가입을 진행합니다.

 

 

▲ 이메일과 비밀번호를 입력하고 Country Korea of Republic을 선택합니다. 아래 보이는 Monthl pageviews 동의는 소식을 받는 동의이기 때문에 체크할 필요가 없지만 그 아래 나오는 동의들은 모두 동의에 체크한 후 맨 아래 보이는 Let's Get Started를 클릭해서 다음으로 진행합니다.

 

 

▲ 저는 따라다니는 플로팅 SNS 공유 버튼을 만들 것이기 때문에 첫 번째 Share Buttons를 클릭합니다.

 

 

▲ 클릭하면 몇 가지 기능이 나옵니다. 여기서 플로팅을 선택하는데 티스토리 플러그인에서처럼 하단에 넣는 공유 버튼을 만들고 싶다면 두 번째를 선택하고 오른쪽에 +버튼으로 있다가 마우스로 클릭하면 나오는 버튼을 만들고 싶다면 세 번째를 클릭합니다. 하나하나 클릭해서 설명을 보면 대충 어떤 모양의 공유 버튼을 만들 것인지 감이 잡힙니다.

 

 

▲ Floating에서 현재 보이는 대로 공유 버튼을 만들고 싶다면 첫 번째 메뉴로 만들면 되지만 저는 여기에 더 추가하고 싶기 때문에 두 번째 Selected by you를 체크합니다.

 

 

▲ Selected by you를 선택하면 SNS 추가는 물론 순서도 바꿀 수 있습니다. 그러기 위해서는 ADD MORE SERVICES를 클릭해서 위와 같이 검색을 해서 클릭하면 그림의 가장 오른쪽에 보이는 것처럼 추가가 됩니다.

 

 

▲ 두 번째 메뉴에서는 공유 버튼의 모양이나 색상을 결정할 수 있고 세 번째 Share Counters에서는 공유가 몇 개나 되었는지 숫자 표시와 공유 라벨을 결정할 수 있습니다.

 

 

▲ 네 번째 Position 메뉴에서는 공유 버튼의 위치를 정해줍니다. On Desktop는 PC에서 볼 때 왼쪽이냐 오른쪽이냐 On Mobile에서 보이는 것은 위쪽이냐 아래쪽이냐 플로팅의 폭이나 위치를 정하고 다음으로 넘어갑니다.

 

 

▲ 마지막은 특정 페이지에서만 보이게 할 것이냐 이런 설정들이 있습니다. 저는 기본으로 해놓고 아래 Activate Tool를 클릭해서 만들었습니다.

 

 

▲ 만들고 나서 스크롤을 아래로 내려보면 위와 같이 코드가 나오고 복사해서 사용하면 됩니다. 사용 방법은 아래 참조

 

 

▲ 복사한 코드들은 위와 같이 </body> 바로 윗부분에 붙여넣기를 하여 사용하면 됩니다.

 

 

▲ TISTORY 관리에 들어가서 스킨 편집 - html 편집 - HTML에 들어가면 위와 같은 화면이 나오는데 가장 아래로 스크롤을 내리면 </body></html>이 보일 것입니다. 이 바로 윗부분에 엔터를 처서 간격을 조금 벌리고 위에서 복사해놨던 코드를 그대로 붙여넣기를 하고 적용을 클릭합니다.

 

 

▲ 적용을 한 후 모바일과 PC에서 확인을 하면 위와 같이 적용된 모습을 볼 수 있습니다. 마음에 안 들거나 수정해야 할 사항이 있다면 해당 사이트에 들어가서 수정 및 다시 만들어서 위에서 했던 방법대로 적용해줍니다.