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

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

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

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 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('https://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>
Kakao.init('카카오톡 자바스크립트 API 키');
<!-- KakaoTalk Share Script -->
<script>
function shareKatalk() {
Kakao.Link.sendScrap({
    requestUrl: location.href
});
};
</script>

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

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

v2 개선 SDK 업데이트로 인해 API 키를 별도로 넣게 되면 모바일뿐만 아니라 PC에서도 공유가 가능합니다. (18년 02월 07일 업데이트 확인)

더 자세한 설명 :

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