티스토리와 구글 블로그 워드프레스에 네이버 공유하기 버튼 만드는 방법

SNS 플랫폼인 페이스북 및 구글 플러스와 같이 소셜 미디어 공유하기 버튼을 추가하면 글이 더욱 널리 퍼지는 데 도움이 됩니다. 네이버도 이런 기능을 제공합니다. 네이버 공유하기는 간단하니 한 번씩 확인하시고 티스토리 블로그/구글 블로그에 추가하시길 추천드립니다.

네이버 공유하기는 네이버 블로그, 네이버 카페, 네이버 포스트, 등 다양한 네이버 플랫폼에서 공유가 가능합니다.
네이버 공유하기 버튼을 추가하는 방법에 대한 자세한 안내는 아래 링크에서 확인하실 수 있습니다.

해당 링크를 들어가지 않고도 이 글만 보고도 따라하실 수는 있습니다만, 크기와 모양등을 바꾸시려면 한번 들어가 보시길 추천드립니다.

https://developers.naver.com/docs/share/navershare

그럼 두 가지 방법을 소개해 드립니다.

스크립트로 만들기

버튼 유형을 선택하면 코드가 생성됩니다. 그 코드를 skin.html에 넣으면 됩니다.

위의 내용을 넣으면 심플한 N 마크만 나와서 네이버로 공유하기라는 안내 문구를 추가하였습니다.

저의 경우 아래와 같은 코드로 추가했습니다.

<span>
  <div> 네이버로 공유하기 
	<script type="text/javascript" src="https://ssl.pstatic.net/share/js/naver_sharebutton.js"></script>
	<script type="text/javascript">
	new ShareNaver.makeButton({"type": "b"});
	</script>
	</div>
</span><br/>

이렇게 추가하고 나면 다음과 같이 "네이버로 공유하기" 라는 글자 뒤에 N 마크가 나타납니다.

링크로 만들기

스크립트를 이용하면 네이버에서 제공하는 버튼을 사용하게 됩니다. 만약 다른 이미지의 버튼을 사용하고 싶다면 링크를 이용해서 만드실 수 있습니다.

다음은 블로그 주소가 http://xxx.tistory.com, 이미지 이름이 naver_square_40x40.png일 때의 예제입니다.

이미지 이름은 업로드한 이미지 이름으로 변경하여 사용하시면 됩니다. 이미지 업로드는 [HTML/CSS 편집]의 파일 업로드에서 올리실 수 있습니다.

아래의 코드에서 xxx.tistory.com을 자신의 주소로 바꾸시면 됩니다. 혹시 이미지 파일 이름이 다르다면 그것도 꼭 수정하셔야 합니다.

스킨편집의 html 편집에서 다음의 코드를 찾아 그 밑에 위에서 생성한 코드를 넣습니다. 위에서 했던 것과 같이 본문글에 대한 치환자입니다.

#_article_rep_title_#와 #_article_rep_link_#는 실제 치환이 되어버려서.. #을 하나씩 양쪽에 뺐습니다. 실제 작업하실 때는 양쪽에 #을 하나씩 추가하셔야 합니다.

<p>
http://share.naver.com/web/shareView.nhn?url=http://xxx.tistory.com[#_article_rep_link_#]&title=[#_article_rep_title_#] " onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=600,height=600'); return false;">