[티스토리]네이버 공유 버튼 만들기(블로그,카페,포스트,폴라)

안녕하세요. 오늘은 네이버 공유 버튼을 만들어 보는 시간을 가져 보겠습니다.

바로 이버튼이죠!! 클릭하면 공유가 됩니다. 

몇 일전에 카카오톡 공유버튼을 만들었는데 이번에는 네이버의 공유 버튼도 만들어 보겠습니다.

최근에 네이버 공유 API 제공으로 블로그 공유뿐 아니라, 카페, 포스트, 그리고 폴라 서비스까지

손쉽게 공유 가능 하도록 개발 코드를 제공 해주었는데요.

오늘은 네이버에서 제공하는 공유 API를 응용해서 공유버튼을 하나씩 천천히 만들어보겠습니다.

누구나 손쉽게 만들 수 있으니 찬찬히 따라오세요!! ㅎㅎ

카카오톡 버튼이 궁금하시다면 아래 링크를 참고하세요.

http://cocosoft.kr/350 - [티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크)

본격적으로 시작해보자

우선 네이버 Developers 사이트에는

네이버 공유하기 API 관한 개발 가이드가 나와있습니다.

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

두가지 방식이 있는데 아래와 같은 버튼 유형을 원하신다면

네이버 개발 사이트에 들어가시면 더 손쉽게 코드 생성이 가능합니다.

"type": "a"	"type": "b"	"type": "c"	"type": "d"	"type": "e"	"type": "g"
size : 16 x 16	size : 20 x 20	size : 24 x 24	size : 30 x 30	size : 36 x 36	size : 40 x 40

네이버 공유 버튼 소스 코드

<span>
	<script type="text/javascript" src="http://share.naver.net/js/naver_sharebutton.js"></script>
	<script type="text/javascript">
	new ShareNaver.makeButton({"type": "a"});
	</script>
</span>

원하는 위치에 위 코드만 넣어주면 바로 공유 버튼이 생성됩니다.

가장 손쉽게 만들 수 있지만

공유버튼 디자인이 한종류이고 사이즈 조절도 제한 있다는 단점이 있습니다.

사각형 사이즈로 만드실 분들은 위와 같이 간단하게 코드를 붙혀넣기해서 만들면 됩니다.

공유버튼 이미지를 다르게 수정하고 싶으신분들은 아래를 따라오시면됩니다.

저도 직접 공유버튼을 넣어서 만들어 보겠습니다.

두 번째 방법!! 직접 이미지 넣어서 만들기

또 다른 방식은 코드를 사용해 직접 이미지 버튼을 만들어서 공유 버튼을 만드는 방법 입니다.

저는 티스토리에서 자체에서 제공하는 공유 플러그인 모양과 비슷하게 하기 위해서!!

직접 포토샵으로 네이버 공유 버튼을 만들었습니다.

요런식으로 말이죠!!

title 값은 선택이라고 했는데 이제는 바꿨는지 title 값도 없으면 오류가 뜹니다!

또한, 이미지 버튼을 만들 때는 네이버 로고 N스퀘어 가이드를 준수 해야합니다.

NAVER_SQUARE_Logo.zip	NAVER_SQUARE_Guide.zip

로고 파일과 가이드입니다.

개발사이트에도 올라와 있는데 혹시나 몰라서 올렸습니다!

위 예제를 티스토리에 맞게 적용시켜서 달아봅시다.

직접 만든 네이버 버튼으로 네이버 공유 버튼 소스 코드

<a href="http://share.naver.com/web/shareView.nhn?url=http://당신의아이디.tistory.com/358&title=[티스토리]네이버 공유 버튼 만들기(블로그,카페,포스트,폴라)" target="_blank">
		<img src="./images/당신의업로드한이미지파일명.jpg"></a>

생각 보다 간단하죠!!

ㅠ_ㅠ 저는 알아낸다고 혼자서 끙긍 그래도..

티스토리는 자체적으로 스킨 치환자를 제공하기 때문에 손쉽게 가능했습니다.

그.러.나

위 방법으로하면 새탭에 뜨거나 새창이 매우 크게 떠버립니다.

다른 공유하기 버튼들은 간단하게 팝업창이 뜨는데...

그래서 자바스크립트로 팝업창으로 공유하는 코드를 알아보았습니다.

직접 만든 네이버 버튼으로 네이버 공유 버튼 소스 코드[팝업창 방식]

<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" >
		<img src="./images/당신의업로드한이미지파일명.jpg"></a>

이런식으로 팝업창이 뜹니다!!

어때요? 쉽죠? 매우 간단하죠?!

진짜 카톡 버튼 만들기에 비하면 너무 깔끔하고 쉽게 간단하게 

공유 버튼이 만들어 졌습니다.. 역시 네이버느님.. 네이갓

부착 위치는 각자 꾸미려고 하는 부분이 다르기 때문에 직접 확인하고 html 영역에 부착을 하시며 됩니다.

저처럼 기사 본문 하단에 공유 버튼을 부착하고 싶으신 분들은

안녕하세요. 오늘은 네이버 공유 버튼을 만들어 보는 시간을 가져 보겠습니다.

바로 이버튼이죠!! 클릭하면 공유가 됩니다. 

몇 일전에 카카오톡 공유버튼을 만들었는데 이번에는 네이버의 공유 버튼도 만들어 보겠습니다.

최근에 네이버 공유 API 제공으로 블로그 공유뿐 아니라, 카페, 포스트, 그리고 폴라 서비스까지

손쉽게 공유 가능 하도록 개발 코드를 제공 해주었는데요.

오늘은 네이버에서 제공하는 공유 API를 응용해서 공유버튼을 하나씩 천천히 만들어보겠습니다.

누구나 손쉽게 만들 수 있으니 찬찬히 따라오세요!! ㅎㅎ

카카오톡 버튼이 궁금하시다면 아래 링크를 참고하세요.

http://cocosoft.kr/350 - [티스토리]카카오톡 공유 버튼 만들기(제목+썸네일+링크)

본격적으로 시작해보자

우선 네이버 Developers 사이트에는

네이버 공유하기 API 관한 개발 가이드가 나와있습니다.

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

두가지 방식이 있는데 아래와 같은 버튼 유형을 원하신다면

네이버 개발 사이트에 들어가시면 더 손쉽게 코드 생성이 가능합니다.

"type": "a"	"type": "b"	"type": "c"	"type": "d"	"type": "e"	"type": "g"
size : 16 x 16	size : 20 x 20	size : 24 x 24	size : 30 x 30	size : 36 x 36	size : 40 x 40

네이버 공유 버튼 소스 코드

<span>
	<script type="text/javascript" src="http://share.naver.net/js/naver_sharebutton.js"></script>
	<script type="text/javascript">
	new ShareNaver.makeButton({"type": "a"});
	</script>
</span>

원하는 위치에 위 코드만 넣어주면 바로 공유 버튼이 생성됩니다.

가장 손쉽게 만들 수 있지만

공유버튼 디자인이 한종류이고 사이즈 조절도 제한 있다는 단점이 있습니다.

사각형 사이즈로 만드실 분들은 위와 같이 간단하게 코드를 붙혀넣기해서 만들면 됩니다.

공유버튼 이미지를 다르게 수정하고 싶으신분들은 아래를 따라오시면됩니다.

저도 직접 공유버튼을 넣어서 만들어 보겠습니다.

두 번째 방법!! 직접 이미지 넣어서 만들기

또 다른 방식은 코드를 사용해 직접 이미지 버튼을 만들어서 공유 버튼을 만드는 방법 입니다.

저는 티스토리에서 자체에서 제공하는 공유 플러그인 모양과 비슷하게 하기 위해서!!

직접 포토샵으로 네이버 공유 버튼을 만들었습니다.

요런식으로 말이죠!!

title 값은 선택이라고 했는데 이제는 바꿨는지 title 값도 없으면 오류가 뜹니다!

또한, 이미지 버튼을 만들 때는 네이버 로고 N스퀘어 가이드를 준수 해야합니다.

NAVER_SQUARE_Logo.zip	NAVER_SQUARE_Guide.zip

로고 파일과 가이드입니다.

개발사이트에도 올라와 있는데 혹시나 몰라서 올렸습니다!

위 예제를 티스토리에 맞게 적용시켜서 달아봅시다.

직접 만든 네이버 버튼으로 네이버 공유 버튼 소스 코드

<a href="http://share.naver.com/web/shareView.nhn?url=http://당신의아이디.tistory.com&title=" target="_blank">
		<img src="./images/당신의업로드한이미지파일명.jpg"></a>

생각 보다 간단하죠!!

ㅠ_ㅠ 저는 알아낸다고 혼자서 끙긍 그래도..

티스토리는 자체적으로 스킨 치환자를 제공하기 때문에 손쉽게 가능했습니다.

그.러.나

위 방법으로하면 새탭에 뜨거나 새창이 매우 크게 떠버립니다.

다른 공유하기 버튼들은 간단하게 팝업창이 뜨는데...

그래서 자바스크립트로 팝업창으로 공유하는 코드를 알아보았습니다.

직접 만든 네이버 버튼으로 네이버 공유 버튼 소스 코드[팝업창 방식]

<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" >
		<img src="./images/당신의업로드한이미지파일명.jpg"></a>

이런식으로 팝업창이 뜹니다!!

어때요? 쉽죠? 매우 간단하죠?!

진짜 카톡 버튼 만들기에 비하면 너무 깔끔하고 쉽게 간단하게 

공유 버튼이 만들어 졌습니다.. 역시 네이버느님.. 네이갓

부착 위치는 각자 꾸미려고 하는 부분이 다르기 때문에 직접 확인하고 html 영역에 부착을 하시며 됩니다.

저처럼 기사 본문 하단에 공유 버튼을 부착하고 싶으신 분들은

본문 내용의 스킨치환자를 검색하셔서 아래부분에 부착을 하시면 됩니다.

부착한 공유버튼의 순서를 수정하기 위해서는 아래 포스팅을 보신다면

본문 하단 부분의 플러그인들의 위치를 쉽게 수정 가능 하실 것 같습니다.

http://cocosoft.kr/354 - [CSS]티스토리 하단 출처 이미지 넣기 및 위젯 순서 변경 정리!

그럼 다들 손쉽게 블로그의 콘텐츠를 공유할 수 있는 네이버 버튼을 만들어 보시길 바랍니다!!

저도 이제 앞으로 포스트 발행을 공유로 더 손쉽게 가능할 것 같습니다.^^

본문 내용의 스킨치환자를 검색하셔서 아래부분에 부착을 하시면 됩니다.

부착한 공유버튼의 순서를 수정하기 위해서는 아래 포스팅을 보신다면

본문 하단 부분의 플러그인들의 위치를 쉽게 수정 가능 하실 것 같습니다.

http://cocosoft.kr/354 - [CSS]티스토리 하단 출처 이미지 넣기 및 위젯 순서 변경 정리!

그럼 다들 손쉽게 블로그의 콘텐츠를 공유할 수 있는 네이버 버튼을 만들어 보시길 바랍니다!!

저도 이제 앞으로 포스트 발행을 공유로 더 손쉽게 가능할 것 같습니다.^^