친효애드온 - 티스토리 본문 카카오톡 공유 버튼 만들기 (공유모듈 업데이트)
친효애드온 : 본문 공유 모듈 마크1에 대한 업데이트 내용 입니다. 따라서 아래의 글을 먼저 읽어보시고 본문을 살펴보시면 많은 도움이 될 것 입니다. 친효스킨에 적용하는 방법을 기준으로 설명 드립니다.
스크립트 세팅
티스토리 스킨의 HTML <head> 안쪽에 다음의 스크립트를 삽입해야 합니다. 내용은 아래에 있습니다.
<script>
function ShareKakaoTalk() {
Kakao.Link.sendScrap({
requestUrl: location.href
});
};
</script>
첨부파일에도 있습니다. 아래의 파일을 다운 받으시면 됩니다.
설명 드렸듯 head 안쪽에만 넣어두면 됩니다. 저는 </head> 바로 위에 삽입했습니다.
카카오톡 아이콘 업로드
아래에 카카오톡 아이콘 이미지 파일이 있습니다. 다운 받아서 사용하면 됩니다. 만약 이미지가 마음에 들지 않으시면 구글에서 이미지 검색을 하시면 많이 나옵니다. 그 중 하나를 찾아서 사용하시면 되는데 파일명은 반드시 첨부파일과 똑같이 바꿔 주시기 바랍니다.
다운로드 완료 후 압축을 푸시면 이미지 파일이 생성됩니다. 해당 파일을 스킨편집에 가셔서 파일업로드 항목에 올려주시면 됩니다.
이렇게 업로드 완료 후 적용 버튼을 눌러 저장합니다.
HTML 세팅
이제 직접적인 카카오톡 공유 버튼을 본문에 넣어보도록 합니다. 친효스킨에서는 친효애드온을 통해서 본문 공유 모듈을 제공하고 있습니다. 따라서 공유 모듈에 카카오톡 아이콘을 하나 더 추가하는 방법으로 진행하겠습니다.
<a href="javascript:ShareKakaoTalk()"><img src="./images/logo_kakao.png" alt="kakaoTalk"></a>
이 HTML 태그를 "친효애드온 : 본문 공유 모듈"에 삽입하시면 됩니다. 위의 태그가 들어 있는 메모장 파일을 아래의 첨부파일로 올려놓겠습니다. 다운 받으셔서 사용하시면 됩니다.
삽입 위치는 아래와 같습니다.
HTML에는 순서가 있습니다. rgyShare-inner 라는 클래스명을 가진 div 요소 안쪽에는 a태그 자식요소가 모두 6개가 있습니다. 가장 첫번째 순서대로 왼쪽 첫 번째 아이콘이 됩니다. 즉, 공유 모듈의 가장 왼쪽 아이콘이 페이스북, 다음 아이콘이 트위터, 그 다음 세번째는 구글플러스, 네번째가 카카오톡이 되는 것 입니다. 따라서 카카오톡 아이콘을 원하는 위치에 배치시키려면 a태그의 순서를 잘 생각하셔서 태그를 넣으시기 바랍니다. 반대로 원치 않는 아이콘은 지워버리거나 주석 처리하여 없앨 수 있습니다.
만약 친효스킨을 사용하지 않는 분들은 HTML에서
친효애드온 : 본문 공유 모듈 마크1에 대한 업데이트 내용 입니다. 따라서 아래의 글을 먼저 읽어보시고 본문을 살펴보시면 많은 도움이 될 것 입니다. 친효스킨에 적용하는 방법을 기준으로 설명 드립니다.
스크립트 세팅
티스토리 스킨의 HTML <head> 안쪽에 다음의 스크립트를 삽입해야 합니다. 내용은 아래에 있습니다.
<script>
function ShareKakaoTalk() {
Kakao.Link.sendScrap({
requestUrl: location.href
});
};
</script>
첨부파일에도 있습니다. 아래의 파일을 다운 받으시면 됩니다.
설명 드렸듯 head 안쪽에만 넣어두면 됩니다. 저는 </head> 바로 위에 삽입했습니다.
카카오톡 아이콘 업로드
아래에 카카오톡 아이콘 이미지 파일이 있습니다. 다운 받아서 사용하면 됩니다. 만약 이미지가 마음에 들지 않으시면 구글에서 이미지 검색을 하시면 많이 나옵니다. 그 중 하나를 찾아서 사용하시면 되는데 파일명은 반드시 첨부파일과 똑같이 바꿔 주시기 바랍니다.
다운로드 완료 후 압축을 푸시면 이미지 파일이 생성됩니다. 해당 파일을 스킨편집에 가셔서 파일업로드 항목에 올려주시면 됩니다.
이렇게 업로드 완료 후 적용 버튼을 눌러 저장합니다.
HTML 세팅
이제 직접적인 카카오톡 공유 버튼을 본문에 넣어보도록 합니다. 친효스킨에서는 친효애드온을 통해서 본문 공유 모듈을 제공하고 있습니다. 따라서 공유 모듈에 카카오톡 아이콘을 하나 더 추가하는 방법으로 진행하겠습니다.
<a href="javascript:ShareKakaoTalk()"><img src="./images/logo_kakao.png" alt="kakaoTalk"></a>
이 HTML 태그를 "친효애드온 : 본문 공유 모듈"에 삽입하시면 됩니다. 위의 태그가 들어 있는 메모장 파일을 아래의 첨부파일로 올려놓겠습니다. 다운 받으셔서 사용하시면 됩니다.
삽입 위치는 아래와 같습니다.
HTML에는 순서가 있습니다. rgyShare-inner 라는 클래스명을 가진 div 요소 안쪽에는 a태그 자식요소가 모두 6개가 있습니다. 가장 첫번째 순서대로 왼쪽 첫 번째 아이콘이 됩니다. 즉, 공유 모듈의 가장 왼쪽 아이콘이 페이스북, 다음 아이콘이 트위터, 그 다음 세번째는 구글플러스, 네번째가 카카오톡이 되는 것 입니다. 따라서 카카오톡 아이콘을 원하는 위치에 배치시키려면 a태그의 순서를 잘 생각하셔서 태그를 넣으시기 바랍니다. 반대로 원치 않는 아이콘은 지워버리거나 주석 처리하여 없앨 수 있습니다.
만약 친효스킨을 사용하지 않는 분들은 HTML에서 를 찾아서 해당 치환자 바로 아래에 삽입하면 본문의 맨 아래에 카카오톡 공유 버튼이 생성될 것 입니다. 그밖의 디테일한 위치 수정 및 스타일 편집 방법은 별도로 알아보시고 적용하셔야 합니다. 스킨마다 스타일이 다르기 때문에 해당 스킨 정보로 검색하는게 그나마 가장 빠를 것 입니다.
이렇게 하여 위의 이미지처럼 현재 친효스킨의 본문 아래에는 친효애드온이 있으며, 해당 모듈 안 쪽에는 카카오톡 공유 버튼이 추가되었습니다. 정상적으로 작동하는지 살펴보시려면 본문 아래로 쭈욱 내려가셔서 직접 아이콘을 눌러 보시기 바랍니다.
카카오톡 공유 버튼을 누르면 이렇게 새 창이 뜹니다. 카카오톡 PC 버전으로도 공유가 가능합니다. 모바일에서도 가능합니다. 끝.
이렇게 하여 위의 이미지처럼 현재 친효스킨의 본문 아래에는 친효애드온이 있으며, 해당 모듈 안 쪽에는 카카오톡 공유 버튼이 추가되었습니다. 정상적으로 작동하는지 살펴보시려면 본문 아래로 쭈욱 내려가셔서 직접 아이콘을 눌러 보시기 바랍니다.
카카오톡 공유 버튼을 누르면 이렇게 새 창이 뜹니다. 카카오톡 PC 버전으로도 공유가 가능합니다. 모바일에서도 가능합니다. 끝.
