친효애드온 : 티스토리 카카오톡 플러스 1:1 채팅 모듈
이번 친효애드온은 카카오톡 플러스 1:1채팅에 대한 내용 입니다. 카카오톡 플러스를 보통 카톡플러스라고도 부르기도 합니다. 카톡플러스는 비즈니스 용도의 카카오톡 이라고 생각하시면 됩니다. 이 기능은 카카오톡에서 실제로 제공하고 있는 기능으로서 다양한 스타일과 기능들을 추가해서 사용자의 편의성에 많은 신경을 쓰고 있습니다. 그중에서도 카톡플러스 채팅 아이콘을 티스토리 사이드바에 넣음으로서 블로그 주인과 원활한 소통을 하는데 유리하게 만들 수 있습니다. 보통 블로그로 비즈니스를 하시는 분들에게 요긴할 것 같습니다.
CSS 세팅하기
우선 CSS부터 설정하도록 합니다. 순서는 관계 없습니다. HTML이 되었든, CSS가 되었든 다 완료가 되어야 정상적으로 출력이 되니까요. 자신의 티스토리 관리자 화면에서 스킨 편집 모드로 들어갑니다. 그리고 아래의 첨부파일을 다운로드 받습니다.
메모장 안에 있는 모든 내용을 복사하고 스킨의 CSS 카테고리에 빈 공간을 확보하시고 붙여넣기를 해주시면 됩니다. 위치는 크게 상관 없습니다.
이렇게 빈 공간을 만들어준 다음 적당히 붙여넣기 해주시면 됩니다.
이미지 파일 세팅하기
이제 카카오톡 아이콘을 첨부파일에 업로드를 해줘야 합니다. 아래의 파일을 다운로드 받으시고 압축을 풀어주시기 바랍니다.
안에는 카카오톡 아이콘이 있습니다. 이것을 티스토리 첨부파일 카테고리에 업로드를 합니다.
업로드는 이렇게 진행하시면 됩니다. 어렵지 않습니다.
업로드 완료 후에는 해당 이미지의 주소를 알아야 합니다. 방금 업로드한 파일 위에서 마우스 오른쪽 버튼을 눌러서 이미지 주소를 복사합니다. (크롬 기준) 복사한 주소를 메모장에 임시로 붙여넣기 해두시기 바랍니다.
HTML 세팅하기
이제 거의 다 되었습니다. 뼈대라 할 수 있는 HTML만 세팅하시면 끝 입니다. 먼저 아래의 첨부파일을 다운로드 받습니다. 그리고 열어보시기 바랍니다.
열어보시면 아래와 같은 코드를 살펴보실 수 있습니다.
<s_sidebar_element>
<!--카톡플러스 1:1 채팅-->
<div class="rgy-sidebar-title rgy-sidebar-content">
<h3>카톡플러스 1:1 채팅</h3>
<a class="rgyMyPrpfile" href="●" target="_blank" title="카카오톡 플러스친구 추가하기">
<img class="rgyMyPrpfile-logo" src="■" alt="카카오톡 플러스">
<span class="rgyMyPrpfile-text" target="_blank">★</span>
</a>
</div>
</s_sidebar_element>
여기에서 특수기호로 표시된 부분을 수정해서 사용할 것 입니다. 아래에 각 특수기호의 설명을 작성해 두었습니다. 꼼꼼히 읽어보시고 적용하시기 바랍니다.
● : 클릭했을 때 자신의 카톡플러스 1:1 채팅창이 열리는 주소
■ : 첨부파일에 업로드한 이미지 파일 주소
★ : 모듈에 보여질 자신의 카카오톡 플러스 닉네임
이렇게 정의하고 있습니다. 따라서 방금전에 메모장에 임시로 붙여넣기를 한 이미지 주소는 네모를 지우고 그 안에 붙여넣기를 해주시면 됩니다. 별표는 여러분들의 플러스친구 닉네임을 텍스트로 직접 적어주시기 바랍니다. 영어든 한글이든 상관 없습니다. 동그라미는 아래처럼 해주시면 됩니다.
카카오톡 플러스친구 가입 및 생성하기
먼저 여기를 눌러서 카카오톡 플러스친구 관리자센터 홈페이지로 이동합니다. 회원가입이 안 되어 있다면 먼저 가입을 진행합니다.
관리자 화면으로 오시는데 왼쪽 카테고리를 보시면 홍보하기라고 하는 항목이 있습니다. 해당 항목으로 들어가시면 오른쪽 상단에 플러스친구 홍보하기 안내가 있습니다. 그곳에 관련 URL이 있습니다. 홈과 채팅 두 가지 주소가 있고 원하시는 주소를 복사하셔서 동그라미 부분을 지우고 거기에 붙여넣기를 해주시면 됩니다. 저는 채팅 URL로 진행했습니다. 이제 커스텀한 HTML 코드를 티스토리 관리자에 있는 꾸미기 > 사이드바 카테고리로 들어가서 사용해 줍니다.
이렇게 기본 모듈에 있는 HTML 배너출력 더하기 버튼을 눌러서 오른쪽 사이드바1에 추가합니다. 그리고 추가된 배너출력 모듈의 편집 버튼을 누릅니다.
방금 커스텀한 HTML 코드를 모두 복사하여 위에 표시된 부분에 그대로 붙여넣기를 합니다. 이름 부분은 그냥 사이드바에서 알아볼 수 있는 것으로 설정하시면 됩니다. 다 되었으면 확인 버튼을 눌러서 저장합니다. 이제 메인 화면의 사이드바 모습을 살펴봅시다. 저는 프로필 아래에 등록했습니다.
보시는 것 처럼 현재 사이드바의 블로그 정보 모듈 바로 아래에 이렇게 카톡플러스 1:1 채팅 배너 모듈이 완성이 되었습니다. 해당 배너를 클릭하면 자신의 카카오톡에 자동으로 저와 1:1로 대화할 수 있는 채팅창이 열립니다. 이 채팅창은 정말 긴급할 때만 사용해 주시기 바랍니다. 끝.
