카카오채널 추가방법 문의

JavaScript
1

지금 사용하는 사이트 제휴사는 카페 24입니다

카카 채널추가 아이콘추가를 기존 top/nottom 버튼이 있는 css와 html,js에 넣으면 되는거 같은데 아무리 해봐도 잘 안되는거같아서 문의 드립니다.

*현재 html은 이렇게 되어있습니다 아래 *있는게 작동이 안되는거같아 우선 임의로 넣어 둔 상태입니다.

< div id=“goBtn” class=“back-top”>
< a href="#none" class=“btn up fade”>
< a href="#none" class=“btn down fade”>
< a href=“http://pf.kakao.com/_gtSkb” class=“btn kakao fade”>
< /div>
이상하게 위 html만 안떠서 띄어쓰기 넣어서 기재합니다

*  <div id="kakao-talk-channel-add-button"
         data-channel-public-id="_bJKxoxb"
         data-size="large"
         data-support-multiple-densities="true">
    </div>

*현재 css입니다

.back-top {position:fixed; right:5%; bottom:5%; cursor:pointer; z-index:999; display:none;}

#goBtn .btn {display:block; width:40px; height:40px; background:url(’/web/upload/goodymall/kr/layout/scroll.png’) 0 0;}
#goBtn .up {display:block; background:url(’/web/upload/goodymall/kr/layout/scroll.png’) 0 0; margin-bottom:3px;}
#goBtn .down {display:block; background:url(’/web/upload/goodymall/kr/layout/scroll.png’) 0 -40px;}
#goBtn .btn:hover {opacity:0.5;}

#goBtn .kakao {display:block;background:url(’/web/upload/goodymall/kr/layout/kakao.png’) 0 0; margin-bottom:3px;}

현재 js입니다
/ 스크롤시 나타나는 TOP버튼 */

$(document).ready(function(){
  $(window).scroll(function () {
   if ($(this).scrollTop() > 10) { 
        $('.back-top').fadeIn();
   } else {
       $('.back-top').fadeOut();
   }
  });

  $('.back-top').click(function () {
   $('body,html').animate({
        scrollTop: 0
   }, 200);
        return false;
  });
});

$(document).ready(function(){
var top_btn = $("#goBtn").offset().top;
$(window).scroll(function(){
if($(window).scrollTop() > top_btn+400) {
$(’#goBtn’).addClass(‘btnFixed’);
}

});

$(".btn.up").click(function(){
    return $("html, body").animate({scrollTop:0},1200,"easeInOutExpo"),!1});

$(".btn.down").click(function(){
	return $("html, body").animate({scrollTop:$(document).height()},1200,"easeInOutExpo"),!1});

});

$window.kakaoAsyncInit = function()
{
Kakao.Channel.createAddChannelButton({
container: ‘#kakao’});
};

뭐가 문제 인지 모르겠습니다…

2

안녕하세요.

html에 사용한 ID값과 스크립트에 설정한 ID값이 다릅니다.

<div id="kakao-talk-channel-add-button" ... />

...

Kakao.Channel.createAddChannelButton({
    container: '#kakao'  // <---- "#kakao-talk-channel-add-button"
});

확인할 수 있는 URL 제공 부탁드립니다.

3

그부분은 적용 안되고있는 상태입니다

< !----> 로 묶어놨어요

4

확인할 수 있는 URL 제공 가능하실까요?

5

앗 넵
http://mrandmrsfragrance.kr/

6

주석처리된 코드를 찾지 못하였는데요 위 주소가 맞으실까요?

7

넵 맞습니다 푸터 제일 아래부분에 기재되어있습니다
1

8

Kakao SDK는 로드하고 있지 않은 것으로 보입니다.
아래 도구를 이용하여 반환되는 스크립트를 적용해 보시겠어요?

Kakao Developers - 카카오톡 채널 추가하기

9

1
2

적용했는데도 뜨지 않습니다

10

image

최하단에 표시되어 있는듯 합니다.
css 조정하시면 될 것 같습니다.

11

1

픽스 하고 위치 조정했는데도 아예 먹지 않는 이유가 무엇일까요?

2

12

css 에 class selector로 정의 되어 있는데 id로 찾아야 하지 않을까요?

#kakao-talk-channel-add-button { position: fixed; ... }

13

너무 어이없는 실수를 했었네욥…; 감사합니다

근데 만약 이미지를 동그란 말풍선 모양 카카오톡 아이콘으로 변경하고 싶을때는 어떻게 해야할까요?

14

동그란 말풍선 이미지는 직접 작성 하셔야 할 것 같습니다.

아래 사이트에서 psd파일을 다운받아 심볼을 사용할 수 있습니다.

Kakao Developers - 카카오 로그인 버튼 리소스 다운로드

이 후, 작성된 이미지를 사용시 직접 이벤트 바인딩을 하시면 됩니다.

예)

window.kakaoAsyncInit = function ()  ... <- 제거

<div id="kakao-talk-channel-add-button">
    <img src="image path..." >
</div>

$("#kakao-add-channel-button").click(function() {
    Kakao.Channel.addChannel({ channelPublicId: 'YOUR ID' })
})
15

0002
노란박스 부분을 지우고 빨간박스 를 추가 후 연결될 카카오톡 아이디를 입력하면 되는걸까요?

0003

html수정시 노란박스 부분을 지우고 말씀해주신 부분을 추가하는 걸까요?

16

안녕하세요.

불필요한 코드임으로 제거 하고 싶으시면 노란 박스의 내용은 지우셔도 괜찮습니다.
(노란 박스의 내용은 안지우셔도 아무 영향 없습니다.)

빨간 박스에 제가 점을 하다 더 찍어뒀는데요 그건 제거하고 채널ID를 입력하시면 됩니다.

$("#kakao-add-channel-button").click(function() {
    Kakao.Channel.addChannel({ channelPublicId: 'YOUR ID' })
})