저는 얼마 전까지만 해도 SNS 버튼을 달때 티스토리 자체 플러그인을 달고 있었습니다. 물론 외부 플러그인도 달았던때도 있었지만 수정을 할 수가 없는게 단점이라서 결국 한국형 SNS 공유 버튼을 직접 만들어보았습니다.
물론 어려운건 아니지만 굳이 플러그인이 아니어도 공유 링크 주소만 알게 되면 쉽게 달 수 있습니다. 만약 소스를 공개했는데 잘 안되는 경우를 대비하여 따로 소스 파일과 이미지 파일을 첨부하도록 하겠습니다.
트위터 버튼
/* 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 버튼을 직접 만드는 방법을 알아보았습니다.