티스토리 공감 클릭 시 고마움 표시하기

공감을 눌러 주신 분들께 감사한 마음을 전달하고자 생각한 방법입니다.

복잡하지 않은 내용이므로 쉽게 따라 하실 수 있습니다.

 

목차

 

토스트 기능 만들기

사실 토스트 기능을 좀 더 전파하고 싶어서 작성한 글입니다. 토스트 기능을 먼저 적용하셔야 이어서 진행이 가능합니다. 아래 포스팅 참고 하시기 바랍니다.

 

티스토리 토스트 알림 팝업 기능 만들기

티스토리 토스트 알림 팝업 기능 만들기

 

클릭 이벤트 작성하기

관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

 

html 편집을 클릭합니다.

 

그럼 다음과 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

 

body 태그 안쪽 제일 하단 script 태그 안에 붙여넣기 하시면 됩니다.

 

공감 버튼 클릭 이벤트를 감지하여 공감을 클릭했을 경우 토스트 기능으로 고마움을 표시하였습니다.

$('button.btn_post.uoc-icon').on('click',function(){
    setTimeout(function() {
        if($('button.btn_post.uoc-icon>div.like_on').length > 0) {
            showToast('사랑합니다 ♥');
        }
    }, 500);
});

멘트는 원하는 대로 바꾸시면 됩니다.

 

 

결과 확인

다음과 같이 공감을 누르는 사람도 덩달아 기분이 좋아지도록 하였습니다.

 

영상으로도 확인해 보겠습니다.

 

아래 공감 버튼을 한 번 씩 클릭하여 확인해 보세요 ㅎㅎ 네트워크 상태가 좋지 않으면 멘트가 가끔 뜨지 않을 수도 있습니다.

감사합니다 :)