티스토리 사이드바에 카카오뷰 친구추가버튼 쉽게 만들기

 

 

 

 

안녕하세요 솜잉이예요
요즘 티친분들도 그렇고 포럼에서도 카카오뷰가 블루오션이라고들 설명해주셔서 카카오뷰를 알게 되었어요
만드는방법은 간단하고 설명이 잘 되어있어서 어렵지 않게 만들어두었는데요
제가 오늘 알려드릴내용은 사이드바에 카카오뷰 친구추가버튼을 만드는방법입니다
모바일로 보시는 분들은 안보이시겠지만 컴퓨터로 보면 짜잔★

사이드바에 친구추가버튼이 생겼습니다ㅎㅎㅎ
어떻게 만들었는지 설명해드릴게요
저는 카카오톡관리자센터를 활용해서 쉽게 만들었어요

카카오뷰를 만드시면 카카오톡채널 관리자센터를 이용하실 수가 있어요
피씨에서 검색을 하시고 들어가줍니다

먼저 이미지 왼쪽 카테고리에서 채널 홍보를 찾아주시고 스크롤을 내리면 3번 홍보도구 간편만들기가 있어요

다양한 사이즈의 채널추가 이미지를 자동으로 만들어줘요 제가 사이드바에 추가한것은 아이디형 배너입니다
이미지를 저장하시고 이름을 영문으로 알기쉽게 변경해주세요

그다음 상단으로 돌아가서 이미지의 2번 채널추가 코드 확인하러가기 버튼을 클릭해주세요

JS SDK 데모 클릭!

그다음 구현방법을 선택해주세요

• 동적으로 추가하기: 버튼만 클릭하면 바로 채널추가가 되도록 구현됩니다.
• 버튼생성: 버튼을 누르면 카카오뷰 채널 홈으로 이동되도록 구현됩니다.

선택을 하시면 코드가 생성이 됩니다
생성된 코드를 밑줄 표시해둔 두가지 수정을 해주셔야 되는데요

 

☞첫번째수정사항

<img src="./images/id_type.png(이미지이름)" alt="카카오톡 채널 추가 버튼" />

밑줄 친 부분을 삭제 후 이미지경로를 지정해줍니다

표시해둔 부분은 아까 변경하신 이미지이름으로 변경을 하시면 되시고 나머지는 그대로 복사를 하시면 됩니다

 

 

 

 

 

 

제일 처음 만들어둔 이미지를 티스토리에 접속하여 설정>스킨편집>html 수정>파일업로드 페이지에서
왼쪽 하단의 추가하기클릭하여 이미지를 업로드해주세요
티스토리의 이미지는 ./images 폴더에 전부 등록이 된다고해요

경로수정은 ./images/이미지이름.jpg 혹은 png으로 수정을 해주시면 돼요

저는 <img src="./images/id_type.png"> 로 수정을 해주었어요

 

☞두번째수정사항

 

<script type="text/javascript"> function addChannel() { Kakao.Channel.addChannel({ channelPublicId: '_Pnxcsb' (자신의 채널고유번호확인 후 변경해주세요), }) } </script>

 

두번째 수정할 것은 스크립트 부분의 카카오뷰 채널 url이예요
홍보하기 젤 상단의 채널 URL을 확인하셔서 언더바부터 뒷부분 고유번호를 체크해둔 부분으로 변경해주시면 코드수정 끝이예요

 

☞첫번째 수정사항 적용

<s_sidebar_element>
<!--카카오뷰친구추가버튼-->
  <a id="channel-add-button" href="#" onclick="void addChannel();">
    <img src="./images/id_type.png" style="width:200px; " /><!--이미지경로변경(./images/이미지이름.이미지확장자)-->
  </a>
</s_sidebar_element>

 

이제 티스토리 html 편집기로 가셔서 단축키 ctrl+F 를 누르셔서 s_sidebar 검색을 해주고 표시된 부분을 확인하셔서  <s_sidebar_element> 이 중간부분에 복사해온 코드를 붙여넣어줍니다 </s_sidebar_element>

북클럽 테마를 기준으로 저는 기존의 소셜채널부분을 삭제 후 적용하였습니다

필요없는 부분을 지우시거나 혹은 <s_sidebar_element> 사이드바 위치에 새로 추가를 해주셔도 됩니다

추가를 하실때에는 시작태그<s_sidebar_element> 와 닫는태그</s_sidebar_element> 를 넣어야 하는점 확인해주시구 오타가 있어도 적용이 안되니 주의해주세요
이미지 사이즈가 생각보다 커서 저는 따로 style="width: 200px" 
이미지의 가로 사이즈를 200픽셀로 지정해주었어요

***사이드바의 사이즈는 자신의 블로그에 맞게 200px 안팎으로 원하시는 사이즈로 조절해 주시면 됩니다***

 

 

☞두번째 수정사항 적용

<script type="text/javascript">
  function addChannel() {
    Kakao.Channel.addChannel({
      channelPublicId: '_Pnxcsb',/*http://pf.kakao.com/_Pnxcsb(채널URL의 뒷부분 고유번호입력)*/
    })
  }
</script>

 

그리고 젤 하단 </footer> 뒷부분과 </body>의 사이에 스크립트를 추가해주시고 저장하시면 끝!
이미지를 따로 만들지 않고 수정을 조금만 해주시면 친구추가버튼이 완성됩니다!

상단의 이미지를 참고해주세요
도움이 되셨기를 바랍니다!

 

 

---

 

끝까지 읽어주셔서 감사합니다

오늘도 기분좋은 하루 되세요

 

카카오뷰 채널도 만들었으니 함께해요

하단 이미지 링크를 클릭하시면 채널이 추가됩니다!