사라진 티스토리 SNS아이콘! 수작업으로 공유하시나요?

 

티스토리를 예전부터 하셨던 분들이시라면 플러그인을 통해 SNS 공유가 가능하던 때를 기억하실 것입니다. 하지만 최근 플러그인을 통한 SNS 공유 기능이 삭제되었습니다. 어떠한 이유로 삭제를 감행했는지는 알 수 없지만 블로그를 운영하는 사람으로서 여간 불편한 게 아니더라고요. 이러한 불편을 해결하기 위해 SNS공유 아이콘을 직접 적용할 수 있도록 도움을 드리고자 합니다.

 

 

 

SNS 아이콘 추가하기

SNS아이콘을 추가하기 위해서는 티스토리의 관리페이지로 이동하여야 합니다. 그 후 좌측 중간에 있는 꾸미기 > 스킨편집으로 이동해 줍니다. 사용하는 스킨들은 다 다를 수 있지만 스킨편집의 HTML편집창은 모두 동일하게 사용할 수 있습니다.

 

 

 

 

HTML 편집창으로 이동하였다면 Ctrl+F(찾기)를 눌러 1번처럼 "##_article_rep_desc_##"를 검색하여 이동합니다. ##_article_rep_desc_## 는 두 번 검색되는 경우가 있는데요. 이 경우에는 2번째 나타나는 위치에서 작업을 진행하여야 합니다. 2번 위치에 아래 내용을 삽입하면 SNS 아이콘을 추가할 수 있습니다.

 

 

 

2번 위치 바로 아랫부분에 코드를 삽입해 줍니다. 삽입해야 하는 코드는 아래 코드입니다. 복사가 가능하신 분은 복사하여 붙여 넣기를 진행하시면 완료되며, 만약 복사가 안된다면 메모장을 다운로드하여 메모장에 있는 코드를 붙여 넣으시기 바랍니다. 

 

 

<!--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>

<!--sns 공유하기-->

 

 

sns 공유 메모장.txt

0.00MB

 

 

 

 

위의 코드를 THML 편집창에 잘 붙였다면 아래와 같은 모습일 것입니다. 2번 위치 바로 아래부분에 잘 붙여 넣었는지 다시 한번 확인해 보시기 바랍니다.

 

 

 

HTML에 코드를 붙였다면 CSS에도 코드를 추가로 적용해 주어야 하는데요. HTML 옆 CSS를 눌러줍니다.

 

 

 

 

 

마찬가지로 복사가 되시는 분들은 복사를 해서 사용하시고, 안되시는 분들은 메모장안에 있는 코드를 복사하여 붙여 넣으시면 됩니다. 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%;}

 

CSS.txt

0.00MB

 

 

 

 

마지막으로는 CSS 옆에 있는 "파일업로드" 창을 열고 1번처럼 추가버튼을 눌러 2번과 같이 아이콘을 모두 선택 후 업로드해 줍니다. 업로드할 때는 압축을 모두 풀고 이미지파일만 업로드해 주시면 됩니다. 파일은 아래 첨부된 파일을 이용하시면 됩니다.

 

 

 

SNS아이콘이미지.zip

0.02MB

 

 

 

 

 

위 과정을 잘 따라오셨다면 내 블로그 맨 하단에 SNS 공유버튼들이 생긴 것을 확인할 수 있습니다. 이제 번거롭게 SNS에 공유하지 말고 버튼클릭 한 번으로 자유롭게 SNS로 공유해 보시기 바랍니다.

 

 

 

마치며,

지금까지 티스토리 블로그에 사라졌던 SNS 공유하는 방법을 적어보았습니다. 해당기능은 없어도 블로그를 운영하는데 문제가 되지 않습니다. 그럼에도 시간을 쪼개서 블로그를 운영하고 계시는 분들을 위해 1분 1초라도 시간을 아껴드리고자 하는 마음으로 해당 포스팅을 진행하였습니다. 소소한 부분이지만 시간을 아껴서 좋은 글을 작성하는데 시간을 투자하시기 바랍니다.

 

 

▼▼▼ 함께 보면 좋은 내용 ▼▼▼

구글 애드센스 수익 창출 업데이트! CPC에서 CPM으로 수익 창출 정책변화의 이유는?

워드프레스 다국어 번역기 적용으로 외국인 체류시간 늘리기!

직장인이 부업 추천! 다양한 부업과 애드센스로 하루 3만원이 되는 과정! 월 100만원 얼마나 걸릴