티스토리 블로그 SNS 공유 버튼 직접 만드는 방법

저는 얼마 전까지만 해도 SNS 버튼을 달때 티스토리 자체 플러그인을 달고 있었습니다. 물론 외부 플러그인도 달았던때도 있었지만 수정을 할 수가 없는게 단점이라서 결국 한국형 SNS 공유 버튼을 직접 만들어보았습니다.


물론 어려운건 아니지만 굳이 플러그인이 아니어도 공유 링크 주소만 알게 되면 쉽게 달 수 있습니다. 만약 소스를 공개했는데 잘 안되는 경우를 대비하여 따로 소스 파일과 이미지 파일을 첨부하도록 하겠습니다.


SNS 공유 소스.txt

SNS 공유 이미지.zip


트위터 버튼

/* Share on Twitter */
<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.png"></a>


위 소스를 스킨에 적용하여 트위터 버튼을 누르면 아래처럼 트윗창이 뜹니다. 스마트폰에선 트위터 앱이 설치 되어 있으면 그 앱을 통해 바로 트윗할 수 있습니다.


(img 태그에 티스토리를 기준으로 './images/트위터 이미지' 경로 입니다.)


트위터


페이스북 버튼

/* Share on Facebook */
<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/Facebook.png"></a>


위 소스를 스킨에 적용하게 되면 아래처럼 페이스북 공유하기 창이 뜹니다. 스마트폰에서는 앱이 바로 열리지 않아 좀 아쉬운감이 있지만 이건 따로 작업을 해야할지 몰라도 그냥 만족해야 겠습니다.


(img 태그에 티스토리를 기준으로 './images/페이스북 이미지' 경로 입니다.)


페이스북



구글 플러스 버튼

/* Share on Google+ */
<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/Google_Plus.png"></a>


구글 플러스 저도 한때 많이 사용하던 SNS 로 지금은 페이스북 을 위주로 활동하고 있습니다. 마찬가지로 위 소스를 적용하게 되면 아래 처럼 구글 플러스로 공유할 수 있게 창이 뜨게 됩니다.


(img 태그에 티스토리를 기준으로 './images/구글 플러스 이미지' 경로 입니다.)


구글 플러스


카카오스토리 버튼

/* Share on Kakaostory */
<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/Kakao_Story.png"></a>


인스타그램 다음 제일 많이 사용하는 SNS 로 국내에선 페이스북도 인기가 많지만 카카오스토리도 만만치 않게 사용자가 많습니다. 위 소스를 적용하게 되면 아래와 같이 카카오스토리로 바로 공유가 가능합니다.


(img 태그에 티스토리를 기준으로 './images/카카오스토리 이미지' 경로 입니다.)


카카오스토리


네이버 버튼

/* Share on Naver */
<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=600,width=600');return false;" 
 target="_blank" alt="Share on Naver" >
<img src="./images/Naver.png"></a>

네이버 블로그 말고도 카페, 포스트, 폴라 로 바로 공유할 수 있습니다. 


(img 태그에 티스토리를 기준으로 './images/네이버 이미지' 경로 입니다.)


네이버 블로그 카페 포스트 폴라


카카오톡 버튼

/* Share on KakaoTalk */ <a href="javascript:shareKatalk()"><img src="./images/Kakao.png"></a>

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

<!-- KakaoTalk Share Script -->
<script>
function shareKatalk() {
Kakao.Link.sendScrap({
    requestUrl: location.href
});
};
</script>


(img 태그에 티스토리를 기준으로 './images/카카오톡 이미지' 경로 입니다.)


원래 별도로 API 키도 넣어줘야 했었는데 티스토리에서 공감, 공유, 신고 버튼 통합으로 인해 API 키는 기본적으로 적용됩니다. (17년 12월 23일 업데이트 확인)


카카오톡 소스 코드가 v1 버전 -> v2 버전으로 변경되었습니다. (17년 12월 24일 수정)


여기까지 블로그에 SNS 버튼을 직접 만드는 방법을 알아보았습니다.

공유하기

페이스북

트위터

구글
플러스

카카오
스토리

네이버
밴드

네이버
블로그/카페

카카오톡
메신저