콘텐츠로 건너뛰기

워드프레스 카카오톡 공유 버튼 넣기 (feat. 플러그인, 무료)

  • 네이버 블로그 공유하기
  • 카카오톡 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
워드프레스 카카오톡 공유 버튼 넣기 (feat. 플러그인, 무료)

안녕하세요. 애드센스스쿨 인돈사입니다. 웹서핑을 하다 보면 카카오톡이나 페이스북, 트위터와 같은 SNS에 내 포스팅을 공유할 수 있는 버튼들이 있는 사이트를 보신 적이 있지요? 오늘은 워드프레스 카카오톡 공유버튼을 넣는 방법에 대해서 알아 보려고 합니다.

설명하기에 앞서 워드프레스를 아직 경험해 보지 못한 분들이라면 아래의 ‘워드프레스 따라오세요’를 보면서 한번 따라해 보세요. 3일간 무료체험 기간이 주어지기 때문에 시도해 보는것 만으로는 비용이 들지 않습니다. 워드프레스도 해보면 별거 아니구나… 라고 느끼실겁니다.

📌 WP 따라오세요 (feat. 클라우드웨이즈)

들어가며

워드프레스 카카오톡 공유 버튼을 내 블로그에 넣는 방법은 몇가지가 있습니다. 저 역시 여러가지 방법을 시도해 봤고 그 중에 가장 빠르고 쉽게 배치 할 수 있다고 생각되는 방법 하나를 소개해 드리려고 합니다. 다른 방법들은 간단하게 소개정도만 해 드릴테니 직접 해 보시는것도 좋은 방법이라고 생각됩니다. 제가 오늘 설명해 드릴 방법은 플러그인을 이용하는 방법입니다.

카카오톡 공유 버튼 플러그인 설치하기

내 워드프레스에 카카오톡 공유 버튼을 설치할 수 있는 플러그인의 이름은 Addthis 입니다. 메뉴에 플러그인>>새로추가 버튼을 눌러서 ‘Addthis’ 라고 검색 해 주세요. (띄어쓰지 않고 검색어를 입력하세요)

addthis 검색을 하면 플러그인들이 몇개 나올것입니다. 그 중 우리는 Share Buttons 플러그인을 설치 해 보도록 하겠습니다. 설치하신 후 플러그인을 활성화 해 주세요.

Addthis 회원가입 및 버튼 설정하기

일단은 플러그인은 설치 해 두시고 공유버튼과 관련된 설정을 하기 위해서 홈페이지에 가입을 해야 합니다. 참고로 홈페이지에 접속할 때 쿠키에 접근을 허용할거냐는 질문이 나오는데, 저의 경우에는 허용을 눌렀는데요.. 이부분은 각자 판단해서 설정 하시면 됩니다.

📌 Addthis 홈페이지 바로가기 (회원가입 필요)

쿠키 접근과 관련한 설정을 마치고 나서 오른쪽 윗부분의 대시보드를 클릭해 줍니다. 이 메뉴는 로그인을 해야 볼 수 있는 페이지인데 아직 우리는 가입을 안했기 때문에 회원가입을 해야 합니다. 대시보드를 누르면 아래와 같이 로그인 화면이 나올겁니다.

아래쪽에 Sign Up 버튼을 누르시면 회원가입 할 수 있습니다. (또는 우측 상단에 Sign Up 버튼이 있습니다)

맨 위쪽부터 이메일주소 / 비밀번호 / 비밀번호 반복 / 나라 / 월간 페이지뷰(선택사항) 순서대로 입력하고 캡챠를 풀어주시고 Let’s Get Started 버튼을 누르면 시작할 수 있습니다. 회원가입이 다 되었다면 Addthis 메인 페이지로 이동해 주세요. 저의 경우에는 이미 가입이 되어 있기 때문에…. 메인페이지로 이동해서 대시보드를 눌렀습니다. 로그인 화면이 나오신다면 방금 가입한 아이디로 로그인 해 주시면 됩니다.

로그인을 했으면 우측 상단에 대시보드를 클릭하고 왼쪽 상단에 보시면 + 버튼과 함께 Add Profile 을 눌러서 프로필을 추가해 주도록 합니다.

Addthis 에서 1개의 프로필은 1개의 워드프레스라고 생각하시면 됩니다. 저는 wp-follow-me 라고 프로필 이름을 만들어 보도록 하겠습니다.

ADD 버튼을 눌러서 프로필을 추가해 줍니다.

이후 왼쪽 윗 부분에서 방금 만든 프로필로 설정하고 Tools 버튼을 눌러 주세요.

Addthis에는 웹사이트툴 말고도 Targeting Rules / Email Lists 기능이 있는데 사용해 본적이 없어서 정확한 기능은 잘 모르겠습니다. 오른쪽 파랑색 버튼인 ADD New Tool 버튼을 눌러주세요. 아니면 아래쪽에 + 버튼을 눌러도 상관없습니다.

추가하기 버튼을 누르면 아래와 같이 쉐어버튼과 팔로우버튼 등등등… 여러가지 기능을 가진 웹사이트 툴이 나옵니다.

우리는 워드프레스 카카오톡 공유버튼을 설치할것이니 가장 첫번째 버튼을 눌러줍니다.

왼쪽에 이런 설정화면이 나오고 오른쪽에는 블로그 미리보기? 화면이라고 생각하시면 됩니다. 자 지금부터는 여러분 각자 선호하는 방식이 다를테니 각 버튼을 눌러 보면서 내 홈페이지에 설치하고 싶은 워드프레스 카카오톡 공유하기 버튼을 설정하시면 됩니다. 워드프레스 따라오세요 사이트에는 제가 선호하는 버튼을 설정해서 넣어 보도록 하겠습니다. (하나씩 눌러서 설정해 보세요. 재미있으실거예요~)

저는 두번째 메뉴인 Inline 으로 카카오톡 공유 버튼을 설정하도록 하겠습니다.

두번째 메뉴를 누르고 Continue를 눌러 줍니다.

이번에는 공유될 버튼을 선택할 수 있는 화면입니다. 기본 설정은 Addthis에서 스마트하게(과연?) 정렬해 주는것을 숫자만 입력하는것입니다만…. 카카오톡 공유하기 버튼을 설정하려면 직접 설정해야 합니다. Seletec by You 버튼을 눌러주세요. 처음에는 페이스북, 트위터, 이메일, 핀터레스트, Addthis 이렇게 5개가 선택되어 있습니다. 아래쪽에 Add more services 버튼을 눌러서 카카오톡을 찾아 봅시다.

카카오 스토리와 카카오톡이 있네요. 둘 다 클릭해서 추가해 줍니다. 저는 네이버 라인도 찾아 보겠습니다.

네이버 라인도 있네요. 클릭해서 추가해 줍니다.

클릭하면 현재 추가되어 있는 나의 공유버튼들(?)이 나옵니다. 현재 8개 씩이나 되기 때문에… 저는 카카오스토리와 카카오톡, 라인, 페이스북, 트위터 이렇게 5개만 설정하도록 하겠습니다. 오른쪽에 x를 누르면 지워지고 SNS 아이콘을 누르고 위아래 움직이면 순서도 바꿀 수 있습니다.

카카오와 네이버 서비스를 선택한 후의 모습입니다. 사용하지 않는 서비스는 x를 누르고 위아래 순서 조정을 해 보겠습니다.

이제 버튼의 디자인을 설정 해 보도록 하겠습니다.

윗부분에 보시면 2번째 메뉴입니다. 버튼 디자인을 할 수 있는 메뉴인데 설정하면서 오른쪽 화면에서 미리보기 화면을 볼 수 있습니다.

워낙 많은 설정이 있을 수 있기 때문에… 설정에 관한 설명은 생략하도록 하겠습니다. 저는 반응형 / X 라지 크기 / 코너 라운딩처리는 최대치 / 버튼색깔은 기본색상 / SNS 이름은 숨기기 설정을 하였습니다.

오른쪽에 미리보기 화면을 보면 위와 같은 버튼이 생겼습니다. 축하합니다~ 아래쪽에 있는 Activate Tools 버튼을 눌러주세요.

축하합니다. 이제 설정은 끝났습니다. 우리 워드프레스에 설치하러 가 볼까요?

워드프레스 카카오톡 공유 버튼 설치하기

아까 처음에 Addthis 플러그인을 잘 설치하였다면 워드프레스 관리자 메뉴에 아래와 같이 Addthis 메뉴가 생겼을 것입니다. Home 을 눌러서 로그인 정보를 입력하는곳화면에 정보를 입력하고 로그인 해 주세요.

로그인이 완료되면 프로필을 선택하라는 화면이 나옵니다. 아까 만들어준 wp-follow-me 프로필을 선택합니다. 근데 제가 만든 프로필이 워드프레스 타입이 아니라고…. 선택하면 워드프레스 타입으로 업데이트 될것이라고 하네요. Confirm 버튼을 눌러줍니다.

로그인과 프로필 선택이 완료되면 아래와 같이 웹사이트 툴을 선택하는곳이 나옵니다. 이곳에서도 Share Tools를 선택해도 카카오톡 공유하기 버튼을 만들 수 있습니다. 같은 메뉴로 이동하게 됩니다. 우리는 공유 버튼을 이미 만들어 두었기 때문에 Share Buttons 메뉴로 이동 해 보도록 하겠습니다.

AddThis 메뉴에 3번째 메뉴인 Share Buttons 를 눌러 줍니다. 우리가 아까 만들어 둔 Share Buttons 가 있습니다. 마우스를 올리면 Edit 버튼이 나오는데 이것을 눌러줍니다.

우리가 만들었던 항목들이 잘 적용 되어 있는지 확인 해 봅시다.

저는 아까 만들었던 카카오톡 / 카카오스토리 / 라인 / 페북 / 트위터 이렇게 순서대로 잘 적용 되어 있군요. 참고로 플러그인에서도 추가하기 버튼을 눌러서 설정을 할 수는 있긴한데… 미리보기 화면을 실시간으로 보면서 만드는게 더 쉽기 때문에 홈페이지에서 만드는 법을 설명 드린것입니다.

아래쪽에 Position 버튼 위에 화살표를 눌러주시면 적용될 위치가 표시됩니다.

아래와 같이 홈페이지, 포스팅, 페이지, 카테고리 등등을 대상으로 위쪽(Above) 또는 아래쪽(Below)에 버튼을 추가할 수 있습니다. (체크하면 해당 위치에 버튼이 추가됩니다.) 저는 워드프레스 따라오세요 강의 사이트 홈페이지와 포스트, 페이지 위쪽에 카카오톡 공유하기 버튼을 추가해 보도록 하겠습니다.

모든 설정을 완료하였으니 오른쪽에 있는 Publish를 눌러줍니다.

확인하기

이제 설정이 완료되었습니다. 워드프레스 따라오세요 홈페이지에 접속해서 카카오톡 공유하기 설정이 잘 나오는지 확인을 해 보도록 하겠습니다.

📌 WP 따라오세요 (feat. 클라우드웨이즈)

오우 이뿌게 잘 적용된것을 볼 수 있습니다. 하나씩 눌러보니 PC에서 카카오톡 공유는 보안상 이유로 막혔다고 하는군요. (모바일에서는 잘 작동합니다.) 나머지 버튼들은 잘 작동합니다. PC 모바일도 적용하실 분은 스크립트로 공유버튼 넣기 컨텐츠를 참고하시기 바랍니다.

📌 워드프레스 카카오톡 공유하기 버튼 넣기 (feat. 스크립트)

다른 플러그인

워드프레스에 SNS 공유버튼을 넣는 플러그인들은 add this 외에도 몇가지 더 있습니다. koreaSNS 플러그인과 코스모스팜의 소셜공유버튼이라는 플러그인이 있는데요, 저도 설치해서 이것저것 만져 보았지만 잘 설정이 되지 않고 실패했습니다. add this가 잘 안되는 분들은 위 플러그인들을 검색해서 설치하고 설정 해 보시는것도 한가지 방법이 될 수 있겠네요! 참고로 워드프레스 따라오세요에는 add this가 아닌, 직접 스크립트를 이용한 방법으로 적용해 두었습니다. (add this는 컨텐츠를 작성하고 뺐습니다~)

마치며

이것으로 2회차에 걸쳐서 워드프레스에 공유버튼 넣기 강의는 끝났습니다. 플러그인으로 넣으셔도 좋고, 스크립트로 넣으셔도 괜찮습니다. 물론 공유버튼 안넣어도 괜찮습니다. 개취니깐요~ 워드프레스에 관련한 이런 저런 셋팅 등에 관련한 부분은 제가 컨텐츠로 작성해 드리거나 또는 WP팔로워즈 소통방 등에서 활발하게 질문과 답변이 오가고 있으니 혼자하기 힘드신 분이라면 WP 팔로워즈에 가입하셔서 함께 으쌰으쌰 해 보면 좋을것 같습니다!

📌 WP 팔로워즈 모집 안내
📌 클라우드웨이즈 서비스 유료전환 회원 추가혜택 안내(feat. WP팔로워즈)

'WP 따라오세요'에는 쿠팡파트너스 등 제휴링크가 포함되어 있으며 수수료를 제공받을 수 있습니다.