워드프레스 SNS 공유 버튼 만들기(카카오톡,네이버,페이스북 등)

워드프레스의 장점은 다양한 플러그인 설치를 통해 새로운 기능을 손쉽게 사용하는 것 이다. 내가 작성한 글들이 다른 사람들에게 더 빠르고 확실하게 전파되기 위해서는 방문자들의 편의를 제공해 주어야 하는데 이때 필요한 기능이 SNS 공유 버튼을 만드는 것이다.

워드프레스SNS버튼만들기

이번 포스팅에서는 ‘소셜 공유 버튼 By 코스모스팜’ 플러그인을 사용해 카카오톡, 네이버, 페이스북, 밴드, 트위터 등의 공유버튼을 만들어 보자.

워드프레스 SNS 공유 버튼 만들기

소셜 공유 버튼 설치

  1. 워드프레스 메인페이지에서 플러그인을 선택한다.
  2. 새로추가를 누른다.
  3. 위 사진에 보이는 ‘소셜 공유 버튼 By 코스모스팜’을 설치한다.

re20230813 211240

워드프레스 메인페이지에서 설정에 들어가 ‘소셜 공유 버튼’을 순서대로 선택한다.

워드프레스 소셜 공유버튼 설정 방법

re20230813 211301

소셜 공유 버튼 플러그인을 실행한 모습이다. 위 에서 포스트에 표시 항목에서 SNS 공유 버튼의 위치와 정렬 방법을 선택한다. 나는 포스팅 하단 그리고 가운데 정렬이 되도록 설정했다.

re20230813 211323

메뉴 아래쪽에 표시할 버튼과 순서가 보인다. 여기에서 자신이 표시하고자 하는 SNS 버튼을 선택하면된다. 드래그앤 드롭을 통해서 버튼의 순서도 조절이 가능하다. 나는 한국 사람들이 가장 많이 사용하는 네이버, 페이스북, 트위터, 밴드, 카카오톡만 선택했다.

카카오톡 공유 버튼 만들기

다른 SNS공유버튼은 플러그인에서 체크 한 것만으로 바로 사용이 가능하지만 ‘카카오톡의 경우 자바스크립트 키를 필요로 한다. 위 사진에서 카카오 JavaScript키 옆에 ‘카카오 앱 생성’을 누른다.

re20230813 211359

카카오 계정 로그인을 하면 위 화면이 나오는데 여기에서 빨간색 화살표로 표시된 앱 이름, 사업자명(본인이름)을 작성하고 필요한 곳에 체크한 후 저장을 눌러준다.

re20230813 211437

그럼 메인 화면이 위 사진처럼 나올 텐데 아이콘 혹은 이름을 선택해준다.

re20230813 211453

네이티브 앱 키, REST API키, JavaScript키, Admin키 등이 보인다. 우리에게 필요한 것은 JavaScript키이다 이 코드를 복사한다.

re20230813 211553

이제 워드프레스 소셜 공유 버튼 플러그인에 붙여넣어준 다음 ‘변경 사항 저장’을 눌러 설정을 마무리 한다.

이렇게 되면 블로그나 사이트에 작성된 모든 포스팅의 본문 하단에 아래와 같은 SNS 공유버튼이 만들어 진다.

re20230813 211623

위 사진처럼 표시되면 성공한 것이다. 이제 내 블로그에 방문한 사람들이 포스팅이 마음에 들었을 경우 지인들에게 공유하기 위해 혹은 자신의 개인 카카오톡에 보관하기 위해 손쉬운 공유가 가능해졌다.