친절한효자손 취미생활

안녕하세요, 친절한효자손 입니다. 친효스킨에 적용할 공유 모듈을 만들었습니다. 더불어 친효 스킨 뿐만 아니라 타 스킨에서도 적용 가능하도록 또 하나의 모듈을 만들었습니다. 현재 친효스킨 전용은 다음번 버전 때 기본으로 적용되어 있는 파일로 제공할 계획입니다. 이곳에 올리는건 티스토리의 다른 반응형 스킨에서도 적용할 수 있는 파일 입니다.


현재 친효스킨을 사용중인 기어베스트코리아 티스토리 블로그에도 적용되어 있으며, 지금 보고 계시는 이 글에도 해당 공유 모듈이 적용되어 있습니다. 반응형이기 때문에 브라우저의 가로 사이즈를 늘리고 줄이면 알아서 크기에 맞게 변합니다. 친효애드온은 친효스킨에서 가장 완벽하지만 다른 반응형 스킨에서도 사용이 가능하도록 설계되었습니다.


업데이트 일지

2020.1.3

-카카오톡 공유 버튼이 추가 되었습니다!


2020.1.6

-밴드 공유 버튼이 추가 되었습니다!

-각 아이콘에 마우스를 올리면 잠시 후 타이틀 제목이 출력됩니다.


Script 세팅하기

먼저 스크립트를 세팅합니다. 카카오톡과 관련된 스크립트 코드 입니다.


<!-- 카카오톡 공유 스크립트 -->

<script>

    function ShareKakaoTalk() {

        Kakao.Link.sendScrap({

            requestUrl: location.href

        });

    };

</script>

친효애드온 - 본문 공유 모듈 (Script).txt


위의 첨부파일을 받으시고 스크립트를 스킨의 HTML의 <head> 안쪽에 붙여넣기를 해주시기 바랍니다.


HTML 세팅하기

다음으로 HTML을 세팅해 줍니다. 먼저 아래의 첨부파일을 다운 받으시고 메모장 안에 들어있는 모든 태그들을 전체 복사 해둡니다.

친효애드온 - 본문 공유 모듈 (HTML).txt


복사하시고 자신의 티스토리 관리자 모드에서 꾸미기 > 스킨 편집 으로 들어갑니다.


HTML에서 Ctrl + F를 누르셔서 article_rep_desc 를 검색합니다. 위의 작은 빨간색 부분이 검색이 될 것입니다. 첨부파일에서 받은 태그들을 모두 저 위치게 붙여넣기를 합니다. 큰 빨간색 네모칸 부분이 바로 그것입니다. 붙여넣기 하시고 꼭 저장 버튼을 눌러주셔야 합니다. 이제 HTML 세팅은 끝이 났습니다.


CSS 세팅하기

CSS는 그냥 빈 공간을 확보하시고 붙여넣기를 해주시면 됩니다. 먼저 아래의 첨부파일을 다운받으시고 열어보시면 여러가지 태그 요소들이 보이실텐데요, 그냥 모두 복사하시면 됩니다.

친효애드온 - 본문 공유 모듈 (CSS).txt


다 복사하셨다면 CSS 탭으로 이동합니다.


이렇게 위의 스크린샷 이미지처럼 그대로 붙여넣기를 하시고 저장하시면 됩니다. 간단합니다.


아이콘 이미지 세팅

마지막으로 공유 아이콘들을 세팅하겠습니다. 이건 그냥 이미지 파일만 올리면 됩니다. 먼저 아래의 첨부파일을 다운받고 압축을 풀어주시면 5개의 아이콘을 보실 수 있습니다.

아이콘 이미지.zip


원래는 이미지가 아닌 아이콘 폰트를 사용하려했는데, 전부 있는게 아니어서 어쩔 수 없이 이미지로 진행하게 되었습니다.


다섯개의 이미지들을 파일업로드 항목에 있는 추가 버튼을 누르시고 티스토리로 올려주세요. 업로드가 완료되면 꼭 저장 버튼을 눌러주세요. 의외로 저장 버튼을 깜박해서 잘 안되는 경우가 많습니다.


이렇게 하시면 본문 마지막 부분에 공유하기 모듈이 생성된 것을 확인하실 수 있습니다. 이제 접속하시는 분들이 글이 마음에 든다면 여기저기에 글을 퍼다 옮겨 줄 것 입니다. 티스토리에서도 기본으로 제공하는 SNS 글 공유 버튼이 있지만 너무 작은데다 세련된 디자인은 아니어서 늘 눈엣가시였는데 이번에 이렇게 만들어 놓으니 너무 좋습니다. 그러면 많은 이용 부탁드립니다. 끝.




당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. Favicon of https://eastsky3483.tistory.com
    티스토리에서 제공하는 기본 공유아이콘3가지는 어떻게 없애나요? 서로 중복되서요..ㅠ
    2019.08.01 16:50 신고
    • 안녕하세요, 플러그인에 SNS 공유하기 모듈이 있을거에요. 해제하시면 됩니다.
      2019.08.01 19:46 신고
  2. 친효님! 혹시 카톡공유도 추가하려면 어떻게 해야하는지요?

    이 글을 본이상 더이상 addthis를 사용할 필요가 없어졌거든요 카톡만 있다면!
    2020.01.03 17:44 신고
  3. 감사합니다. 잘 쓰겠습니다.ㅎㅎ 이게 모바일에선 안나오는건가요? 반응형 스킨이라 그런가.. 잘 모르겠군요.ㅎㅎ
    2020.02.26 22:28 신고
  4. PC, MOBILE에서 모두 잘 동작하네요. 감사히 잘 사용하겠습니다
    2020.04.06 01:58 신고
  5. 티스토리에서 기본 제공하는 반응형 북클럽 스킨사용하는데 모바일에서는 안나오네요.
    2020.05.02 22:06 신고
    • 티스토리앱으로 확인하셨나요?
      2020.05.02 22:09 신고
    • 티스토리앱, 모바일크롬페이지 둘다 안나옵니다.
      2020.05.02 22:18 신고
    • 티스토리앱은 원래 안나올거구요. 두번째에선 나온다고하셨으니 이상은 없는 듯 하네요.
      2020.05.02 22:23 신고
    • 아 댓글을 잘못적어서 혼동을 드렸네요 ^^; 모바일에서 안나오는다는 말이였습니다. 수정하겠습니다.
      2020.05.02 22:26 신고
    • 북클럽 스킨으로 테스트 결과 잘 적용 되는걸 확인했습니다. 스마트폰에서도 잘 나옵니다. 말씀드린것처럼 티스토리 어플리케이션에서는 안 나옵니다. 크롬 모바일 브라우저 어플리케이션에서는 잘 나옵니다. https://bhw777.tistory.com/151 이 글을 확인해 보시면 됩니다.
      2020.05.02 23:20 신고
  6. 비밀댓글입니다
    2020.05.23 12:06
    • 안녕하세요, 스크립트 설명을 빼먹었네요. 죄송합니다. 본문 업데이트 되었으니 한번 확인해 주시기 바랍니다. 감사합니다.
      2020.05.23 16:36 신고
  7. 감사합니다 친효님!! 카톡 작동 잘 됩니다.
    2020.05.23 16:41 신고