[워드프레스] 플러그인을 사용하지 않고 소셜 공유 버튼/네이버 블로그 공유 버튼을 추가하는 방법

Last Updated: 2023년 10월 11일 | | 15개 댓글

워드프레스에서는 다양한 소셜 공유 플러그인이 제공됩니다. 하지만 보통 SNS 공유 플러그인은 리소스를 많이 차지하여 사이트 속도에 부정적인 영향을 미칠 수 있습니다. 해외의 어떤 사이트의 글에서 소셜 공유 플러그인을 삭제하라는 글을 본 적이 있습니다.

실제로 '가볍다'고 선전하는 소셜 공유 버튼 플러그인을 추가해서 테스트해보면 속도에 영향을 미치는 것을 확인할 수 있었습니다. 플러그인을 모두 테스트하여 괜찮은 것을 고르면 좋겠지만 그럴 시간도 없고 해서 최근 이 블로그의 테마를 유료 테마에서 무료 테마로 바꾸면서 소셜 공유 버튼도 삭제하고 별도의 플러그인을 설치하지 않고 있었습니다.

이 블로그에 사용된 소셜 공유 버튼과 URL 복사 버튼의 코드를 개선하여 공개했습니다. 최종 버전은 이 글을 참고하시기 바랍니다.

플러그인을 사용하지 않고 SNS 공유 버튼 추가하기

하지만 아무래도 SNS 공유 기능이 필요할 것 같아서 직접 코드를 사용하여 SNS 공유 버튼을 추가하는 방법을 검색해보았습니다. 그래서 "How to Create Social Sharing Button without any Plugin and Script Loading? WordPress Speed Optimization Goal"라는 글에서 제대로 작동하는 코드를 발견할 수 있었습니다. 제목에서 알 수 있듯이 플러그인과 스크립트 로드 없이 소셜 공유 버튼을 만드는 방법을 설명하고 있습니다. 스크립트를 로드하지 않으니 아무래도 속도에 미치는 영향이 최소화되는 것 같습니다. 코드를 그대로 적용하면 개별 글과 페이지(그리고 블로그 페이지)에 소셜 공유 버튼이 추가됩니다.

저는 위 링크의 코드를 약간 수정하여 개별 글에서만 소셜 공유 버튼이 표시되도록 하고 필요 없는 "Buffer"와 "Pin It" 버튼은 삭제했습니다. 대신 네이버 블로그 공유 버튼을 추가했습니다.

Added Social Sharing Button without using any plugin - 플러그인 없이 공유 버튼 추가하기

트위터와 네이버에서 테스트를 해 보니 트위터는 잘 되지만, 네이버는 제목 부분의 한글이 깨지네요. 왜 네이버만 제목이 깨지냐고요??? 그럼 할 수 없죠. 직접 소스를 바꿀 수밖에요. 네이버 제목 부분을 다르게 처리해주도록 조금 소스를 바꾸었습니다. (페이스북과 Google+는 테스트를 해보지 않았습니다. 아마 문제 없이 잘 될 것 같습니다만, 혹시 문제가 되면 아래에 댓글을 통해 알려주시기 바랍니다.)

네이버 공유 버튼 추가하기

네이버 블로그 공유 버튼을 추가하려면 다음 라인을 추가해주면 됩니다.

$naverURL = 'http://blog.naver.com/openapi/share?url='.$crunchifyURL.'&title='.$currentnavertitle;

그리고 제목 부분은 다음과 같이 조금 수정했습니다.

$currentnavertitle = encodeURIComponent(get_the_title());

encodeURIComponent 함수는 다음과 같이 정의하도록 합니다.

function encodeURIComponent($str) {
$revert = array('%21'=>'!', '%2A'=>'*', '%27'=>"'", '%28'=>'(', '%29'=>')');
return strtr(rawurlencode($str), $revert);
}
// Reference: stackoverflow

네이버 제목 부분이 깨지는 문제를 처리하느라 조금 시간을 소비했지만 문제를 해결하고 나니까 뿌듯하네요. (이번 말까지 처리해야 할 큰 프로젝트가 있어서 바쁜데 왜 이런 데 시간을 소비하는지 모르겠네요...)

이 방법은 플러그인을 설치하지 않고 소셜 공유 버튼을 추가하려는 경우에 매우 유용합니다.

추가

이 블로그에 카카오 스토리 공유 버튼을 추가로 추가했습니다. Kakao Story 공유 버튼을 추가하는 방법은 이 글을 참고하시기 바랍니다.

대부분의 트위터 공유 플러그인과 위에서 제시된 방법에서 URL에 한글이 포함된 경우 공유된 트위터 게시글에서 링크가 제대로 작동하지 않는 문제가 발생합니다. 이 경우 urlencode 함수를 사용하여 주소를 인코딩해주면 문제가 해결됩니다(참고).

참고:

15 개 댓글

Leave a Comment

  1. 티스토리 공감 단추처럼 로그인 필요 없이 공감을 표시할 수 있는 그런 단추를 달 방법은 없을까요?
    페이스북 엄지 단추나 워드프레스 별표단추는 계정 있는 사람들만 이용할 수 있으니까요.

    응답

  2. 안녕하세요?
    먼저 명절 잘 보내시고 새해 복 많이 받으시기 바랍니다.

    이전 댓글에서 이 게시글을 말씀하시어 여기에 와 봤습니다.
    도움이 되는 글 감사드리면 말씀하신 코드 예제를 받아볼 수 있을까요?

    메일 주소는 입니다.

    미리 감사드립니다.

    응답