티스토리 블로그 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:sendLink()"><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>
    var firstImg=$(".imageblock:first-of-type img");
    var contents="";
    if(firstImg.attr("src")){
        var firstImgSrc=firstImg.attr("src");
        var firstImgRatio = parseInt(firstImg.css("height"))/parseInt(firstImg.css("width"));
        if (firstImgRatio <=0.27) var firstImgRatio=0.27;
    }else{var firstImgSrc=location.origin+"/favicon.ico";var firstImgRatio=1}
  
    Kakao.init('카카오톡 API');

    function sendLink() {
      Kakao.Link.sendTalkLink({
        label: '[##_page_title_##]',
                 image: {
        src: firstImgSrc,
        width: '300',
        height: parseInt(300*firstImgRatio)
      }
                ,
      webButton: {
        text: '블로그에서 이어보기',
         url : document.URL
      }
      });
        }   
</script>


카카오톡 메신저로 공유할 수 있는 소스 입니다. 물론 좀 번거로울 수 있겠지만 Kakao Developers 사이트에 가입하여 앱만들기를 통해 등록 후 카카오톡 자바스크립트 API 키를 받아야 바로 적용이 가능합니다.


Kakao Developers 사이트 : https://developers.kakao.com/


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


카카오톡


여기까지 블로그에 SNS 버튼을 직접 만드는 방법을 알아보았습니다. 위치는 알고 계시듯 본문 치환자 부분에 달면 되기 때문에 소스 만 제대로 적용 하시면 될거 같습니다.

저작자 표시 비영리 변경 금지
신고
공유OK! 불펌NO!

트위터

페이스북

구글
플러스

카카오
스토리

네이버

네이버
밴드

핀터
레스트

카카오톡