플러그인을 사용하지 않고 소셜 공유 버튼 추가하기 (네이버, 카카오톡)

워드프레스에서는 플러그인을 사용하여 쉽게 소셜 공유 버튼을 추가할 수 있습니다. 네이버, 카카오톡, 페이스북, 트위터, 카카오스토리 등으로 공유하는 버튼을 추가하고 싶은 경우 Korea SNS나 소셜 공유 버튼 By 코스모스팜 플러그인을 사용할 수 있습니다. 플러그인을 사용하지 않고 네이버 공유 버튼을 표시하고 싶은 경우 아래의 내용을 참고해보세요.

[ 이 글은 2023년 5월 30일에 최종 업데이트되었습니다. ]

가볍고 빠른 소셜 공유 버튼 플러그인

워드프레스(WordPress) 사이트에서는 다양한 소셜 공유 플러그인을 이용할 수 있습니다. 소셜 공유 플러그인을 설치하면 사이트 속도에 영향을 미칠 수 있습니다. 사이트에 영향을 최소화하기 위해 이전 글에서 소개한 Social Media Feather라는 플러그인으로 바꾸었습니다.

• 빠른 워드프레스 소셜 공유 플러그인

하지만 네이버 밴드에 글을 공유하고 싶어 방법을 찾아보니 플러그인을 수정하는 것이 쉽지 않아 보였습니다. 그래서 직접 코드로 추가하기로 했습니다.

코드로 워드프레스 포스트에 소셜 공유 버튼 추가하기

오래 전에 이 블로그에서 플러그인을 사용하지 않고 네이버 공유 버튼을 추가하는 방법에 대해 소개한 적이 있습니다.

• 플러그인을 사용하지 않고 소셜 공유 버튼/네이버 블로그 공유 버튼을 추가하는 방법

위의 글에 소개된 방법을 응용해도 될 것 같습니다. 저는 티스토리 블로그에서 SNS 공유 버튼을 표시하기 위해 사용되고 있는 코드를 응용하여 이 블로그에 페이스북, 트위터, 네이버, 네이버 밴드, 카카오스토리 등에 공유할 수 있는 버튼을 추가했습니다. 티스토리 꾸미기 - SNS 공유 버튼 만들기라는 글에 소개된 코드를 참조했습니다.

아래의 코드를 개선한 최종 코드를 "이 워드프레스 블로그에 사용된 SNS 공유 버튼 & URL 복사 버튼"에서 확인할 수 있습니다. URL 복사 버튼 또한 표시할 수 있습니다.

워드프레스에서는 다음 같은 코드를 원하는 위치에 추가하면 됩니다.

<!-- SNS 공유 버튼 -->
											<div class="sns-go">
												<ul>
													<li>
														<a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver" rel="nofollow"><img src="../images/naver.png" width="35px" height="35px" alt="네이버 블로그 공유하기"></a>
													</li>
													<li>
														<a href="#" onclick="javascript:window.open('http://band.us/plugin/share?body='+encodeURIComponent(document.title)+encodeURIComponent('\r\n')+encodeURIComponent(document.URL)+'&route='+encodeURIComponent(document.URL), 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="네이버 밴드에 공유하기" rel="nofollow"><img src="../images/band.png" width="35px" height="35px" alt='네이버 밴드에 공유하기'></a>
													</li>
													<li>
														<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" rel="nofollow"><img src="../images/facebook.png" width="35px" height="35px"  alt="페이스북 공유하기"></a>
													</li>
														<li>
														<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" rel="nofollow"><img src="../images/twitter-icon.png" width="35px" height="35px"  alt="트위터 공유하기"></a>
													</li>																						
													<li>
														<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory" rel="nofollow"><img src="../images/kakao.png" width="35px" height="35px" alt="카카오스토리 공유하기"></a>
													</li>
												</ul>
											</div>

공유 버튼의 이미지 경로는 적절히 수정합니다.

위의 코드를 포스트 상단이나 포스트 하단에 추가할 수 있을 것입니다. 추가하는 방법은 테마에 따라 조금씩 다릅니다. 차일드 테마를 만들고 보통 single.php 파일이나 single-content.php 파일에서 적절한 위치에 추가하면 될 것입니다.

그리고 CSS 코드를 사용하여 SNS 공유 버튼들을 나란히 배열할 수 있습니다. 예를 들어, 이 블로그에서는 다음과 같은 CSS 코드를 사용했습니다.

/* SNS 공유 */
.sns-go ul {
  list-style-type: none;
  margin: 40px 0 0 0;
  padding: 0;
  overflow: hidden;
}

.sns-go li {
  float: left;
	padding-right: 5px;
}

.sns-go img {
    border-radius: 5px;
    width: 35px;
}

.single .entry-content {
	margin-top: 0.6em;
}

워드프레스에서 CSS 코드를 추가하는 방법은 여기를 참고해보세요. 위와 같은 코드를 사용하면 다음 그림과 비슷하게 공유 버튼 이미지가 표시될 것입니다.

위의 코드를 이용할 경우에 문제가 있을까 싶어 구글을 검색해보니 비슷한 방법으로 플러그인을 사용하지 않고 워드프레스에 SNS 공유 버튼을 추가하는 방법을 설명한 글들이 검색되네요. 위의 방법으로 페이스북, 트위터, 네이버 밴드에 글을 공유했을 때 아직까지는 문제없이 글이 잘 공유되고 있습니다. 혹시 문제가 있으면 아래 댓글로 알려주세요.

2021년 8월 추가: 카카오톡 공유 버튼 추가하기

카톡 공유 버튼을 추가하고 싶은 경우 Korea SNS와 같은 플러그인을 사용하면 편리하게 추가가 가능합니다. 플러그인을 사용하지 않고 추가하려는 경우, 위의 코드에 다음 코드 스니펫을 적절한 곳에 추가하도록 합니다.

<li>
<a href="#" onclick="shareKatalk();"><img src="../images/kakaotalk.png"></a>
</li>

그리고 다음 코드를 </body> 바로 앞에 추가합니다.

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<!-- 카카오톡 공유 JavaScript -->
<script>
// 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('JavaScript 키');
function shareKatalk() {
<!-- 카카오 Link 공유 API 사용-->
Kakao.Link.sendScrap({
requestUrl: location.href
});
};
</script>

JavaScript 키는 카카오 개발자 페이지(developers.kakao.com/)에 접속하여 개발자 계정으로 가입한 후, <내 애플리케이션>에서 애플리케이션을 추가하면 생성됩니다. 애플리케이션을 추가하고 Web 플랫폼을 등록해야 제대로 작동합니다.

위와 같이 코드를 추가해도 카톡 공유 버튼이 제대로 작동하지 않으면 위의 자바스크립트 코드를 <head>...</head> 사이에 추가하여 테스트해보시기 바랍니다.

자바스크립트 때문에 페이지 로딩 속도가 느려지는 경우에는 워드프레스에서 js 스크립트 파일과 스타일시트를 올바르게 로드하는 방법을 참고하여 자바스크립트를 로드해볼 수 있습니다.

워드프레스 GeneratePress 테마에 소셜 공유 버튼 추가하기

GeneratePress 테마를 사용하는 경우 후크를 사용하여 쉽게 원하는 위치에 코드를 추가할 수 있습니다. GeneratePress 테마에서 지원하는 훅에 대해서는 "GeneratePress 테마 후크 사용하기"를 참고해보시기 바랍니다.

저는 작업을 쉽게 하기 위해 GeneratePress 프리미엄 버전에서 제공하는 Elements를 사용하여 코드를 추가했습니다. 무료 버전을 사용하는 경우에는 테마의 함수 파일에 코드를 만들어 추가하면 됩니다.

Hook에서 소셜 공유 버튼이 표시될 위치의 후크를 지정하도록 합니다. after_entry_title을 선택하면 글 제목 아래에 표시됩니다. 글 하단에 표시하려면 after_content를 선택하면 됩니다.

그리고 Display Rules에서 포스트에만 공유 버튼이 표시되도록 규칙을 설정합니다.

업데이트: 이 블로그에 사용된 SNS 공유 버튼

"워드프레스 주소 복사 버튼 추가하기" 글의 "SNS 공유 전체 코드 (네이버, 카카오 & 주소 복사 버튼 포함)" 섹션에서 이 블로그에 사용된 소셜 공유 버튼 코드를 확인할 수 있습니다.

뉴스페이퍼 등 일부 테마에서는 자체적으로 소셜 공유 버튼 기능을 제공하므로 테마에서 제공하는 기능을 사용할 수 있습니다. 뉴스페이퍼에서는 네이버, 카카오 스토리 등의 공유 버튼도 포함되어 있습니다.

마치며

이상으로 워드프레스에서 플러그인을 사용하지 않고 소셜 공유 버튼을 표시할 수 있는 방법 중 하나에 대해 설명해보았습니다. 이런 작업이 어렵게 느껴지면 Korea SNS와 같은 워드프레스 플러그인을 사용하면 별다른 고민 없이 네이버 등에 공유할 수 있는 소셜 공유 아이콘을 표시할 수 있습니다.

참고

• 워드프레스 뉴스페이퍼 (Newspaper) 테마의 네이버 공유 기능
• 워드프레스 소셜 공유 아이콘을 붙박이로 고정하는 방법