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

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

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

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

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

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

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

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

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

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

<!-- 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 파일에서 적절한 위치에 추가하면 될 것입니다.

워드프레스 플러그인을 사용하지 않고 소셜 공유 버튼 추가하기

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

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

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

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

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

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

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

워드프레스 GeneratePress 후크 사용하기

마치며

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

참고



4 개 댓글

  1. 안녕하세요. 오랫만에 댓글 남기게 되네요. 필요가 없어서 사용 안하다가 이젠 필요 할듯 싶어 추가 하려고 합니다. 쉬운 방법을 소개해 주셔셔 감사합니다.

    응답
    • 오랜만이네요. 잘 지내고 계시죠?ㅎ

      플러그인을 사용하지 않고 직접 코드를 추가하고 싶은 경우에 고려해볼 수 있을 것입니다.
      저는 개인적으로 네이버 밴드에 공유하려고 코드를 만들어 사용하고 있습니다.

      응답
      • 역시 대단하십니다. 어서 CSS 배워야 하는데 바쁘다는 핑계로 못하고 있네요. 사실 시간을 내면 낼수 있는데 ..ㅠㅠ
        공부를 맘먹고 계획을 짜서 해봐야 겠네요 ^^

      • 인터넷에 나와 있는 코드를 응용하여 누구나 쉽게 만들 수 있습니다.ㅎ

        저도 파이썬을 공부하려 맘먹고 있지만... (바쁘다는 핑계로) 좀처럼 시간을 내지 못하고 있네요.ㅠㅠ