addthis를 활용하여 내 블로그에 SNS 공유 버튼 (위젯) 달기

 

 

SNS 공유버튼 만들기 - 내 글을 쉽게 공유하기

 

< 페이스북, 카카오톡, 카카오스토리, 트위터, 라인, 밴드, URL공유 등 >

 

---

안 녕 하 세 요~^^

 

 

 

 

 

 

 

 

'블로그 방문자수 늘리기.'

 

블로그를 시작한 블로거라면 누구나 하게 되는 고민일 겁니다.

 

내 블로그에 방문하는 방문자들에게 홍보물이 필요합니다.

내 블로그에 이런 글이 적혀 있으니 한번쯤은 방문해주세요~!

하는 그런 홍보 말입니다.

 

내가 직접 홍보를 할 수도 있고

나 아닌 누군가가 내가 쓴 글에 가치를 깨닫고 홍보를 도맡아 해 주실 수도 있습니다.

 

홍보를 해 주시고자 하는 마음 그 자체도 고마운데

그런 과정의 번거로움 때문에 홍보를 포기하기 일쑤입니다.

 

내 블로그에 방문객 수를 늘리기 위해서는

홍보를 위한 수고스러움을 최대한 줄여줄 필요가 있습니다.

그 전략을 일환으로

SNS 공유버튼을 내 블로그에 달아 보는 방법이 효과적인 방법이 될 수 있습니다.

 

어쨌든 지푸라기라도 잡는 심정으로 뭐라도 해 봐야죠~!^^

 

 

---

 

  Addthis를 활용하여 SNS 버튼 추가하기

 

---

반응형

 

Addthis

 

먼저 사이트에 접속합니다.

 

 

 

사이트에 접속하면 해당 팝업이 뜰 수 있습니다.

'미동의' 버튼이 없어서

 

그냥

'동의' 할게요~

 

 

 

회원가입을 해도 되고 안 해도 되지만

 

회원가입을 하면 제가 만들어 놓은 위젯의 설정을 변경하거나

공유에 관한

분석자료를 제시해주거나 합니다.

 

해서 저는 회원가입을 했습니다.

 

 

메인 화면에 보면 이런 부분이 있습니다.

 

Get started, it's free

는 그냥 바로 해당 사이트에 정보를 넣고 가입하는 방법입니다.

 

이외의 방법으로

구글이나 페이스북 계정을 활용하여 가입하는 방법이 있습니다.

 

저는 구글 계정으로 가입을 하였습니다.

 

두 번째에 있는 구글 로고의 버튼을 눌러줍니다.

 

제가 로그인 하고 있는 구글 계정들이 보입니다.

 

저의 주 계정을 선택하여 줍니다.

그러면 다음과 같이

해당 사이트에서 사용할 이메일 계정과 국가를 선택할 메뉴가 뜹니다.

 

 

 

 

 

 

 

이메일 주소를 작성하고

해당 국가를 선택하여 줍니다.

국가를
Korea, Republic of,

로 변경하여주면 아래 체크해야할 사항이 쭉 더 뜹니다.

 

제가 캡쳐 편집을 실수 했는데

이메일 주소와 국가 선택란 바로 아래 칸에

체크하는 부분은 이메일 소식을 받겠냐는 동의 여부입니다.

 

체크 안 하시면 되고

나머지

바로 아래 빨간 칸의 내용과

파란 칸의 내용 부분의 체크항목에는

모두 체크를 해 주셔야 합니다.

 

그 후 Register 버튼을 누릅니다.

 

 

 

다음 이런 화면이 뜨는데

우리는 공유 버튼을 만들기 때문에

동그라미 부분의 영역을 클릭해 줍니다.

 

 

공유 버튼을 만들게 될 에티터 대시보드 화면이 나옵니다.

①에 속하는 좌측 메뉴에 어떤 형태로 공유버튼을 만들 건지 선택하는

유형 선택 메뉴가 나옵니다.

 

한 개씩 눌러보시면

②의 오른쪽 프레임에 해당 공유버튼의 미리보기가 실행됩니다.

마음에 드는 형태로

선택하신 후

Continue

버튼을 눌러줍니다.

 

가장 많이 사용하는 형태는

Floating

블로그 화면 가장자리에 공유버튼이 떠서 따라다니는 형태입니다.

 

저는 플로팅과 그 아래 인라인 형태 두 개를 같이 사용합니다.

 

 

 

 

 

 

그 다음으로 나오는 화면은

선택한 유형의 공유 버튼을 편집하는 화면입니다.

 

①번에 해당하는 아이콘들을 클릭해보면서 자기에게 맞는 설정을 하실 수 있습니다.

 

첫 번째로 나오는 화면이 공유 버튼에 어떤 SNS 서비스를 추가할 것인가에 관한 부분입니다.

 

②번 사항에 첫 번째 체크 부분은 Addthis가 추천해주는 SNS를 공유 버튼에 추가하는 내용입니다.

두 번째 체크 부분이 내가 스스로 공유 버튼을 추가하겠다는 내용입니다.

 

두 번째 체크 항목에 체크를 하면

 

③번으로 넘어갑니다. 아래쪽으로 스크롤을 내리면

 

ADD MORE SERVICE

 

내용이 있습니다. 해당 부분을 클릭하여

추가하고 싶은 SNS 버튼을 찾아서 클릭해주시면 됩니다.

SNS가 추가되면 바로 뒤쪽으로 붙게 됩니다.

 

③번 항목에서 해당 아이콘을 길게 클릭하고 드래그 앤 드롭의 형태로 순서를 조정해 주실 수 있습니다.

 

④번은 내가 추가한 아이콘의 형태가 PC와 모바일에서 어떻게 보이는지 

미리보기 할 수 있게 해 주는 항목입니다.

 

⑤번은 설정이 완료된 후 클릭하셔서 위젯 태그를 만드는 버튼입니다.

나머지 설정을 모두 마친 후 최종적으로 눌러주시면 됩니다.

 

①번에 해당하는 다른 아이콘 영역도 살펴보겠습니다.

 

 

두 번째 섹션에서는 아이콘 디자인을 할 수 있습니다.

하나씩 눌러보시면 어떤 내용인지 파악할 수 있으실 겁니다.

아이콘의 스타일, 아이콘의 크기, 아이콘의 모양(사각-원형), 아이콘 버튼 컬러, 아이콘 컬러,

 

마지막에 Yes에 체크해 놓은 부분은

아이콘 안에 해당 SNS의 풀네임을 기재할 것인지 숨길 것인지에 대한 내용입니다.

저는 아이콘 로고만 표출되게 하려고

SNS 이름은 숨김처리 했습니다.

 

 

세 번째 항목은

공유를 한 횟수를 카운팅하는 내용입니다.

저는 카운터를 없애는 형태로 아이콘을 만들었습니다.

 

Addthis 사이트에서 볼 수 있으니 말입니다.

 

 

네 번째 항목은 위치를 나타냅니다.

기본 설정대로 하시면 되고

Floating 위젯의 경우

 

저는 모바일에서는 안 보이게 했습니다. 모바일에 너무 많은 아이콘이 떠 있으니 정신 사나워서

본문 안에 Inline의 형태로만 넣어놨습니다.

 

숨김 처리 하고 싶으시면

Hide on These Devices

항목에서 PC나 모바일 선택하시면 됩니다.

 

숨김 처리 하기 싫으시면

Neither

하시면 되고요.

 

 

 

 

 

 

행동 부분 영역에서는

특정 페이지에서만 보이게 또는 안 보이게 하고 싶으시면 첫 번째 항목에 체크하고

 

첫 번째 칸은 보이고 싶은 페이지의 주소를

 

두 번째 칸은 숨기고 싶은 페이지의 주소를

써 넣으시면 됩니다.

 

저는 그냥 아무 설정도 하지 않았습니다.

 

이후에

 

Active Tool

버튼을 눌러주셔서 

위젯을 생성해주시면 됩니다.

 

 

그러면 코드 생성 화면이 나타나게 됩니다.

 

티스토리는 An HTML Website에서 코드 따가시면 되고

워드프레스나 텀블러 등 다른 매체는

해당 이름 누르셔서 코드 가져가시면 됩니다.

 

빨간 점선 네모칸은 다른 설명 없이 코드만 보겠다고 하는 스위치입니다.

실행하셔도 되고 안 하시고 아래쪽으로 약간만 스크롤 하셔도 됩니다.

 

 

아래쪽으로 스크롤 하시면 이런 화면 나오는데

복사하고 붙여 넣기 하라는 말입니다.

 

네모칸의 내용을 복사하셔서

티스토리 편집 (관리) 화면으로 돌아옵니다.

 

HTML 편집 들어가셔서

 

Ctrl+F 누르신 후 </body> 입력하셔서 해당 부분 찾으세요

그리고 위에 복사한 내용을

바로 위쪽에 붙여 넣기 합니다.

 

 

이렇게요.

 

그러고 나면 끝입니다.

 

공유버튼 다느라 고생하셨습니다.^^

 

 

 

 

 

 

 

 

 

 

 공유하기 

 

 

좌측 아래 있는 공감 버튼 한번만 누질러 주세요~ 제발요 ㅠㅠ

여러분의 소중한 댓글은 사랑입니다^_^