[카카오뷰] 채널 홍보도구 간편만들기!! - 2탄

 

카카오뷰 채널 홍보도구 간편만들기!!

 

안녕하세요~

이전 포스팅에서 카카오뷰 채널 추가하기 버튼을 블로그에 추가하는 방법을 알려드렸는데요~

안보신 분들은 이번 포스팅을 보기 전에 먼저 보고 와주시면 이해하기 빠르실겁니다!

(👉  카카오뷰 채널 추가하기 버튼을 블로그 : https://yeony-list.tistory.com/11)

 

 

 

보시는 것 처럼, ch+ 채널 추가로 보이는 것 보다는

버튼이 내 채널명으로 보이고 싶다!!!

하시는 분들이 계실겁니다~

 

물론 개인적으로 디자인툴을 사용해 예쁘게 버튼이미지를 만들어서 적용할 수도 있지만!

카카오에서 아주 편리하게 내 채널명으로 이미지를 만들 수 있게 제공해주고 있습니다~

 

한번 알아볼까요?

정말 쉬우니까 잘 따라오세요!! 

 

1. 카카오 뷰 창작센터 → 설정 → 창작채널 관리로 이동해주세요

(다이렉트 링크 👉 카카오 뷰 창작센터 : https://creators.kakao.com/)

카카오 뷰 창작센터 > 설정 > 창작채널 관리

 

2. 채널 관리자 센터 → 채널 홍보로이동해주세요

(다이렉트 링크 👉 채널 관리자 센터 : https://center-pf.kakao.com/)

채널 관리자 센터 > 채널 홍보

 

3. 홍보도구 간편만들기로 이동 → 홍보도구 중 택1 해주세요

홍보도구 간편만들기로 이동 > 홍보도구 중 택1

 

이 중에서 저는 아이디형 배너 만들기로 다운받았습니다

아이디형 배너 만들기 이미지 저장

 

4. 채널 추가, 채팅하기 버튼 추가하기→ 코드 확인하러 가기로 이동해주세요

채널 추가, 채팅하기 버튼 추가하기 > 코드 확인하러 가기로 이동

 

 

5. 이동된 디벨로퍼스 사이트에서 JavaScript → JS SDK데모  클릭해주세요

JavaScript > JS SDK 데모 클릭

 

6. 동적으로 추가하기 클릭해주세요

💡 오른쪽의 버튼 생성버튼으로 추가하게 되면,

1탄에서 처럼 이미지텍스트를 변경할 수 없어 ch+ 채널 추가버튼으로 보이게 됩니다!

동적으로 추가하기 클릭

 

 

​

 

7. 코드 확인 및 편집에서 코드 복사를 해줍니다

📍잠깐!

코드 복사전, 내 채널에 맞는 코드 수정을 먼저하고 코드 복사를 해주세요!!

아래의 3가지 코드 꼭! 수정해주세요

src="./images/내가 저장한 이미지명.png"
alt="카카오톡뷰 내 채널명 채널 추가 버튼"
channelPublicId:'내 채널 ID값' // 내 채널 링크 복사했을 때, 가장 뒤 id값

채널 링크 복사했을 때, 가장 뒤 id값

 

코드 확인 및 편집에서 코드 복사

 

 

8. 블로그 관리 → 꾸미기 → 스킨 편집으로 이동해주세요

블로그 관리 > 꾸미기 > 스킨 편집

 

9. html 편집을 클릭해줍니다

html 편집 클릭

 

10. 파일업로드 메뉴 클릭 → 추가 클릭 → 다운받은 이미지 업로드해주세요

다운받은 이미지 업로드

 

 

9-1. </body> 태그 아래에 script코드를 붙여 넣어 주세요

</body>태그 아래에 script코드를 붙여넣어

 

11. HTML 메뉴로 이동해주세요

HTML 메뉴

 

12. a 코드를 적용하고 싶은 위치에 붙여 넣어 주세요

저는 좌측상단 프로필 옆에 노출되도록 <div class="area_profile"> 안에 코드를 넣어주었습니다!

a코드 적용

 

10. CSS 메뉴로 이동해주세요

CSS 메뉴

 

11. CSS메뉴에 아래의 커스텀 코드를 추가해주었습니다

💡 본인이 사용하고 있는 스킨에 맞춰서 커스텀 코드는 튜닝하시면 됩니다!!

커스텀 코드를 추가

 

12. 적용 버튼을 누르고, 블로그 새로고침!!

적용버튼

 

 

완성~

PC 버전

PC 화면

모바일 버전

모바일 화면

 

 

유익하셨다면,

채널 추가 / 블로그 구독 / 공감 부탁드려요 🙏