구글링하면 애드디스로 쉽게 플로팅(https://weweb.tistory.com/26?category=763809)하는 방법도 있었지만
저는 네이버 블로그랑 카카오톡 버튼을 꼭 달고 싶어서 몇일 헤매다 겨우 붙였네요 ㅠㅠ
SNS 버튼 이미지 첨부합니다.
스킨편집 - Html 편집 - 파일 업로드를 통해 버튼 이미지들을 업로드해주세요.
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%;}
'티스토리_코딩' 카테고리의 다른 글
| 티스토리 CCZ-CROSS 글 제목 폰트 변경 (2) | 2019.06.17 |
|---|---|
| 티스토리 CCZ-CROSS 헤더 공유버튼 추가하기 (0) | 2019.06.17 |
| 티스토리 CCZ-CROSS 상단 검색결과 삭제하기 (1) | 2019.06.17 |
| 티스토리 CCZ-CROSS 방문자 색상 변경 (0) | 2019.06.17 |
| 티스토리 JB Factory 스킨 수정 #1 사이드바 정리 (0) | 2019.06.16 |
댓글