[카카오뷰] 채널추가하기 버튼 블로그에 추가하는 방법 - 1탄

 

카카오뷰 채널 추가하기 버튼 블로그에 추가하는 방법!!

 

안녕하세요~

카카오뷰 라고 다양한 시선으로 큐레이션 된 콘텐츠를 발견할 수 있는 카카오에서 새롭게 선보인 서비스입니다!

https://view.kakao.com/

카카오 뷰

 

카카오톡 내의 카카오뷰 메뉴

많이들 알고 계실 텐데, 모바일 카카오톡 내에서 중앙 하단에 눈 모양 메뉴를 클릭하면 뷰 콘텐츠를 확인할 수 있습니다~

 

 

카카오뷰 채널에 티스토리가 연동되어 편리하게 블로그 글을 큐레이션 할 수 있습니다.

반대로, 카카오에서 자바스크립트를 이용한 티스토리 블로그에 카카오뷰 채널 친구 추가할 수 있도록 채널 추가하기 버튼을 제공하고 있어서 해당 방법을 공유드립니다!

 

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

 

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

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

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

 

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

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

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

 

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

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

 

4. 이동된 디벨로퍼스 사이트에서 JavaScript > 채널 추가하기 버튼을 눌러주세요

JavaScript > 채널 추가하기 버튼

 

5-1. 접속된 채널 추가하기 메뉴에서 채널 공개 ID 입력해주세요

채널 공개 ID는 본인의 채널 URL의 마지막 ID값을 넣어주세요

5-2. 버튼 크기 선택해주세요

저는 작은 사이즈를 선택했습니다!

5-3. 코드 생성 버튼을 눌러주세요

채널 공개 ID 입력, 버튼 크기 선택, 코드 생성 버튼

 

6. 1번의 script코드와 2번의 div코드를 복사해 둡니다

1번의 script코드와 2번의 div코드를 복사

 

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

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

 

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

html 편집 클릭

 

이제부터 중요합니다!!

집중! 집중!

 

 

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

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

 

9-2. div코드는 <div id="dkWrap" class="wrap_skin "> 안에 붙여 넣어 주세요

저는 상단 메뉴에 노출되도록 검색 영역 위쪽에 코드를 넣어주었습니다

div코드는 <div id="dkWrap" class="wrap_skin "> 안에 붙여넣기

 

여기까지 적용하셨으면 메뉴에 채널 추가하기 버튼이 잘 보일 텐데요~

저는 블로그가 반응형으로 모바일에서 모바일 버전으로 노출되게 설정해놔서

모바일에서도 잘 보일 수 있도록 CSS도 함께 수정했습니다!

 

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

CSS 메뉴

 

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

CSS메뉴 스타일 커스텀

 

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

적용버튼

 

완성~

PC 버전

PC버전 화면

모바일 버전

모바일 버전 화면

 

유익하셨다면,

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