거두절미하고 오늘은 바로 아래에 있는 Addthis 공유버튼을 만들어서 티스토리 블로그 또는 워드프레스 사이트에 삽입하는 방법까지 알아보겠습니다.
Addthis란 공유버튼을 만들고 관리할 수 있게 해주는 사이트입니다.
좋은점은 카카오톡, 페이스북, 페북 메시지, 카카오스토리, 라인, 메시지 등 전세계의 다양한 SNS채널에 쉽게 공유할 수 있는 SNS 공유버튼을 제공합니다.
Addthis - 내 블로그에 SNS 공유버튼 만들기, 달기
▲SNS 공유버튼 예시
▲(1)일단 SNS공유버튼을 만들기 위해 Addthis 사이트에 접속합니다.(www.addthis.com)
▲Addthis는 단순히 SNS공유버튼 생성만 도와줄 뿐 아니라 각 공유버튼으로 인해서 얼마나 공유가 이루어졌는지 분석자료까지도 제공하기 때문에 계정이 필요합니다. (2)Get started. it's free 버튼을 클릭하여 계정을 생성합니다. 구글 아이디로도 간단 생성이 가능합니다.
▲계정 생성 창입니다. (3)아이디가 될 이메일 주소를 입력>(4)(5)패스워드를 2번 입력>(6)국가 선택>(7)궂이 선택을 하지 않아도 되지만 분석에 도움이 될 수 있으니 내 월별 방문자 수를 체크합니다. 1K=1000뷰
▲그리고 스크롤을 내려 (8)자동방지에 체크하고 (9)버튼을 눌러 계정 생성을 완료합니다.
▲Addthis에서 제공하는 여러 도구가 있는데 SNS공유버튼을 만들기 위해 (10)Share Buttons를 클릭합니다.
Addthis SNS공유버튼 생성창
▲Addthis SNS공유버튼 생성창입니다. 첫번째 Floating은 제가 지금 사용하고 있는것과 같이 왼쪽상단에 떠다니면서 스크롤과 함께 이동합니다.
▲두번째 Inline은 본문 최상단에 위치하게 합니다.
▲세번째 Expanding은 오른쪽 하단에 위치하게 되며 페이지를 흐리지 않는다는 장점이 있지만 일반사람들은 눌러보지 않으면 저게 무슨 버튼인지 알기 쉽지 않기때문에 비추합니다.
▲네번째 Image Sharing은 본문 사진 이미지 상에 위치하게 되어 클릭하면 공유할 수 있습니다. 방문자들이 쉽게 볼 수 있지만 사진을 보는데 방해가 될 수 있습니다.
▲다섯번째는 Popup입니다. 이 또한 페이지 위에 팝업으로 뜨면서 노출은 좋지만 블로그 방문자에겐 귀찮은 존재가 되면서 페이지를 이탈할 수 있으므로 비추합니다. 여섯번째는 Banner인데 예시 이미지가 뜨지 않아 설명에 못넣었습니다.
▲마지막 Slider는 페이지 오른쪽 하단에 작은 팝업 형태로 뜹니다.
이 7가지 툴 중에 원하시는 것을 사용하시면 되는데 제가 추천드리는 것은 첫번째 Floating입니다.
▲원하는 디자인이 선택이 됬다면 이제 공유버튼을 편집해보겠습니다. 기본에는 카톡이나 라인 등 우리나라에서 많이 사용하는 버튼이 들어있지 않기 때문에 (11)Selected by You 버튼을 체크한 뒤 가장 아래에 있는 'Add More Services'를 클릭하여 원하는 SNS버튼을 찾아서 (12)번에 추가해줍니다.
그리고 각각의 버튼을 드래그 하여 순서도 바꿔줄 수 있으므로 다채로운 색으로 조합하셔도 됩니다.
▲디자인도 자기가 선택할 수 있는데 버튼 색의 경우 각 SNS 브랜드의 색이 잘 나와 있는 디폴트 값으로 가는 것이 좋습니다. 저는 디자인부분에선 아예 손대지 않았습니다.
▲Share Counter 설정입니다. 쉐어 카운터는 Addthis 버튼을 통해 얼마나 글이 공유가 됬는지 숫자를 보여주는 기능입니다. 쉐어 카운터 타입에서 individual은 각각의 버튼마다 얼마나 공유가 됬는지를 보여주며 Total은 각각 보여주는 것이 아닌 전체의 합으로 보여줍니다. 저는 각각 버튼의 사용빈도를 알고 싶어 Individual로 설정했습니다.
▲포지션 탭에서는 공유버튼을 어디에 위치시키면 방문자에게 잘 보일지 설정하는 창입니다. 저는 데스크톱에서는 왼쪽 상단에 뜨도록, 모바일에서는 바닥에 뜨도록 설정했습니다. 나머지는 수정하지 않았습니다.
▲모바일은 Bottom으로 설정했기 때문에 이렇게 하단에 쫙 깔려서 보기 좋게 뜹니다.
▲마지막으로 설정할 것은 어느 페이지에서 공유버튼이 보이게 또는 안보이게 설정하는 창입니다. 하지만 일일이 페이지별로 설정할 필요도 없기 때문에 저는 수정하지 않았고, 그 밑에 Follow up Message만 한글로 넣어줬습니다.
Addthis 티스토리 블로그에 추가하기
▲모든 설정이 완료되면 이 페이지가 나옵니다. 내가 만든 고유의 번호가 담긴 Addthis 버튼 HTML 코드가 생성됬습니다. (13)오른쪽 버튼을 눌러 왼쪽 코드를 복사해줍니다.
▲(14)복사한 코드를 삽입하기 위해 '티스토리' 블로그 관리자 페이지에서 스킨편집 버튼을 클릭합니다.
▲(15)스킨편집창에서 오른쪽 상단에 위치한 html편집 버튼을 클릭합니다.
▲여기서 중요한게 반드시 html 코드 중 <body> ...... </body> 사이에 넣어주어야 합니다. 언제 코드를 수정할지 또는 삭제할지 모르기 때문에 /body를 찾아서 바로 앞에 붙여넣겠습니다.
▲(17)위의 사진처럼 </body>코드 바로 앞에 엔터로 공간을 만들고 복사되어 있는 Addthis 코드를 붙여넣기 합니다.
▲(18)붙여넣기가 완료됬다면 반드시 오른쪽 상단의 '적용' 버튼 클릭
▲이렇게 코드까지 붙여넣기가 완료됬다면 내 블로그에 접속했을 때 정상적으로 왼쪽 상단에 SNS공유버튼이 떠다니는 것을 확인할 수 있습니다. 이 공유버튼을 누르면 현재 보고 있는 페이지의 주소가 공유됩니다.
Addthis의 SNS공유버튼을 사용하면 좋은 글을 본 방문자가 지인들에게 공유,공유가 되면서 점점 방문자가 늡니다. 물론 요즘 모바일에서는 인터넷 어플리케이션 자체의 공유버튼이 잘되있지만 디자인면에서도 훌륭하기 때문에 사이트를 운영중이시라면 Addthis 사용을 추천드립니다.
☞조금이나마 도움이 되셨다면 하단의 구독 버튼 클릭!
☞아래에 추천 Tip도 있으니 확인하고 가세요↘↘↘↘
