RX / XERXE 활용팁XpressEngine
Extra Form

네이버 공유하기 - 블로그,카페,폴라

 

 페이스북,트위터,밴드 등..스킨에 대부분에 기본적으로 있지만 네이버쪽으로 공유하고자 부분들이 필요 할 까봐

 

이 Tip을 공유합니다.

 

스케치북5( sketchbook5 )기준으로 작성하였습니다.

 

구현 미리보기

 

sns.gif

 

sns_share.png

TIP

 

./modules/board/skins/sketchbook5/_read.html

 

318라인 쯤에 SNS관련 소스가 있습니다.

 

Band 밑에 소스를 추가합니다.

 

<a class="naver bubble" href="#" data-type="naver" title="To naver"><b class="ico_sns naver">Naver</b></a>

 

 

<!--@if(Mobile::isMobileCheckByAgent())-->
<a class="kakaostory" href="storylink://posting?post={$oDocument->getPermanentUrl()}&appid=m.kakao.com&appver=1.0&apiver=1.0&appname={$mi->title}"><b class="ico_sns kakaostory">KakaoStory</b></a>
<a class="band" href="bandapp://create/post?text={$sns_title}%0A{$sns_link}"><b class="ico_sns band">Band</b></a>
<a class="kakao" href="#" data-type="kakao"><b class="ico_sns kakao">Kakao</b></a>
<a class="line" href="line://msg/text/?{$sns_title}%0D%0A{$sns_link}"><b class="ico_sns line">Line</b></a>
<!--@else-->
<a class="kakaostory bubble" href="#" data-type="kakaostory" title="To KakaoStory"><b class="ico_sns kakaostory">KakaoStory</b></a>
<a class="band bubble" href="#" data-type="band" title="To Band"><b class="ico_sns band">Band</b></a>
<a class="naver bubble" href="#" data-type="naver" title="To naver"><b class="ico_sns naver">Naver</b></a>
<!--@end-->

 


./modules/board/skins/sketchbook5/img/sns.png

아래의 이미지를 다운로드하셔서 덮여씌어주세요.
 

 

sns.pngsns.png

 


./modules/board/skins/sketchbook5/css/board.css

 

68번 라인 쯤 다음 줄에 아래소스를 넣어주세요.

 

.bd .ico_sns.naver{background-position:0 -256px}

 


./modules/board/skins/sketchbook5/js/board.js

 

388번라인 SNS 관련 코드가 있습니다.

 

band관련 소스 밑에 추가해주세요.

 

else if(type=="naver"){
                loc = 'http://share.naver.com/web/shareView.nhn?url='+encodeURIComponent(href)+'&title='+encodeURIComponent(title);    
        }

 

 else if(type=="kakaostory"){
loc = 'https://story.kakao.com/share?url='+encodeURIComponent(href);
} else if(type=="band"){
loc = 'http://www.band.us/plugin/share?body='+encodeURIComponent(title)+'%0A'+encodeURIComponent(href);
} else if(type=="naver"){
loc = 'http://share.naver.com/web/shareView.nhn?url='+encodeURIComponent(href)+'&title='+encodeURIComponent(title);
} 

 

마무리

 

 스케치북5 설정 중에 'SNS로 보내기 버튼 ' - 큰 아이콘(본문 하단) 설정 기준으로 작성하였습니다.

 

그 외에 설정에 대한 부분에 적용하려면 이미지를 추가하시고 해당 부분의 css를 수정하셔야 합니다.

 

핵심은 js수정입니다. 스케치북5외에 다른 스킨에도 충분히 수정해서 사용 할 수 있을 것입니다.

 

참조

 

Naver Developers - https://developers.naver.com/docs/share/navershare/ 

  • profile
    dongdong 2017.03.10 00:17:26
    감사합니다^^
  • profile
    Chronos 2017.03.10 09:00:45
    감사합니다. 잘 적용 되네요. 다만, 네이버 아이콘이 트위터 아이콘으로 나오는데 이건 뭘 잘못한걸까요? ㅜ
  • profile
    dongdong 2017.03.10 13:50:13
    모바일의 경우에는 이미지가 달라서
    추가수정해서 업로드 해야 합니다.
    sns_64.png 파일에 네이버 추가하면 됩니다
  • profile
    Chronos 2017.03.10 14:10:03

    답변 감사합니다. ^^

  • profile
    lis**** 2017.03.10 16:14:27
    감사합니다.
  • profile
    TeddySosanYun 2017.03.11 10:05:06
    좋은 정보내요..
    감사합니다.
    함 해봐야겠습니다.
  • ?
    차도남 2017.05.09 12:32:09
    잘 되네요~좋은 정보 감사드려요~

서버에 요청 중입니다. 잠시만 기다려 주십시오...