친효애드온 : 본문용 SNS 공유 모듈 (마크1)
안녕하세요, 친절한효자손 입니다. 친효스킨에 적용할 공유 모듈을 만들었습니다. 더불어 친효 스킨 뿐만 아니라 타 스킨에서도 적용 가능하도록 또 하나의 모듈을 만들었습니다. 현재 친효스킨 전용은 다음번 버전 때 기본으로 적용되어 있는 파일로 제공할 계획입니다. 이곳에 올리는건 티스토리의 다른 반응형 스킨에서도 적용할 수 있는 파일 입니다.
현재 친효스킨에는 이 모듈이 기본 적용되어 있습니다. 반응형이기 때문에 브라우저의 가로 사이즈를 늘리고 줄이면 알아서 크기에 맞게 변합니다. 친효애드온은 친효스킨에서 가장 완벽하지만 다른 반응형 스킨에서도 사용이 가능하도록 설계되었습니다.
업데이트 일지
2020.1.3
-카카오톡 공유 버튼이 추가 되었습니다!
2020.1.6
-밴드 공유 버튼이 추가 되었습니다!
-각 아이콘에 마우스를 올리면 잠시 후 타이틀 제목이 출력됩니다.
Script 세팅하기
먼저 스크립트를 세팅합니다. 카카오톡과 관련된 스크립트 코드 입니다.
<!-- 카카오톡 공유 스크립트 -->
<script>
function ShareKakaoTalk() {
Kakao.Link.sendScrap({
requestUrl: location.href
});
};
</script>
위의 첨부파일을 받으시고 스크립트를 스킨의 HTML의 <head> 안쪽에 붙여넣기를 해주시기 바랍니다.
HTML 세팅하기
다음으로 HTML을 세팅해 줍니다. 먼저 아래의 첨부파일을 다운 받으시고 메모장 안에 들어있는 모든 태그들을 전체 복사 해둡니다.
복사하시고 자신의 티스토리 관리자 모드에서 꾸미기 > 스킨 편집 으로 들어갑니다.
HTML에서 Ctrl + F를 누르셔서 article_rep_desc 를 검색합니다. 위의 작은 빨간색 부분이 검색이 될 것입니다. 첨부파일에서 받은 태그들을 모두 저 위치게 붙여넣기를 합니다. 큰 빨간색 네모칸 부분이 바로 그것입니다. 붙여넣기 하시고 꼭 저장 버튼을 눌러주셔야 합니다. 이제 HTML 세팅은 끝이 났습니다.
CSS 세팅하기
CSS는 그냥 빈 공간을 확보하시고 붙여넣기를 해주시면 됩니다. 먼저 아래의 첨부파일을 다운받으시고 열어보시면 여러가지 태그 요소들이 보이실텐데요, 그냥 모두 복사하시면 됩니다.
다 복사하셨다면 CSS 탭으로 이동합니다.
이렇게 위의 스크린샷 이미지처럼 그대로 붙여넣기를 하시고 저장하시면 됩니다. 간단합니다.
아이콘 이미지 세팅
마지막으로 공유 아이콘들을 세팅하겠습니다. 이건 그냥 이미지 파일만 올리면 됩니다. 먼저 아래의 첨부파일을 다운받고 압축을 풀어주시면 5개의 아이콘을 보실 수 있습니다.
원래는 이미지가 아닌 아이콘 폰트를 사용하려했는데, 전부 있는게 아니어서 어쩔 수 없이 이미지로 진행하게 되었습니다.
다섯개의 이미지들을 파일업로드 항목에 있는 추가 버튼을 누르시고 티스토리로 올려주세요. 업로드가 완료되면 꼭 저장 버튼을 눌러주세요. 의외로 저장 버튼을 깜박해서 잘 안되는 경우가 많습니다.
이렇게 하시면 본문 마지막 부분에 공유하기 모듈이 생성된 것을 확인하실 수 있습니다. 이제 접속하시는 분들이 글이 마음에 든다면 여기저기에 글을 퍼다 옮겨 줄 것 입니다. 티스토리에서도 기본으로 제공하는 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>이 경로에 있는 샵샵에 적용시켜야 합니다. 진짜 끝!
