워드프레스에 SNS 점유율 버튼을 간단하게 추가하는 방법

워드프레스에 SNS 점유율 버튼을 간단하게 추가하는 방법

반응형

Web 사이트는 SEO대책도 중요하지만 SNS를 활용한 마케팅도 매우 중요합니다.

특히 미디어나 블로그 등은 투고에 SNS 점유율 버튼을 설치함으로써 SNS에서 접속 업을 늘리기를 기대할 수 있습니다.

이번에는 WordPress사이트에 SNS 점유율 버튼을 추가하는 방법 소개를 하고 싶습니다.

SNS 점유율 버튼을 설치하는 방법

WordPress사이트에 SNS 점유율 버튼을 추가하는 방법은 크게 2가지 방법이 있습니다.

플러그 인을 사용하고 SNS 점유율 버튼을 추가하는

플러그 인 없이 SNS 점유율 버튼을 추가하는

플러그 인을 사용하면 간편하게 SNS 점유율 버튼을 추가할 수 있지만 세부 디자인의 조정을 할 수 없기 때문에 직접 커스터마이즈 하여 설치할 경우는 플러그 인을 사용하지 않고 템플릿 파일을 편집하고 SNS 점유율 버튼을 설치하는 방법이 추천입니다.

다만 템플릿 파일의 편집은 잘못된 코드를 기술하면 오류가 발생하는 원인이 되기 때문에 주의하고 편집하도록 하세요.

플러그 인을 사용하고 SNS 점유율 버튼을 추가한다.

WordPress사이트에 SNS 점유율 버튼을 추가할 수 있는 플러그 인은 여러 가지가 있는데 추천의 플러그 인을 소개하겠습니다.

Share Buttons by AddThis

디자인이 예쁘다

200종류 이상의 SNS에 대응

플로팅 단추도 추가 가능

AddThis는 유명한 WordPress플러그 인으로, 버튼의 외모도 갖추고 있으며, 각종 사이트에 적합한 버튼을 설치할 수 있습니다.

또 점유율 수를 표시하는 기능도 있고 SNS상에서 공유하고 있는 횟수를 단추 위에 표시하는 것도 있습니다.

다음은 실제로 표시되는 SNS 점유율 버튼의 샘플입니다.

AddToAny Share Buttons

100종류 이상의 SNS에 대응

버튼의 외모를 잘게 커스터마이즈 가능

플로팅 단추도 추가 가능

AddToAny도 대응하는 SNS의 가짓수가 많고 심플한 SNS 점유율 버튼을 쉽게 설치할 수 있다는 점에서 인기가 높은 플러그 인입니다.

버튼의 사이즈는 설정 화면에서 쉽게 변경할 수 있어 추가 CSS와 JavaScript도 관리 화면에서 기술하는 것이 가능입니다.

다음은 AddToAny의 SNS 점유율 버튼 표시 샘플입니다.

플러그인 없이 SNS 점유율 버튼을 추가하는 방법

플러그 인 없이 SNS 점유율 버튼을 추가하는 경우는 템플릿 파일을 편집합니다.

포스팅 페이지에 SNS 점유율 버튼을 설치할 경우는 single.php라는 파일을 편집합니다.

그 이외의 페이지에서도 각기 대응되는 템플릿 파일을 편집하면 마찬가지로 SNS 점유율 버튼을 설치하는 것이 가능합니다.

먼저 템플릿 파일을 열고 SNS 점유율 버튼을 표시하고 싶은 장소에 다음 코드를 그대로 붙이세요.

최소한의 디자인을 갖춘 CSS는 다음과 같습니다.

필요에 응하고, 스스로 편집하고 사용하십시오.

이쪽은 Font Awesome을 사용하고 아이콘 표시를 하기 때문에 그대로 아이콘을 표시하는 경우는 Font Awesome의 도입이 필요합니다.

반응형

from http://u-m-r-u-m-r.tistory.com/103 by ccl(A) rewrite - 2021-09-05 08:59:04