티스토리에 sns 공유버튼 만들기
- 소소한이야기/더 소소한...
- 2019. 3. 23. 11:36
정말 쓸데없는 일인줄 알면서 글 아래에 sns 공유버튼을 달았습니다. 티스토리에서 플러그인으로 제공해주는 sns 글보내기를 달았더니 정말 안 예쁘네요. 단지 안 예쁘다는 이유하나만으로 새로 달았습니다.
1. 버튼 이미지 준비하기
검색해서 공유해주는 이웃 블로그에서 버튼을 다운 받으시면 됩니다. 저는 이참에 한번 만들어 보고 싶어서 만들었습니다. 구글 검색에서 수정후 재사용 가능한 이미지를 검색해서 글자와 모양을 따와서 배경을 일관성있게 넣어 만들었습니다. 트위터의 새모양이나 문자들이 독특해서 이렇게 하면 훨씬 쉽습니다.
네이버의 경우는 사용가능한 이미지가 없어서 글자나 모양을 직접 만들어 넣었더니 별로 예쁘지 않네요. 혹시 별로 예쁘지 않지만 사용하고 싶은 분들을 위해 제가 만든 이미지를 올려 놓았습니다.
공유버튼.zip2. 이미지 업로드하기
다운받아 압축풀어 나온 이미지를 티스토리 관리자-스킨편집-html편집에 들어갑니다.
html 옆에 있는 파일업로드를 누르고 +추가를 눌러 준비된 이미지를 올립니다.
3. html에 소스코드 넣기
html을 눌러 <body>시작하는 부분에 에서 적당한 위치를 찾아 아래 소스를 입력합니다. bssow님의 SNS 공유버튼 직접 달기의 도움을 받았습니다. 연결할 주소입니다. 나중에 링크가 안되면 직접 찾아서 수정해 주셔야 합니다.
<!-- SNS 공유용 주소 연결 용 --> <script type="text/javascript" async> var url_default_ks = "https://story.kakao.com/share?url="; var url_default_fb = "https://www.facebook.com/sharer/sharer.php?u="; var url_default_tw_txt = "https://twitter.com/intent/tweet?text="; var url_default_tw_url = "&url="; var url_default_band = "http://band.us/plugin/share?body="; var url_route_band = "&route="; var url_default_naver = "http://share.naver.com/web/shareView.nhn?url="; var title_default_naver = "&title="; var url_this_page = location.href; var title_this_page = document.title; var url_combine_ks = url_default_ks + url_this_page; var url_combine_fb = url_default_fb + url_this_page; var url_combine_tw = url_default_tw_txt + document.title + url_default_tw_url + url_this_page; var url_combine_band = url_default_band + encodeURI(url_this_page)+ '%0A' + encodeURI(title_this_page)+'%0A' + '&route=tistory.com'; var url_combine_naver = url_default_naver + encodeURI(url_this_page) + title_default_naver + encodeURI(title_this_page); </script>
다음 아래의 소스는 버튼과 주소를 연결하는 소스입니다. 보통 본문 글 아래에 넣으시면 글마다 구독과 공감아래 위치해서 나옵니다. 친효스킨에는 아래 사진의 푸른 부분에 넣었습니다.
<!-- SNS버튼 시작 --> <div style="width: 100%; text-align:center; margin-bottom:40px;"> <!-- 페이스북 공유 버튼 --> <a href="" onclick="window.open(url_combine_fb, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/face.png" title="페이스북으로 공유하기" class="sharebtn_custom" style="width: 28px;"></a> <!-- 트위터 공유 버튼 --> <a href="" onclick="window.open(url_combine_tw, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/twt.png" title="트위터로 공유하기" class="sharebtn_custom" style="width: 28px;"></a> <!-- 카카오 스토리 공유 버튼 --> <a href="" onclick="window.open(url_combine_ks, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/kakao.png" title="카카오스토리로 공유하기" class="sharebtn_custom" style="width: 28px;"></a> <!-- 네이버 공유 버튼 --> <a href="" onclick="window.open(url_combine_naver, '', 'scrollbars=no, width=600, height=600'); return false;"><img src="./images/naver.png" title="네이버로 공유하기" class="sharebtn_custom" style="width: 28px;"></a> <!-- 밴드 공유 버튼 --> <a href="" onclick="window.open(url_combine_band, '', 'scrollbars=no, width=584, height=635'); return false;"><img src="./images/band.png" title="밴드로 공유하기" class="sharebtn_custom" style="width: 28px;"></a> </div> <!-- SNS버튼 끝 -->
노란색의 28px는 보여지는 이미지의 크기입니다. 원래 bssow은 32px로 했는데 조금 큰 것 같아 줄였습니다. 파란색부분은 업로드한 이미지의 이름입니다. 여기 올려 놓은 버튼이 별로 예쁘지 않아서 다른 이미지를 올리게 되면 이름을 이부분에 적으시면 됩니다.
공유버튼달기.txt소스를 복사할 수 없으니 소스를 메모장에 넣어서 첨부했습니다.
'소소한이야기 > 더 소소한...' 카테고리의 다른 글
| 티스토리 앵커광고만 하단에 달기 (24) | 2019.04.06 |
|---|---|
| 티스토리 서식으로 소제목 꾸미기 (20) | 2019.04.02 |
| 티스토리를 이웃으로 추가하는 여러방법 (8) | 2019.03.20 |
| 티스토리와 네이버 이웃추가 버튼 함께 달기 (8) | 2019.03.19 |
| 익스플로러 시작화면과 새탭 빈화면 설정 (&바탕화면 바로가기) (0) | 2019.03.14 |