티스토리_코딩

티스토리 본문 하단에 SNS 공유버튼 넣기

레임3D 2019. 6. 17.

구글링하면 애드디스로 쉽게 플로팅(https://weweb.tistory.com/26?category=763809)하는 방법도 있었지만

저는 네이버 블로그랑 카카오톡 버튼을 꼭 달고 싶어서 몇일 헤매다 겨우 붙였네요 ㅠㅠ

 

SNS 버튼 이미지 첨부합니다.

스킨편집 - Html 편집 - 파일 업로드를 통해 버튼 이미지들을 업로드해주세요.

SNS_images.zip
0.02MB

HTML 추가

 

article_rep_desc_## 으로 검색하고 바로 뒤에 넣기

<!--sns 공유하기-->
	<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="javascript:shareKatalk()"><img src="./images/sns_ka.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>

 

카카오톡 API 추가

HTML의 <Head>에 넣어줄 코드.

카카오톡 API가 필요한데 IT넘버원님의 포스팅에서 13번까지 따라하시면 됩니다.

https://prolite.tistory.com/1201

<!-- jQuery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- KakaoTalk Share Script -->
<script>

Kakao.init('카카오톡 API');

function shareKatalk() {
Kakao.Link.sendScrap({
    requestUrl: location.href
});
};
</script>

 

CSS 코드

/*SNS 공유*/
.sns-go {text-align:center; padding: 20px 0;}
.sns-go li {display:inline-block; margin: 0 5px; }
.sns-go li img {border-radius:50%;}

 

 

 

댓글

💲 추천 글