티스토리 공유버튼 만들어 달기 - Tistory SNS Button



티스토리의 장점은 역시 코드를 자유롭게 손을 볼 수 있다는 것 같습니다.


HTML을 조금만 알아도 약간씩 수정이 가능한 것 같아요.



조금 운영 하다 보니까, 검색어, 검색 순위 이런것도 중요하지만,


SNS에 쉽게 공유할 수 있는 버튼이 있어야 좋은 것 같습니다.


그런데, 티스토리에서 기본적으로 제공하는 버튼은 조그만 해서 별로 눈에도 잘 안뜨이고.... ㅜㅜ


다른 고수분들 찾아다니다가 결국 그냥 만들었습니다.



제 게시물 하단에 보면 이런식으로 공유 버튼이 달려있는데요,


걍 소스랑 아이콘 올립니다.


이게 뭐 귀한거라고..... 맘에 안드시면 조금씩 수정해서 쓰시면 됩니다.


SNS아이콘.zip


그리고 이건 소스입니다.


SNS공유버튼 소스.txt

.

.

.

.

.

.

그러고 보니 사용법을 안적었네요 -_-



1. 티스토리 관리자 화면에 들어가서 HTML/CSS 안으로 들어갑니다.


2. 파일업로드 버튼을 눌러줍니다





3. 여기에다 위에 첨부해놓은 아이콘 파일을 압축을 풀어서 등록시킵니다.

그러면 자동으로 /images 폴더 안으로 업로드가 됩니다. 



4. HTML 버튼을 눌러 미지의 세계로코드를 엽니다. 



5. Ctrl+F를 눌러서    [##_article_rep_desc_##] 를 찾습니다.



6. 요고 바로 다음에 첨부한 소스를 복붙하시면 됩니다.


7. 완성!!!!!  ( 어때요? 참 쉽죠? )


8. 관리자 페이지의 플러그인 중, 글 보내기로 들어가서 'SNS글 보내기'는 해지해 버리세요.



----------------이하는 코드 전문입니다.


<hr style="display:block; border: black 0 none; border-top: black 1px solid; height: 1px"><p></p>

<p style="text-align: center;"><b style="text-align: center;"><span style="font-size: 14pt;">게 시 글 공 유 하 기</span></b></p>

<p style="text-align: center;"></p><hr style="display:block; border: black 0 none; border-top: black 1px dotted; height: 1px"><p></p>

<p style="text-align: center;"><table class="txc-table" width="99%" cellspacing="0" cellpadding="0" border="0" style="border:none;border-collapse:collapse;;font-family:Dotum, 돋움;font-size:13px" align="center"><tbody><tr>

<td style="width:16.5%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-left:1px solid #ccc;;">


<p style="text-align: center;">

<a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u='

+encodeURIComponent(document.URL)+'&amp;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/facebook-icon.png"></a></p>

<p style="text-align: center;">

페이스북</p>

<p></p></td>


<td style="width:16.5%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p></p>

<p style="text-align: center;">

<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/twitter-icon.jpg"></a></p>

<p></p>

<p style="text-align: center;">트위터</p></td>


<td style="width:16.5%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p></p>

<p style="text-align: center;">

<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/googleplus-icon.png"></a></p>

<p></p>

<p style="text-align: center;">구플</p></td>


<td style="width:16.5%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p></p>

<p style="text-align: center;">

<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/kakaostory-icon.png"></a></p>

<p></p>

<p style="text-align: center;">카스</p></td>


<td style="width:16.5%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p></p>

<p style="text-align: center;">

<a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url='

+encodeURIComponent(document.URL)+'&amp;title='+encodeURIComponent(document.title),

 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="Share on Naver">

<img src="./images/naver-icon.jpg"></a></p>

<p></p>

<p style="text-align: center;">네이버</p></td>


<td style="width:16.5%;height:24;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;;"><p></p>

<p style="text-align: center;">

<span>

<script type="text/javascript" src="//developers.band.us/js/share/band-button.js?v=21072016"></script>

<script type="text/javascript">

   new ShareBand.makeButton({"lang":"ko","type":"c"});

</script>

</span>

</p>

<p style="text-align: center;">밴드</p></td>

</tr>

</tbody></table>


저작자 표시 비영리 변경 금지
신고

이 글을 공유하기

댓글(0)

Designed by CMSFactory.NET

티스토리 툴바