티스토리 블로그 sns 공유 버튼 초간단 직접 만들어 달기 (API 활용)

티스토리 블로그 sns 공유 버튼 직접 만들어 달기(쉐어디스 X). 안녕하세요. 옴니채널의 강세로 sns 공유버튼 만드는걸 찾으시는분들이 많아지셨는데요. 보통 애드디스나 쉐어디스같은 sns공유 버튼 서비스를 이용하실겁니다.

하지만 이것들은 페이지의 속도를 떨어뜨려 방문자 유입을 감소시킬 수가 있는데요. API를 활용하여 직접 sns 공유 버튼을 만든다면 페이지 속도가 떨어지지 않아 많은분들이 API로 sns 공유버튼을 만들어 사용하고 있습니다.

그렇지만 컴퓨터 관련 지식이 부족하다면 만드는게 부담스럽고, 어렵기 때문에 오늘은 API를 활용한 sns 공유버튼을 만드는 방법에 대해 쉽게 설명하는 시간을 갖겠습니다. 그럼 티스토리 블로그 sns 공유 버튼 초간단 직접 만들어 달기 (API 활용) 시작하겠습니다.

 <!-- sns 공유버튼 코드 2 -->

<!-- sns 공유버튼 코드 1 -->

     <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;">S N S 공 유 하 기</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></p>

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

</p>

<p></p></td>  

</tr>

</tbody></table>

     </div>

먼저 html에다가 입력해두어야 할 것들입니다. 기본틀이라고 이해하시면 쉬울겁니다. 글 하단에 배치 할 거기 때문에 article_rep_desc 아래에다가 입력하면 되는데요. 일일이 적는건 매우 힘든 일이기 때문에 옆에다가 txt 파일을 첨부하였으니 그걸 사용 하여 복붙하시면 됩니다.

기본 틀.txt

그런 다음 공유버튼 이미지를 티스토리 서버에 업로드 해야 하는데요. [HTML/CSS]→[파일 업로드]에 들어가 다운 받은 sns 아이콘 이미지를 업로드하시면 됩니다. (파일 첨부하기 클릭하시면 됩니다.)  

SNS아이콘.zip

다시 html로 돌아가서 <!-- sns 공유버튼 코드 2 --> 바로 위에 있는 공백에다가 아래 공유 버튼 API 주소를 적으시면 sns 공유 버튼을 만들 수가 있습니다. 아까와 같이 txt 파일로 첨부하였으니 사용하시기 바랍니다. 

<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;">

<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('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 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/icon_facebook.png"></a></p>

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

페이스북

공유버튼 API.txt

여기까지 잘 따라오셨으면 여러분도 저처럼 페이지 속도에 지장을 주지 않는 SNS 공유버튼을 만드실 수가 있을겁니다. 여기까지 티스토리 블로그 sns 공유 버튼 초간단 직접 만들어 달기 (API 활용) 설명했습니다. 제 글이 많은 도움이 되었길 바라며 여기서 마치겠습니다.