워드프레스 SNS 공유 기능은 방문자가 글을 읽다가 바로 외부로 공유할 수 있게 만드는 역할을 합니다. 특히 정보형 글이나 길이가 긴 콘텐츠는 본문 끝까지 내려가지 않는 경우도 많기 때문에, 일반적인 하단 공유 버튼만으로는 클릭이 잘 나오지 않는 상황이 생길 수 있습니다.
이럴 때 많이 사용하는 방식이 바로 워드프레스 SNS 공유 버튼 플로팅 사이드바입니다. 화면 좌측이나 우측에 고정된 상태로 따라다니기 때문에 사용자가 스크롤을 내려도 계속 보이게 됩니다. 실제로 정보형 블로그나 SEO 중심 사이트에서는 본문 내부보다 이런 플로팅 구조를 더 자주 사용하는 편입니다.
반대로 설정을 잘못하면 모바일 화면이 답답해지거나 본문 영역을 가리는 문제가 생길 수도 있습니다. 그래서 단순 설치만 하는 것보다 버튼 위치와 표시 방식까지 함께 정리하는 것이 중요합니다. 이번 글에서는 Social Pug 플러그인을 기준으로 워드프레스 SNS 공유 버튼을 플로팅 형태로 설정하는 과정을 이미지 순서대로 정리해보겠습니다.
목차
워드프레스 SNS 공유 버튼이 필요한 이유
공유 버튼은 단순 장식 요소가 아닙니다. 게시물이 외부로 퍼지는 흐름과 연결되는 부분입니다. 특히 아래와 같은 상황에서는 플로팅 방식이 더 자주 사용됩니다.
- 긴 본문 때문에 하단 공유 버튼 클릭률이 낮은 경우
- 모바일보다 PC 방문 비율이 높은 사이트
- 정보형 블로그처럼 스크롤 길이가 긴 콘텐츠
- Pinterest·Facebook 유입을 함께 노리는 경우
- 본문 내부 버튼 때문에 가독성이 떨어지는 경우
일반적인 본문 상단·하단 버튼은 글 흐름을 끊는 경우가 있는데, 워드프레스 SNS 공유 버튼 플로팅 사이드바는 본문 바깥에 배치되기 때문에 화면 구조가 상대적으로 깔끔하게 유지됩니다.
Social Pug 플러그인 설치 과정
워드프레스 관리자 화면에서 플러그인 → 새로 추가로 들어가면 Social Pug 플러그인을 검색할 수 있습니다. 공유 플러그인은 오래 방치된 경우가 많은데, 업데이트가 멈춘 플러그인은 충돌이나 속도 문제로 이어지는 경우가 있습니다.
특히 워드프레스 버전이 올라간 상태에서 오래된 SNS 플러그인을 사용하면 관리자 화면이 느려지거나 CSS 충돌이 발생하기도 합니다. 그래서 설치 전에 최근 업데이트 날짜와 활성 설치 수를 같이 확인하는 흐름이 중요합니다.
Social Pug는 플로팅 사이드바 구조가 단순한 편이라 복잡한 기능을 많이 추가하지 않아도 기본 공유 버튼 구성이 가능합니다.
설치 전에 체크할 부분
- 최근 업데이트 날짜 확인
- 현재 워드프레스 버전 호환 여부 확인
- 공유 기능 외 과도한 기능 포함 여부 체크
- 캐시 플러그인 충돌 여부 확인
- 모바일 표시 기능 지원 여부 확인
플로팅 사이드바 활성화 과정
플러그인을 활성화하면 관리자 메뉴 하단에 Social Pug 항목이 추가됩니다. 여기서 Toolkit과 Floating Sidebar 메뉴가 핵심 설정 영역입니다. 처음 설치하면 공유 버튼이 바로 나오지 않는 경우가 있는데 대부분 기능 활성화를 하지 않은 상태이기 때문입니다.
Toolkit 화면에서 플로팅 기능을 먼저 켜야 실제 사이트에 버튼이 표시됩니다. 이 과정을 건너뛰면 플러그인을 설치했는데도 화면 변화가 없는 상태가 계속될 수 있습니다.
플로팅 방식과 본문 방식 차이
Floating Sidebar
- 화면 좌측·우측 고정
- 스크롤 이동 시 계속 표시
- 긴 글에서 클릭 노출 유지
Inline Content
- 모바일 중심 사이트에서 자주 사용
- 본문 내부에 배치
- 일반 블로그형 구조
플로팅 공유 버튼 활성화 설정
Toolkit 설정 화면에서는 Floating Sidebar 기능을 활성화할 수 있습니다. 버튼을 켜야 플로팅 공유 버튼 기능이 실제로 작동합니다. 여기서 중요한 점은 단순히 공유 기능을 켜는 것이 아니라 화면 구조를 어떻게 가져갈지 결정하는 단계라는 것입니다.
본문 내부에 버튼을 넣으면 글 흐름이 끊기는 경우가 있는데 플로팅 구조는 본문 영역과 분리되기 때문에 읽는 흐름이 상대적으로 덜 방해됩니다. 특히 워드프레스 SNS 공유 버튼을 너무 많이 배치하면 CLS 문제나 화면 밀림 현상이 생기는 경우도 있기 때문에 위치를 단순하게 유지하는 편이 안정적입니다.
플로팅 방식 사용 시 체감 변화
- 화면 구조 단순화
- 공유 버튼 위치를 찾는 시간이 줄어듦
- 긴 글에서도 버튼 노출 유지
- 본문 가독성 유지
- 상단·하단 버튼 중복 감소
SNS 네트워크 추가 방법
Floating Sidebar 설정으로 들어가면 Select Networks 버튼이 보입니다. 여기서 사용할 SNS를 추가할 수 있습니다. 공유 버튼을 너무 많이 넣으면 오히려 클릭률이 분산되는 경우가 많습니다. 그래서 실제로는 Facebook, Twitter(X), Pinterest 정도만 사용하는 사이트도 많습니다.
특히 Pinterest는 이미지 중심 콘텐츠와 연결되는 경우가 많아서 지도·이미지·인포그래픽 게시물에서 같이 사용하는 경우가 많습니다. 버튼 순서는 드래그 방식으로 변경할 수 있기 때문에 가장 많이 사용하는 SNS를 위쪽에 배치하는 흐름으로 정리하면 됩니다.
플로팅 버튼 디자인 설정
이 화면에서는 버튼 모양과 위치를 설정할 수 있습니다. Button Shape에서는 둥근 형태나 원형 버튼 등을 선택할 수 있고, Position에서는 좌측·우측 위치를 지정합니다. 사이트 구조에 따라 좌측이 더 자연스러운 경우도 있고, 광고 영역 때문에 우측이 겹치는 경우도 있습니다.
그래서 실제 화면을 보면서 위치를 조정하는 과정이 필요합니다. 또한 모바일 표시 기능을 무조건 켜두는 경우 화면 폭이 좁은 기기에서 본문을 가리는 문제가 생길 수도 있습니다. 모바일 사용 비율이 높다면 표시 폭 제한도 같이 설정하는 흐름이 안전합니다.
자주 조정하는 항목
| 설정 항목 | 설명 |
|---|---|
| Button Shape | 버튼 모양 변경 |
| Button Position | 좌측·우측 위치 |
| Show Icon Animation | 아이콘 애니메이션 |
| Show on Mobile | 모바일 표시 여부 |
| Mobile Screen Width | 모바일 표시 폭 제한 |
공유 횟수 표시 설정
마지막 설정 화면에서는 공유 횟수 표시 여부와 게시물 타입별 노출 범위를 설정할 수 있습니다. 공유 개수 기능은 보기에는 좋지만 외부 요청이 늘어나는 경우도 있습니다. 특히 여러 SNS API 요청이 추가되면 속도에 영향을 줄 수도 있기 때문에 초기 사이트에서는 비활성화하는 경우도 많습니다.
또한 모든 페이지에 공유 버튼을 넣기보다 글(Post)만 표시하고 페이지(Page)에서는 제외하는 방식으로 정리하는 사이트도 많습니다. 불필요한 영역까지 공유 버튼을 표시하면 화면이 복잡해질 수 있기 때문입니다.
워드프레스 SNS 공유 버튼 설정 후 변화
설정을 완료하고 나면 본문 내부에 공유 버튼을 억지로 넣지 않아도 화면 한쪽에서 계속 노출되는 구조가 만들어집니다. 특히 긴 정보형 콘텐츠에서는 사용자가 원하는 시점에 바로 공유할 수 있기 때문에 하단 이동 없이 버튼 접근이 가능합니다.
반대로 너무 많은 SNS 버튼을 추가하면 화면이 복잡해질 수 있기 때문에 실제 사용하는 플랫폼 위주로 정리하는 편이 안정적입니다. 워드프레스 SNS 공유 버튼은 단순 기능 추가보다 화면 구조와 가독성을 같이 고려해서 설정하는 흐름이 중요합니다.
이번 방식처럼 플로팅 사이드바 형태로 정리하면 본문 흐름을 크게 건드리지 않으면서 공유 버튼을 유지할 수 있습니다.
▶ UpdraftPlus 플러그인으로 워드프레스 백업 설정하는 방법
