본문으로 바로가기

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


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

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


최근에 네이버 공유 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스퀘어 가이드를 준수 해야합니다.


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

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


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


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


<a href="http://share.naver.com/web/shareView.nhn?url=http://당신의아이디.tistory.com[##_article_rep_link_##]&title=[##_article_rep_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 영역에 부착을 하시며 됩니다.


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


[##_article_rep_desc_##]


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

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

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

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



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

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

신고

댓글을 달아 주세요

  1. BlogIcon Mir(whdghks913) 2016.02.20 01:00 신고

    감사합니다~

  2. BlogIcon 로빈우드 2016.03.09 17:02 신고

    이상하게 css에서 아래, 위 전부 붙여봐도
    주인장님처럼 안 나오고 위치가 다른 곳에 갑니다 ㅠㅠ 어떻게 해결해야 하나요??
    한 군데 씩 다 해보고 안 돼서 질문드립니다...

    • BlogIcon COCOSOFT COCO Media 2016.03.09 17:06 신고

      http://cocosoft.kr/354 이포스팅을 보셨나요 여기한 번 보시고
      티스토리 하단 추천 위젯 플러그인 순서 정리 코드부분을 한번 참고해서 살펴보세요^^

      자체플러그인들의 위치가 고정되어있어서 강제로 스크립트로 앞뒤로로 붙혀줘야합니다!! 보통 라이크버튼 앞뒤로 붙히면 되는데 미발행글은 나오지 않겠죠?

  3. BlogIcon 로빈우드 2016.03.09 19:33 신고

    코코소프트님~! 알려주신 링크 타서 공부하니까 거의 다 알겠는데
    이것 좀 도와주세요 ㅠㅠ

    1. 위에 네이버 버튼 그 크기를 알툴바로 캡쳐를 해서 '파일업로드'에 올리면 크기가 커져요.
    크기를 코코소프트님 처럼 (카카오스토리/트위터/페이스북 같은 크기로 하려면 어떻게 해야 하나요?)

    2. 이미지 업로드 했을 때 가운데 배치하는 법이 있을까요?
    <center>

    <div class="foot-source" style="text-align: center";>
    <img src="./images/cocosoft_kr_20160309_184259.jpg" style="max-width: 100%;height: auto;" class="img-responsive">
    </div>

    </center> 이렇게 <center> </center>로 해도 왼쪽정렬로만 되더라구요..

    답변주시면 정말정말 감사하겠습니다 ㅠㅠ

    • BlogIcon 로빈우드 2016.03.09 19:35 신고

      아~!! 세 번째 질문도 있습니다.
      카카오스토리 / 트위터 / 페이스북 아이콘 아래에다가 넣으려면
      어떻게 해야 하는지도 궁금합니다.

      초보여서 죄송합니다..

    • BlogIcon COCOSOFT COCO Media 2016.03.09 19:54 신고

      http://cfile2.uf.tistory.com/image/234B264456C4AB912BCC83

      이아이콘을 사용해보세요 첫번째 질문은 ㅠ_ㅠ 잘모르겠습니다. 답변이 되었는지 모르겟네요 ㅠㅠ

      <img src="./images/파일" style="width:66px;height:30px">
      이런식으로만 넣어주세요!!

      <div class="foot-source" style="text-align: center";>

      두번째 질무은 style에 를 넣어주면 될 것 같네요.

      <div class="foot-source" style="text-align: center;margin:0 auto !important;">
      저도 자세히는 모르지만 웹표준에 관련된 태그로 <center> 태그는 html5에서는 사라져서 사용을 권장하지 않는다구하더라구요. 그래서
      <div class="foot-source">
      <img>
      </div> 로 만들고 나서 CSS 편집에 들어가서

      .foot-source{
      text-align: center;
      margin:0 auto !important;
      }
      이런식으로 정리해주시면 깔끔합니다^^!

      3번째는

      tt-share-entry-with-sns 클래스가 티스토리 소셜 공유 클래스셀렉터입니다. 그래서

      <script type="text/javascript">$(".tt-share-entry-with-sns").after($(".foot-source"));</script>
      </body>

      이렇게 /바디 위에 넣어주면 좋을 것 같네요!!

  4. BlogIcon 로빈우드 2016.03.09 23:55 신고

    코코소프트님 친절한 답변 감사합니다 :)
    덕분에 쉽게 달았습니다. 정말 제가 본 티스토리 강좌 중에서
    코코소프트님처럼 쉽고 답변도 친절하게 달아주시는 분은 없는 듯 싶습니다.
    블로그도 너무 예쁘구요 ㅎㅎ

    마지막으로 질문 하나만 더 드리면
    네이버 버튼을 클릭해도 네이버로 공유하는 창이 안 나오는데
    이게 어떻게 해야 되는 건가요? 위에 본문 읽어봐도 모르겠어서 질문드립니다.
    제가 네이버아이디가 : jotomoto이고 / 스킨에 올린 네이버버튼 주소가 : /images/naver.png 이거입니다.

    현재 html창에 올린 태그는
    <div class="foot-source">
    <img src="./images/naver.png">
    </div>

    이렇게 올린 상태입니다. 한 번만 더 부탁드리겠습니다 (__)(--)(__)

    • BlogIcon 로빈우드 2016.03.10 00:05 신고

      위의 '직접 만든 네이버 버튼으로 네이버 공유 버튼 소스 코드[팝업창 방식]' 여기에 해당하는 태그들을 입력해줘야 될 것 같은데 이 소스 안에는 네이버 아이디가 안 들어가는데 그래도 상관 없나요? 그리고 위치는 어디에다가 넣는 건지 궁금합니다 +ㅁ+

    • BlogIcon COCOSOFT COCO Media 2016.03.10 02:18 신고

      이미지는 잘넣으셨네요!! <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>

      이런식으로 감싸면 됩니다!!

  5. BlogIcon 로빈우드 2016.03.10 07:55 신고

    코코소프트님 될 때까지 해보겠습니다~!!!!

    다름이 아니라 답변해주신 태그에다가 이미지 주소 넣어서 해보니까
    이제 팝업창도 잘 뜨고 이미지도 잘 나오는데 문제는 또 위치가 왼쪽 정렬로 나오는 문제가 나오네요.

    기존에 팝업창 안 뜨고 가운데 정렬한 거는
    <div class="foot-source">
    <img src="./images/naver.png">
    </div>
    이거인데 이거를 삭제했거든요? 근데 html 맨 아래에 넣은 태그들 있잖아요?

    • BlogIcon 로빈우드 2016.03.10 07:56 신고

      <script type="text/javascript">$(".daum_like_wrapper").after($(".foot-source"));</script>
      <script type="text/javascript">$(".tt-share-entry-with-sns").after($(".foot-source"));</script>

      </body>

      </body> 위에 넣은 순서정리 태그들 말이에요.
      원래 거를 삭제하니까 'foot-source'와 연동이 안 돼서 정렬이
      안 되는 것 같은데 새로운 태그들하고 연동을 시키려면
      </body> 위에 어떻게 정렬을 시켜야 하나요??

    • BlogIcon COCOSOFT COCO Media 2016.03.10 11:39 신고



      <div class="foot-source">
      <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></div>

      이렇게 div 태그로 감싸주시면주시면 div 의 foot-source 라는 이름을 가진 박스안에 네이버 버튼이 위치하게 됩니다.

      그리고 CSS 편집에 들어가 가장 마지막에

      .foot-source{
      position: relative;
      display: table;
      margin-left: auto;
      margin-right: auto;
      }
      이렇게 넣어서 속성을 주셔서 가운데 정렬을 하시면 됩니다.

      마지막으로

      다른 정렬 스크립트는 다지우시고

      <script type="text/javascript">$(".tt-share-entry-with-sns").before($(".foot-source"));</script>

      바디 위에 이거 하나만 주시구요. 한번 확인해보세요^^

  6. BlogIcon 로빈우드 2016.03.10 12:53 신고

    엉엉... 코코소프티님 진심으로 감사드립니다 ㅠㅠ
    덕분에 무사히 달았어요.
    이렇게 티스토리에서 답변 달아주신 분은 처음이에요.
    정말정말 고맙습니다. 복 받으실 거예요 ㅎㅎ
    앞으로도 자주 찾아오겠습니다. 코코소프트님 최고 bbbb
    (링크 추가하고 가겠습니다_

  7. BlogIcon 쌍팔년용띠 2017.01.03 21:31 신고

    공유버튼이 아주 깔끔하네요 이제 블로그 막 시작했는데,
    티스토리는 너무 어렵네요 ㅎㅎ 많이 배우러 즐겨찾기 해놓고 자주 들릴게요~

  8. BlogIcon 프라임마켓 2017.10.12 22:45 신고

    안녕하세요. 게시글 잘보고 네이버 공유하기 버튼 및 위치도 정확히 생성했습니다.
    제가 궁금한 것은 공유하기 버튼을 통해 공유하면
    네이버 카페에서 확인시 박스형태로 링크형식으로 생기더라고요.
    혹시 네이버카페에서 티스토리본문글이 그대로 옮겨져서 퍼가는 것은 안될까요?

    꼭 네이버카페에서 링크통해서 티스토리까지 와야 컨텐츠를 볼 수 있는 것인지 알고 싶습니다.

티스토리 툴바