친절한효자손 취미생활

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

 

현재 친효스킨에는 이 모듈이 기본 적용되어 있습니다. 반응형이기 때문에 브라우저의 가로 사이즈를 늘리고 줄이면 알아서 크기에 맞게 변합니다. 친효애드온은 친효스킨에서 가장 완벽하지만 다른 반응형 스킨에서도 사용이 가능하도록 설계되었습니다.

 

업데이트 일지

2020.1.3

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

 

2020.1.6

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

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

 

Script 세팅하기

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

 

<!-- 카카오톡 공유 스크립트 -->
<script>
    function ShareKakaoTalk() {
        Kakao.Link.sendScrap({
            requestUrl: location.href
        });
    };
</script>

 

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

 

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

 

HTML 세팅하기

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

 

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

 

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

 

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

 

CSS 세팅하기

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

 

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

 

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

 

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

 

아이콘 이미지 세팅

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

 

아이콘 이미지.zip
0.02MB

 

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

 

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

 

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

 

추가내용

북클럽 스킨의 경우 ##_article_rep_desc_## 치환자가 두 영역에 존재한다는 재보를 받았습니다. 그럼 이 둘 중 어느 곳에 삽입을 해야 할까요? 정답은 아래의 위치입니다.

 

<article id="content">
    <div class="inner">
        <div class="post-cover">
            <div class="entry-content">
                [샵샵_article_rep_desc_샵샵]
            </div>
        </div>
    </div>
</article>

이 경로에 있는 샵샵에 적용시켜야 합니다. 진짜 끝!

공유하기

facebook twitter 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 신고
  8. 감사합니다~ 그런데 혹시 글이 끝나는 본문 바로 밑에 삽입 할 수 도 있나요?
    2020.12.15 03:01 신고
  9. 북클럽 사용중인데.. 똑같이 따라 했지만 pc,모바일 둘다 적용이 안되내요. 크롬인데... 참고할만한 글이 잇을까요..
    2021.03.09 16:54 신고
    • 똑같이 따라하면 잘 작동되도록 설계했습니다. 그런데도 안 된다는건 적용 과정에서 뭔가를 실수하신 것입니다.
      2021.03.09 16:59 신고
  10. article_rep_desc 으로 검색하면 2개가 나오는데, 저는 위에꺼에 넣었는데.. 이게 잘못된걸까요..

    <div class="entry-content">
    [샵샵_article_rep_desc_샵샵]
    </div>

    <div class="entry-content">
    [샵샵_article_rep_desc_샵샵]
    </div>

    설명부분처럼 class="alticle" 이라는 부분은 없어요...
    2021.03.09 17:55 신고
    • div class="article" 은 친효스킨에만 있는 것입니다. 제작자마다 다른 태그를 사용하니까요. 중요한건 샵샵 그 부분인데... 확인을 해보니 북클럽의 경우 본문에 적용되는 영역이 article id="content" 안에 있는 div class="inner" 안에 있는 div class="post-cover" 안에 있는 div class="entry-content" 의 샵샵이네요.
      2021.03.09 18:11 신고
  11. 해결되었습니다 두개중에 아래꺼내욥 감사합니디
    2021.03.09 18:21 신고
  12. 공유 버튼이 생김으로 인해 공감버튼 옆쪽에 있는 공유버튼이 필요가 없어졋는데, 공감 버튼만 두고 이걸 삭제하려면 어떻게 해야 하는지 궁금합니다.
    2021.03.09 18:37 신고
    • 음... 딱히 방해가 되진 않을 것 같아서 후속 조치를 하지 않았는데 말입니다. 정 없애고 싶으시다면 CSS에 다음의 내용을 추가합니다.

      div.wrap_btn_share {
      display: none !important;
      }

      그러면 사라질 것입니다.
      2021.03.09 18:46 신고
    • 혹시 스킨 개발 중이신가요?
      2021.03.09 18:47 신고
  13. 아닙니다. ㅎㅎ 초보 애드센스 블로거인데, 하는김에 메인블로거는 깔끔하게 꾸미고 싶어서 이것저것 해보고잇어요. 코드는 아무것도 몰라서 이것저것 필요한것 검색해서 물어서 수정해보고 있어요. 효자손님은 애드센스 블로그 알게된후부터 유명해서 알고 있었어요 ㅎㅎㅎ
    2021.03.09 18:50 신고
    • 그러시군요. 저도 많이 모릅니다. 배워나가는 중이지요. 그럼 파이팅입니다. :)
      2021.03.09 18:52 신고
  14. 혹시 남은게 ... 에 있는 신고하기가 있는데 ...을 삭제하면 문제가 생길까요? 깔끔하게 공감버튼만 남겨놓고 싶어서용
    2021.03.09 18:56 신고
    • 신고하기는 남겨야합니다.
      2021.03.09 19:05 신고
    • 신고버튼을 없앴다는건 난 불법 콘텐츠를 마구마구 작성하겠다는 의도로 해석될 수 있으니까요.
      2021.03.09 19:07 신고
  15. 그렇겠죠? 답변감사합니다 ㅎ
    2021.03.09 19:07 신고
  16. 친효님 본문 공유모듈 스크립트가 다운로드 되지 않습니다.

    확인 부탁드립니다ㅠㅠ
    2021.07.03 20:36 신고
  17. 업데이트 감사드립니다ㅎㅎ적용했는데 공유하기 내 sns 이미지가 깨져서 보이네요ㅠㅠ흑흑..
    2021.07.05 08:15 신고
  18. 앗 선생님!!! 확인해보니 막 업데이트해주신 공유모듈 스크립트에 이미지 파일들 확장자가 .gif로 되어있습니다. png로 수정하니 됩니다!!!
    2021.07.05 08:19 신고
  19. 북클럽 스킨에서 모바일에서 구현이 안되는군요ㅠㅠ
    2021.07.05 08:22 신고