친절한효자손 취미생활

친효애드온 : 본문 공유 모듈 마크1에 대한 업데이트 내용 입니다. 따라서 아래의 글을 먼저 읽어보시고 본문을 살펴보시면 많은 도움이 될 것 입니다. 친효스킨에 적용하는 방법을 기준으로 설명 드립니다.


스크립트 세팅

티스토리 스킨의 HTML <head> 안쪽에 다음의 스크립트를 삽입해야 합니다. 내용은 아래에 있습니다.


<script>

    function ShareKakaoTalk() {

        Kakao.Link.sendScrap({

            requestUrl: location.href

        });

    };

</script>


첨부파일에도 있습니다. 아래의 파일을 다운 받으시면 됩니다.


카카오톡 공유 스크립트.txt


설명 드렸듯 head 안쪽에만 넣어두면 됩니다. 저는 </head> 바로 위에 삽입했습니다.


카카오톡 아이콘 업로드

아래에 카카오톡 아이콘 이미지 파일이 있습니다. 다운 받아서 사용하면 됩니다. 만약 이미지가 마음에 들지 않으시면 구글에서 이미지 검색을 하시면 많이 나옵니다. 그 중 하나를 찾아서 사용하시면 되는데 파일명은 반드시 첨부파일과 똑같이 바꿔 주시기 바랍니다.


logo_kakao.zip


다운로드 완료 후 압축을 푸시면 이미지 파일이 생성됩니다. 해당 파일을 스킨편집에 가셔서 파일업로드 항목에 올려주시면 됩니다.


이렇게 업로드 완료 후 적용 버튼을 눌러 저장합니다.


HTML 세팅

이제 직접적인 카카오톡 공유 버튼을 본문에 넣어보도록 합니다. 친효스킨에서는 친효애드온을 통해서 본문 공유 모듈을 제공하고 있습니다. 따라서 공유 모듈에 카카오톡 아이콘을 하나 더 추가하는 방법으로 진행하겠습니다.


<a href="javascript:ShareKakaoTalk()"><img src="./images/logo_kakao.png" alt="kakaoTalk"></a>


이 HTML 태그를 "친효애드온 : 본문 공유 모듈"에 삽입하시면 됩니다. 위의 태그가 들어 있는 메모장 파일을 아래의 첨부파일로 올려놓겠습니다. 다운 받으셔서 사용하시면 됩니다.


카카오톡 공유 버튼 HTML.txt


삽입 위치는 아래와 같습니다.


HTML에는 순서가 있습니다. rgyShare-inner 라는 클래스명을 가진 div 요소 안쪽에는 a태그 자식요소가 모두 6개가 있습니다. 가장 첫번째 순서대로 왼쪽 첫 번째 아이콘이 됩니다. 즉, 공유 모듈의 가장 왼쪽 아이콘이 페이스북, 다음 아이콘이 트위터, 그 다음 세번째는 구글플러스, 네번째가 카카오톡이 되는 것 입니다. 따라서 카카오톡 아이콘을 원하는 위치에 배치시키려면 a태그의 순서를 잘 생각하셔서 태그를 넣으시기 바랍니다. 반대로 원치 않는 아이콘은 지워버리거나 주석 처리하여 없앨 수 있습니다.


만약 친효스킨을 사용하지 않는 분들은 HTML에서 [##_article_rep_desc_##] 를 찾아서 해당 치환자 바로 아래에 삽입하면 본문의 맨 아래에 카카오톡 공유 버튼이 생성될 것 입니다. 그밖의 디테일한 위치 수정 및 스타일 편집 방법은 별도로 알아보시고 적용하셔야 합니다. 스킨마다 스타일이 다르기 때문에 해당 스킨 정보로 검색하는게 그나마 가장 빠를 것 입니다.


이제 카카오톡으로 마음껏 공유해보자!

이렇게 하여 위의 이미지처럼 현재 친효스킨의 본문 아래에는 친효애드온이 있으며, 해당 모듈 안 쪽에는 카카오톡 공유 버튼이 추가되었습니다. 정상적으로 작동하는지 살펴보시려면 본문 아래로 쭈욱 내려가셔서 직접 아이콘을 눌러 보시기 바랍니다.


카카오톡 공유 버튼을 누르면 이렇게 새 창이 뜹니다. 카카오톡 PC 버전으로도 공유가 가능합니다. 모바일에서도 가능합니다. 끝.





알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

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

잠깐! 비밀로 남겨야 할 만한 내용인가요? 그렇다면 차라리 이메일을 보내주시기 바랍니다.

  1. Favicon of https://eastsky3483.tistory.com 땅미남 2020.01.04 15:20 신고

    감사합니다 친효님^^ 덕분에 잘활용하고 있습니다~!

  2. Favicon of https://lowoon.tistory.com 네스터TV 2020.02.14 12:57 신고

    친효님 좋은 기능 추가해주셔서 감사드려요!