본문 바로가기
디지털 노마드/블로그 운영 팁

티스토리 사이드바에 카카오 뷰 채널 친구 추가 버튼 넣기

by rubhy 2022. 1. 18.
반응형


지난 포스팅에서 카카오 뷰 채널을 만들고 티스토리와 연동까지 했었어요. 카카오 뷰 채널을 만든 이유는 카카오 뷰 보드를 통해 제 블로그로의 유입량을 늘리려는 것이 가장 큰 목적이었어요. 그런데 반대로 블로그에서 카카오 뷰 채널에 접속하는 경우도 있을 것 같다는 생각이 들더라구요.

그래서 오늘은 티스토리 사이드바에 카카오 뷰 채널 친구 추가 버튼을 넣는 방법을 포스팅하려고 해요. 아무래도 친구 추가 버튼이 직관적으로 눈에 띄다 보니 블로그 방문자가 채널 친구 추가를 쉽게 할 수 있을 것 같아서 유용하게 느껴졌기 때문이에요.

📌 저는 전직 개발자라서 금세 했지만, 그렇지 않은 분들은 다소 어렵게 느끼실 수도 있을 것 같아요. 최대한 쉽게 포스팅해볼 테니 차근차근 따라와 주세요!



아직 카카오 뷰 채널을 생성하지 않은 상태라면, 우선 아래의 포스팅을 참고해서 먼저 채널을 생성해주세요.

<선행 작업을 위한 참고 포스팅>


카카오 뷰 채널 만들기 & 티스토리와 연동하기 (카카오 서비스 연동 방법)

 

카카오 뷰 채널 만들기 & 티스토리와 연동하기 (카카오 서비스 연동 방법)

티스토리 블로그를 운영하면서 가장 아쉬웠던 점이 우리나라 점유율 부동의 1위 검색엔진인 네이버에 노출이 잘 되지 않는다는 점이었어요. 다음, 구글, 빙, 줌 등에서 유입자가 꾸준히 있긴 하

rubhy.tistory.com

 

 


카카오 뷰 채널 친구 추가 버튼 만들기

우선 ‘카카오톡 채널 관리자센터’에 접속 후 카카오톡 계정으로 로그인해서 내 채널에 접속해주세요.



카카오톡 채널 관리자센터

 

카카오톡 채널 관리자센터

세상의 모든 비즈니스를 완성합니다. 지금 무료로 만들어 새로운 비즈니스 홈을 경험하세요.

center-pf.kakao.com



왼쪽 메뉴 하단의 ‘채널 홍보’ 메뉴로 접속해주세요.
그 다음 ‘3. 홍보도구 간편 만들기’의 첫 번째에 위치한 ‘아이디형 배너 만들기’를 클릭해주세요.
(배너의 모양은 원하는 것으로 제작하면 되지만, 저는 사이드바에 넣기에 크기가 적당하다고 느낀 아이디형 배너로 제작했어요.)

 



새창이 뜨면서 내 채널명이 자동으로 적용된 배너가 생성된 걸 확인할 수 있어요.
‘이미지 저장’ 버튼을 클릭해서 찾기 쉬운 위치에 파일을 저장해주세요.

여기까지가 채널 추가 버튼의 이미지를 만드는 방법이에요.
하지만 이미지만으로 실질적인 동작이 이루어지지는 않기 때문에 이제 동작을 위한 내용을 진행해볼게요.

 



다시 새창을 닫고 이전 화면으로 돌아온 다음, 화면 상단으로 스크롤을 이동해주세요.

우선 ‘1. 채널 홍보하기’ 메뉴에서 채널 URL을 확인할 텐데, 'http://pf.kakao.com/'는 그냥 두고 뒷부분만 복사해서 메모장에 붙여 넣어 주세요. (제 채널의 경우에는 '_jaxbTb'만 복사하면 되겠죠.)
(오타가 나지 않도록 유의해야 하므로 직접 타이핑하기보다는 복사해서 사용하시길 추천합니다.)

그 다음엔 바로 아래에 있는 ‘채널 추가, 채팅하기 버튼 추가하기’ 메뉴의 ‘코드 확인하러 가기’ 버튼을 클릭해주세요.

 



Kakao Developers 화면이 나오면 ‘JS SDK 데모’ 버튼을 클릭해주세요.

 



카카오톡 채널 추가 버튼의 동작을 생성하기 위한 화면이에요.
구현 방법을 선택해야 하는데, 바로 하단에 기능 미리보기 및 테스트 화면이 있어서 고르기 쉽더라구요.
저는 ‘동적으로 추가하기’를 선택했어요.

 



화면 하단을 보면 코드를 확인할 수 있어요.
이 코드에서 두 군데를 수정해서 사용하게 될 거예요.

우선 10번째 줄에 있는 channelPublicId : 의 뒷부분에 조금 전 복사해서 메모장에 옮겨놓았던 채널 URL의 뒷부분을 붙여 넣어 주세요.
(예. chnnelPublicId : '_jaxbTb',)

다음으로 3번째 줄의 내용을 수정해야 하는데, 그전에 우선 해야 하는 작업이 있어요.

 



티스토리 관리 화면의 ‘꾸미기 > 스킨 편집’ 메뉴에 접속해주세요.
그런 다음 화면 오른쪽 상단의 ‘html 편집’을 클릭합니다.

 



상단 메뉴 중 ‘파일업로드’에서 ‘+추가’ 버튼을 클릭해서 아까 전에 만들어놓은 이미지 파일을 업로드합니다.
파일명 위에 마우스를 가져다 대면 조금 전 만든 이미지 파일이 잘 올라간 것을 확인할 수 있어요.
(저는 파일을 찾기 편하게 하려고 파일명을 변경해두었는데, 기본 파일명은 id_type.png 입니다.)

이제 이미지 파일의 경로는 './images/이미지파일명.확장자'가 됩니다.
(제 경우에는 './images/kvRubhy.png'가 이미지 파일의 경로입니다.)

(참고. 이렇게 이미지 파일을 티스토리 스킨에 업로드하면 이미지 파일의 경로가 지정되는데, 이 지정된 경로를 아까 전 코드의 3번째 줄에 언급해줘야 이미지 파일과 코드가 서로 연결이 되는 원리예요.)

 



다시 코드 부분으로 돌아와서 3번째 줄에 있는 src= 의 뒷부분에 방금 지정한 이미지 파일 경로를 입력해줍니다.
코드를 수정할 때는 항상 오타가 나지 않도록 주의해주세요.
(예. src="./images/kvRubhy.png")

이렇게 해서 카카오 뷰 채널의 친구 추가 버튼을 생성했어요.
이제는 생성한 버튼을 티스토리 사이드바에 넣는 작업이 남았어요.

 


티스토리 사이드바에 카카오 뷰 친구 추가 버튼 넣기

이제 조금 전 만들었던 코드를 두 개로 분리해서 약간 수정한 다음에 각각 다른 위치에 붙여 넣어 줄 거예요.
제 경우의 코드는 아래와 같습니다.

 

💜 코드 1.

<div class="sidebar-kv"> 
  <s_sidebar> 
    <s_sidebar_element> 
      <!-- 카카오 뷰 친구 추가 버튼 --> 
      <a id="channel-add-button" href="#" onclick="void addChannel();"> 
          <img src="./images/kvRubhy.png" 
               alt="카카오톡 채널 추가 버튼" 
               style="width:120px;" 
          /> 
      </a>
    </s_sidebar_element>
  </s_sidebar> 
</div>

👉 코드에 일부 내용을 추가했어요. 조금 전 수정했던 src="파일경로" 부분을 제외하고는 제 코드의 내용을 똑같이 사용하시길 추천드려요. (코드를 따라 쓸 때 오타 없도록 주의하세요!)
👉 style="width:120px;" 은 버튼의 크기 조절을 위해 추가한 부분이에요. 100~200px 사이에서 숫자를 수정해보면서 각자의 블로그에 맞는 사이즈를 찾아 적용하시면 돼요.

 

💜 코드 2.

<!-- 카카오 뷰 친구 추가 버튼 --> 
<script type="text/javascript"> 
  function addChannel() { 
    Kakao.Channel.addChannel({ 
      channelPublicId: '_jaxbTb', 
    }) 
  } 
</script>



티스토리 관리 화면의 ‘꾸미기 > 스킨 편집 > html 편집 > HTML’ 메뉴에 접속해주세요.

ctrl+F 단축키로 'sidebar'를 검색해주세요.
저는 채널 추가 버튼의 위치를 사이드바의 카테고리 바로 아래로 잡았어요.
아래 캡처를 통해 코드가 들어가야 할 위치를 확인하고 코드 1을 붙여 넣어주세요.
(줄 번호는 중요하지 않아요. 카테고리 아래 위치를 확인해주세요.)

 



이제 스크롤바를 끝까지 내려서 </footer>를 찾아주세요.
아래 캡처를 통해 코드가 들어가야 할 위치를 확인하고 코드 2를 붙여 넣어주세요.
(다시 한번, 줄 번호는 중요하지 않아요. </footer>와 </body> 사이에 들어가면 돼요.)

 



이렇게 카카오 뷰 채널 친추 버튼을 블로그 사이드바에 추가하는 방법을 알아봤어요.
어려워 보이지만 막상 해보면 누구나 쉽게 할 수 있을 거라고 생각해요. 😊

 

 



그럼 행복한 하루 보내시길 바랍니다 💜
공감과 댓글 언제나 감사드려요!

반응형

댓글