테스트 사이트 - 개발 중인 베타 버전입니다

네이버 (블로그) 공유하기 채택완료

수난이대 2년 전 조회 1,909

그누보드와는 별개로 작업중입니다.

 

https://developers.naver.com/docs/share/navershare/">네이버 공유하기 개발가이드 - NAVER Developers

위 api  문서중에 버튼유형으로 개발중에 있습니다.

</p>

<p><?</p>

<p>$url = '<a href="http://'" target="_blank" rel="noopener noreferrer">http://'</a> . $http_host . $request_uri;

$url_share = urlencode($url);

$title = "메인테스트";

$title =$title;

$title_share = urlencode($title);</p>

<p>?></p>

<p><input type="hidden" name="url" id="url" value="<a href="https://share.naver.com/web/shareView?url=<?=$url_share?>&title=<?=$title_share?>">" target="_blank" rel="noopener noreferrer">https://share.naver.com/web/shareView?url=<?=$url_share?>&title=<?=$title_share?>"></a>

<input type="hidden" name="title" id="title" value="<?=$title?>"></p>

<p> </p>

<p><span>

    <script type="text/javascript" src="<a href="https://ssl.pstatic.net/share/js/naver_sharebutton.js"></script>" target="_blank" rel="noopener noreferrer">https://ssl.pstatic.net/share/js/naver_sharebutton.js"></script></a>

    <script type="text/javascript">

    new ShareNaver.makeButton({"type": "f"});

    </script>

</span></p>

<p>

 

어떤 코드를 더 추가해야하는지요?

아래 주소로 적용했는데 title값이 빠진상태로 전달됩니다.

 

https://lsp80.cafe24.com/naver.php">lsp80.cafe24.com/naver.php

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
wodud3073
2년 전

<!DOCTYPE html></p>

<p><html lang="en"></p>

<p><head></p>

<p>    <meta charset="UTF-8"></p>

<p>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>

<p>    <title>Naver Share Button Example</title></p>

<p></head></p>

<p><body></p>

<p>    <button id="naverShareButton">네이버 공유하기</button></p>

<p> </p>

<p>    <script type="text/javascript"></p>

<p>        // 네이버 공유하기 버튼을 생성하는 함수</p>

<p>        function createNaverShareButton() {</p>

<p>            var url = window.location.href; // 현재 페이지 URL</p>

<p>            var title = "공유할 제목"; // 원하는 제목</p>

<p> </p>

<p>            var naverShareUrl = "<a href="https://share.naver.com/web/shareView?url="" target="_blank" rel="noopener noreferrer">https://share.naver.com/web/shareView?url="</a> + encodeURIComponent(url) + "&title=" + encodeURIComponent(title);</p>

<p> </p>

<p>            var shareButton = document.createElement("a");</p>

<p>            shareButton.href = naverShareUrl;</p>

<p>            shareButton.target = "_blank"; // 새 창에서 열도록 설정</p>

<p>            shareButton.innerText = "네이버 공유하기";</p>

<p> </p>

<p>            document.getElementById("naverShareButton").appendChild(shareButton);</p>

<p>        }</p>

<p> </p>

<p>        // 페이지 로드 시 네이버 공유하기 버튼 생성</p>

<p>        window.onload = function () {</p>

<p>            createNaverShareButton();</p>

<p>        };</p>

<p>    </script></p>

<p></body></p>

<p></html></p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

수난이대
2년 전
답변감사합니다.

최근 공유하기api 문서에 올라온 버튼 유형api를 사용하려고 합니다.

말씀해주신 방법으로 이전에 구현해본적이 있긴합니다.

이번에 버튼형으로 간편 api가 있어서 사용하려고합니다.

감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 주신분들 감사합니다.

api문서에서 버튼형api 를 조금씩 가공하셔서 사용하시는거 같은데...

 

좀전에  api 문서에 있는 코드 그대로 실행하여  실행 성공하였습니다.

다만 마지막 단계에서 네이버측 js 충돌이 일어나서 등록은 안되고있습니다

네이버 개발자 포롬에도 올라온 오류인데 ,  이부분은 좀 더 찾아봐야 할거 같습니다.

 

우선 아래와 같은 코드만으로도 동작합니다. - 버튼api 코드 그대로 사용

 

</p>

<p><?

$title = "메인테스트";

?></p>

<p><span>

    <script type="text/javascript" src="<a href="https://ssl.pstatic.net/share/js/naver_sharebutton.js"></script>" target="_blank" rel="noopener noreferrer">https://ssl.pstatic.net/share/js/naver_sharebutton.js"></script></a>

    <script type="text/javascript">

        new ShareNaver.makeButton({"type": "d" , "title":"<?=$title?>"});

    </script>

</span></p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

wodud3073
2년 전

혹은

</p>

<p><!DOCTYPE html></p>

<p><html lang="en"></p>

<p><head></p>

<p>    <meta charset="UTF-8"></p>

<p>    <meta name="viewport" content="width=device-width, initial-scale=1.0"></p>

<p>    <title>Naver Share Button Example</title></p>

<p></head></p>

<p><body></p>

<p>    <!-- 네이버 공유하기 버튼을 생성할 엘리먼트 --></p>

<p>    <span id="naver-share-button"></span></p>

<p> </p>

<p>    <!-- 네이버 공유하기 버튼 스크립트 --></p>

<p>    <script type="text/javascript" src="<a href="https://ssl.pstatic.net/share/js/naver_sharebutton.js"></script>" target="_blank" rel="noopener noreferrer">https://ssl.pstatic.net/share/js/naver_sharebutton.js"></script></a></p>

<p>    <script type="text/javascript"></p>

<p>        var url = window.location.href; // 현재 페이지 URL</p>

<p>        var title = "공유할 제목"; // 원하는 제목</p>

<p> </p>

<p>        var shareUrl = "<a href="https://share.naver.com/web/shareView?url="" target="_blank" rel="noopener noreferrer">https://share.naver.com/web/shareView?url="</a> + encodeURIComponent(url) + "&title=" + encodeURIComponent(title);</p>

<p> </p>

<p>        var shareButton = ShareNaver.makeButton({</p>

<p>            type: "f",</p>

<p>            url: shareUrl</p>

<p>        });</p>

<p> </p>

<p>        // 네이버 공유하기 버튼을 생성할 엘리먼트에 추가</p>

<p>        document.getElementById("naver-share-button").appendChild(shareButton);</p>

<p>    </script></p>

<p></body></p>

<p></html></p>

<p> </p>

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

수난이대
2년 전
답변 감사합니다.
api 문서와 비슷한코드라 다시 테스트해보겠습니다.
마지막단계에서 네이버팝업창에서 스크립트 오류가 있던데, 이미 개발자포롬에서 이슈되고있네요.

댓글을 작성하려면 로그인이 필요합니다.

wodud3073
2년 전

   

   

    Naver Share Button Example

   

 

   

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

수난이대
2년 전
답변 감사합니다.
공유하기 방식은 여러개 있긴한데.. 최근 공유하기api 문서에 올라온 버튼 유형api를 사용하려고 합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인