티스토리 블로그에 네이버 공유하기 버튼 넣기

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

안녕하세요, 이것이궁금블로그입니다. 

 

티스토리 블로그를 운영하다보면 아쉬운점이 하나 있는데요,

 

그건 바로 네이버공유하기가 지원이 되지 않는 점입니다. 

 

우리나라 사람들이 네이버를 많이 이용하고 있다보니

 

네이버 블로그로 퍼가기나 네이버카페로 퍼가기를 하고싶을 때가 종종 있는데요,

 

티스토리에서는 이 기능이 지원되지 않다보니 아쉬울때가 참 많습니다. 

 

네이버로 공유하기를 달게 되면 아무래도 여러 사용자들에게 편리하게 이용이 될것 같아서

 

네이버 공유하기 버튼을 달아보게 되었습니다. 

 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

네이버 공유하기는 위에 있는 이미지의 순서로 진행이 되는데요, 

 

네이버 개발자센터에서 자세하게 안내가 되어 있습니다. 

 

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

네이버 공유하기 개발가이드

 

하지만 티스토리에 연동을 하려면 자세한 설명이 나와있지 않아서 여기저기 둘러봐야 합니다. 

 

티스토리 스킨 편집을 이용해서 직접 html 소스코드를 넣어주어야 정상적으로 작동이 되는데

 

티스토리에서 네이버 공유하기는 개발자 등록을 하지않아도 가능하니 해보시는게 좋을것 같습니다. 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

 

네이버 공유하기는 네이버에서 제공하는 API 호출 예제를 이용해서 작업했는데요,

 

티스토리 스킨에서는 바로 사용하기가 안되서 몇부분 수정을 해서 적용을 했습니다. 

 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

우선 아래 보시는것처럼 스크립트 부분을 티스토리 스킨에 삽입을 했습니다. 

 

소스코드 설명을 드리면 24번 라인은 공유하기 버튼을 임의적으로 넣은 부분이구요, 

 

33번라인에서 시작되는 내용은 주소창에 있는 티스토리블로그 주소를 가져와서 URL로

 

선언을 해주었습니다. 

 

티스토리 스킨내에서 블로그주소를 확인하는 부분이 없어서

 

스크립트를 이용해서 공유할 URL을 선언을 해주었습니다. 

 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

 

그리고 중간부분에 form 을 넣어서 네이버 공유하기에 사용할 타이틀 주소를 넣어주면 완료가 됩니다. 

 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

 

저같은 경우는 티스토리에서 제공하는 SNS 공유하기 뒤에 네이버 공유하기 이미지를 넣어서 사용을 했구요, 

 

아래 이미지는 실제로 적용된 화면입니다. 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

 

 

위에 있는 네이버 공유하기 버튼을 누르면 아래와 같이 내블로그로 공유하기 화면이 나오게 되구요, 

 

 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

 

공유가 완료되면 아래처럼 정상적으로 완료가 됩니다. 

 

생각보다 어렵지 않으니 티스토리 운영하시는 분들은 

 

네이버 공유하기 버튼을 넣어주시는 것도 괜찮을 것 같습니다. 

 

 

 

티스토리 블로그에 네이버 공유하기 버튼 넣기

 

사용한 소스코드는 아래 코드를 이용하시면 됩니다. 

 

// 네이버 공유하기 버튼 위치 정하기

$(document).ready(function(){
$(".tt-sns-service-default").after('<span style="float:left;display:inline-block"><input type="image" src="https://tistory2.daumcdn.net/tistory/4910896/skin/images/n-icon.png" value="네이버공유하기" onclick="share()"/ id="naverShare"></span>');
});

 

  // 네이버 공유하기 함수 : 네이버 개발자센터 제공
  function share() {
      var turl = window.location.href; // 현재창 주소 가져오기로 변경함

      var url = encodeURI(encodeURIComponent(turl));
      var title = encodeURI(myform.title.value);
      var shareURL = "https://share.naver.com/web/shareView?url=" + url + "&title=" + title;
      document.location = shareURL;
  }

 

<!-- 티스토리 블로그 타이틀 넣기 -->
<form id="myform">
	<input type="hidden" id="title" value="티스토리 블로그에 네이버 공유하기 버튼 넣기이것이궁금블로그"><br/>
</form>