심재운 블로그

반응형

 

 

네이버 공유하기는 사이트 컨텐츠를 네이버 서비스에 쉽게 공유할 수 있게 해주는 플러그인입니다.
간단한 스크립트를 복사해 붙이는 것만으로도 쉽게 개발할 수 있습니다.
공유하려는 URL이 로컬 경로일 경우는 네이버 서버에서 해당 URL을 파싱할 수 없어 공유하기가 안되니 주의 바랍니다.

즉 https://~ 처럼 웹서버에 도메인 주소가 운영된 사이트만 가능하다는 것을 의미합니다.

 

 

사용법은 간단합니다. 제목이나 url 에 한글이나 특수문자가 포함될 수 있으므로 자바스크립트로 인코딩하는 구문이 포함되어 있습니다. 

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
<head>
  <title>네이버 공유하기</title>
  <script>
    function share() {
      var url = encodeURI(encodeURIComponent(myform.url.value));
      var title = encodeURI(myform.title.value);
      var shareURL = "https://share.naver.com/web/shareView.nhn?url=" + url + "&title=" + title;
      document.location = shareURL;
    }
  </script>
</head>
<body>
  <form id="myform">
    URL입력:  <input type="text" id="url" value="https://search.naver.com/search.naver?sm=tab_hty.top&where=nexearch&oquery=%EB%84%A4%EC%9D%B4%EB%B2%84+%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%84%BC%ED%84%B0&ie=utf8&query=%EB%84%A4%EC%9D%B4%EB%B2%84+%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%84%BC%ED%84%B0"><br/>
    Title입력:  <input type="text" id="title" value="네이버개발자센터 검색결과"><br/>
  </form>
  <input type="button" value="네이버공유하기" onclick="share()"/>
</body>
</html>

 

 

그리고 아래와 같은 형태의 og 설정이 가능합니다.

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

 

og:image 란 간단하게 이야기 하면... 아래 이미지 처럼 썸네일 깍두기 이미지를 의미하며, title 은 제목, description 은 설명을 의미합니다.

 

 

 

 

그리고 og 파일을 변경하거나 수정이 필요할 경우, 아래 네이버 디버거 웹사이트를 통해서 og 변경한 도메인 주소를 입력하게 되면, 기존의 og 를 제거하고 새롭게 읽어서 반영해 줍니다. 즉, 갑자기 변경해야 할 일이 생기면 다시 네이버에 요청해야 한다는 것을 의미합니다.

 

developers.band.us/developers/ko/docs/share/debugger

 

BAND Snippet Debugger

 

developers.band.us

 

네이버 api 담당자

 

 

 

별도로 카카오, 페이스북도 OG 변경사이트 주소가 존재합니다.

 

(1) 페이스북  OG 변경사이트

 

developers.facebook.com/tools/debug/?locale=ko_KR

 

공유 디버거 - Facebook for Developers

공유 디버거를 사용하면 Facebook에 공유될 때 콘텐츠가 표시되는 모습을 미리 보거나 오픈 그래프 태그를 사용하여 문제를 디버깅할 수 있습니다. 이 도구를 사용하려면 Facebook에 로그인하세요.

developers.facebook.com

 

(2) 카카오  OG 변경사이트

 

developers.kakao.com/tool/clear/og

 

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

 

참고사이트 

 

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

 

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

NAVER Developers - 네이버 공유하기 개발가이드

developers.naver.com

 

반응형

댓글

비밀글모드

  1. 오늘도 포스팅 잘 보고 갑니다.
    즐거운 주말 되세요 ^^
    2020.12.05 12:20 신고