티스토리 뷰


티스토리 블로그에 SNS 공유버튼 만들기

이 기능은 티스토리에서도 자체적으로 지원을 하고 있지만 디자인과 종류가 제한적이기 때문에 따로 공유버튼을 만들어 보았습니다. 사용하는 방법은 너무 간단하기 때문에 원하는 위치에 원하는 곳에 소스만 붙여 넣으면 인증 절차 없이 바로 사용 할 수 있습니다.



네이버 블러그 공유하기
/* 네이버 블러그 공유하기 */
<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" >네이버 블러그</a>

페이스북 공유하기
/* 페이스북 공유하기 */
<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" > 페이스북</a>

트위터 공유하기
/* 트위트 공유하기 */
<a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" >트위트</a>

구글플러스 공유하기
/* 구글플러스 공유하기 */
<a href="#" onclick="javascript:window.open('https://plus.google.com/share?url=' +encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes, scrollbars=yes,height=350,width=600');return false;" target="_blank" alt="Share on Google+"></a>

카카오스토리 공유하기
/* 카카오스토리 공유하기 */
<a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory">카카오스토리</a>


바로 아래 보이시죠~~ 적용한 화면 입니다. 이미지로 따로 첨부하여 올리겠습니다. 저 처럼 쓰고 싶은 분들은 아래에 종합 소스를 붙여 넣으면 됩니다.


아이콘 다운로드

아이콘.zip



전체 소스 보기
HTML
<div class="sns-go">
  <ul>
    <li>
      <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/sns_naver.png" width="40" alt="네이버 블러그 공유하기"></a>
    </li>
    <li>
      <a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook" ><img src="./images/sns_face.png" width="40" alt="페이스북 공유하기"></a>
    </li>
    <li>
      <a href="#" onclick="javascript:window.open('https://twitter.com/intent/tweet?text=[%EA%B3%B5%EC%9C%A0]%20' +encodeURIComponent(document.URL)+'%20-%20'+encodeURIComponent(document.title), 'twittersharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Twitter" ><img src="./images/sns_tw.png" width="40" alt="트위터 공유하기"></a>
    </li>
    <li>
      <a href="#" onclick="javascript:window.open('https://plus.google.com/share?url=' +encodeURIComponent(document.URL), 'googleplussharedialog','menubar=no,toolbar=no,resizable=yes, scrollbars=yes,height=350,width=600');return false;" target="_blank" alt="Share on Google+"><img src="./images/sns_google.png" width="40" alt="구글 플러스 공유하기"></a>
    </li>
    <li>
      <a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory"><img src="./images/sns_kakao.png" width="40" alt="카카오스토리 공유하기"></a>
    </li>
  </ul>
</div>


CSS
.sns-go {text-align:center; padding: 20px 0;}
.sns-go li {display:inline-block; margin: 0 5px; }
.sns-go li img {border-radius:50%;}	
  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
댓글
댓글쓰기 폼